f8f7cd75da
Tool audit log:
- Every orchestrator tool call logged to home/{user}/tool_audit/YYYY-MM-DD.jsonl
- Files panel sidebar: audit log group (collapsed), date-linked read-only table
- Admin endpoints: /api/audit/files, /api/audit/day, /api/audit/recent, /api/audit/stats
- Engine and model name recorded per entry
OpenAI orchestrator improvements:
- Context budget enforcement: 75% of model context_k (min 16k)
- Message compaction: truncates old tool results when approaching budget
- max_rounds respected per model config (intersected with server cap)
OpenRouter onboarding (setup.html, onboarding.py, app.js, settings.html):
- Step 3 of 3: /setup/model with curated model picker
- Chat banner for users on server-default model (informational, not alarmist)
- Settings quick-link card; /setup/model works standalone for existing users
Model registry + session store:
- set_role_config / get_role_config for per-role tool lists and system_append
- session_store: session rename, session name backfill endpoint
UI updates (app.js, index.html, style.css, local_llm.html):
- Role toggle in context panel
- Off-the-record mode
- Agent notes read-only viewer
- OPERATIONS.md loaded at T2+ in context
Documentation:
- HELP.md: full tool table, per-role tool sets, Agent Notes, usage tracking
- TOOLS.md: Agent Notes section, count corrected to 44
- ARCH__SYSTEM.md, ARCH__BACKENDS.md, MASTER.md updated to match reality
- CLAUDE.md: onboarding flow, documentation philosophy sections
- README.md: stack in practice, DeepSeek TUI mention, architecture diagram updated
- TODO__Agents.md: onboarding task completed with deviation notes
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
340 lines
12 KiB
HTML
340 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cortex — Setup</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0f1117;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
font-weight: 450;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: #e2e8f0;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card {
|
|
background: #1a1d27;
|
|
border: 1px solid #2d3148;
|
|
border-radius: 12px;
|
|
padding: 2.5rem 2rem;
|
|
width: 100%;
|
|
max-width: 440px;
|
|
}
|
|
|
|
.logo {
|
|
text-align: center;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.logo h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.05em; color: #a78bfa; }
|
|
.logo p { font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem; }
|
|
|
|
h2 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #94a3b8;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #2d3148;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: #94a3b8;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
label small { font-weight: 400; color: #94a3b8; }
|
|
|
|
input, select {
|
|
width: 100%;
|
|
padding: 0.65rem 0.85rem;
|
|
background: #0f1117;
|
|
border: 1px solid #2d3148;
|
|
border-radius: 6px;
|
|
color: #e2e8f0;
|
|
font-size: 0.95rem;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
input:focus, select:focus { border-color: #7c3aed; }
|
|
select option { background: #1a1d27; }
|
|
|
|
.field { margin-bottom: 1rem; }
|
|
|
|
.hint { font-size: 0.75rem; color: #94a3b8; margin-top: 0.3rem; }
|
|
|
|
button[type="submit"] {
|
|
width: 100%;
|
|
padding: 0.7rem;
|
|
margin-top: 0.5rem;
|
|
background: #7c3aed;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
button[type="submit"]:hover { background: #6d28d9; }
|
|
|
|
.error {
|
|
color: #f87171;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.step-label {
|
|
font-size: 0.7rem;
|
|
color: #94a3b8;
|
|
text-align: right;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.emoji-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.emoji-opt {
|
|
font-size: 1.3rem;
|
|
cursor: pointer;
|
|
padding: 0.2rem 0.35rem;
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
transition: border-color 0.1s;
|
|
line-height: 1;
|
|
}
|
|
|
|
.emoji-opt.selected { border-color: #7c3aed; background: #2d1f52; }
|
|
#emoji-hidden { display: none; }
|
|
|
|
.provider-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
background: #2d1f52;
|
|
border: 1px solid #7c3aed;
|
|
border-radius: 6px;
|
|
padding: 0.3rem 0.6rem;
|
|
font-size: 0.78rem;
|
|
color: #a78bfa;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.skip-link {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 1rem;
|
|
font-size: 0.8rem;
|
|
color: #64748b;
|
|
text-decoration: none;
|
|
}
|
|
.skip-link:hover { color: #94a3b8; }
|
|
|
|
.model-hint {
|
|
font-size: 0.72rem;
|
|
color: #64748b;
|
|
margin-top: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="logo">
|
|
<h1>Cortex</h1>
|
|
<p>Let's get you set up.</p>
|
|
</div>
|
|
|
|
<!-- ERROR -->
|
|
<!-- ERROR_MODEL -->
|
|
|
|
<!-- ── Step 1: password ───────────────────────────────────────── -->
|
|
<div id="step-password">
|
|
<div class="step-label">Step 1 of 3</div>
|
|
<h2>Set your password</h2>
|
|
<form method="POST" action="" id="password-form">
|
|
<input type="hidden" name="step" value="password">
|
|
<div class="field">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password"
|
|
autocomplete="new-password" autofocus required minlength="8">
|
|
<p class="hint">Minimum 8 characters.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="confirm">Confirm password</label>
|
|
<input type="password" id="confirm" name="confirm"
|
|
autocomplete="new-password" required>
|
|
</div>
|
|
<button type="submit">Continue →</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- ── Step 2: persona ────────────────────────────────────────── -->
|
|
<div id="step-persona" style="display:none">
|
|
<div class="step-label">Step 2 of 3</div>
|
|
<h2>Create your persona</h2>
|
|
<form method="POST" action="" id="persona-form">
|
|
<input type="hidden" name="step" value="persona">
|
|
<div class="field">
|
|
<label for="persona_name">
|
|
Persona name <small>(used in the URL)</small>
|
|
</label>
|
|
<input type="text" id="persona_name" name="persona_name"
|
|
pattern="[a-z_][a-z0-9_\-]{0,31}"
|
|
placeholder="e.g. tina" required>
|
|
<p class="hint">Lowercase, no spaces. This becomes /you/tina in the URL.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="display_name">Display name</label>
|
|
<input type="text" id="display_name" name="display_name"
|
|
placeholder="e.g. Tina" required>
|
|
<p class="hint">Shown in the chat header.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="user_real_name">Your name</label>
|
|
<input type="text" id="user_real_name" name="user_real_name"
|
|
placeholder="e.g. Holly" required>
|
|
<p class="hint">What your persona should call you.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label>Pick an emoji</label>
|
|
<div class="emoji-row" id="emoji-row">
|
|
<!-- populated by JS -->
|
|
</div>
|
|
<input type="hidden" name="emoji" id="emoji-hidden" value="✨">
|
|
</div>
|
|
<div class="field">
|
|
<label for="description">
|
|
Short description <small>(optional)</small>
|
|
</label>
|
|
<input type="text" id="description" name="description"
|
|
placeholder="e.g. Friendly, creative, loves music">
|
|
</div>
|
|
<button type="submit">Create my persona →</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- ── Step 3: model connect ─────────────────────────────────── -->
|
|
<div id="step-model" style="display:none">
|
|
<div class="step-label"><!-- SETUP_STEP3_LABEL --></div>
|
|
<h2>Connect an AI model</h2>
|
|
<div class="provider-badge">⚡ Recommended: OpenRouter</div>
|
|
<p style="font-size:0.82rem;color:#94a3b8;margin-bottom:1rem;">
|
|
One API key gives you access to Claude, Gemini, Llama, and dozens of other models.
|
|
Get a free key at <a href="https://openrouter.ai/keys" target="_blank" style="color:#a78bfa;">openrouter.ai/keys</a>.
|
|
</p>
|
|
<form method="POST" action="/setup/model" id="model-form">
|
|
<div class="field">
|
|
<label for="api_key">OpenRouter API key</label>
|
|
<input type="password" id="api_key" name="api_key"
|
|
autocomplete="off" placeholder="sk-or-v1-..." required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="model_name">Starting model</label>
|
|
<select id="model_name" name="model_name">
|
|
<option value="anthropic/claude-3-5-haiku-20241022">Claude 3.5 Haiku — Fast & affordable</option>
|
|
<option value="anthropic/claude-3-7-sonnet-20250219">Claude 3.7 Sonnet — Smarter Claude</option>
|
|
<option value="google/gemini-2.0-flash-001">Gemini 2.0 Flash — Fast Google model</option>
|
|
<option value="meta-llama/llama-3.3-70b-instruct">Llama 3.3 70B — Open source</option>
|
|
</select>
|
|
<p class="hint">You can add more models or switch anytime in Account → Model Registry.</p>
|
|
</div>
|
|
<button type="submit">Connect & start chatting →</button>
|
|
</form>
|
|
<p class="model-hint">
|
|
Using Ollama, a local model, or something else?
|
|
<a href="#" id="skip-model-link" style="color:#64748b;">Skip this step →</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// ── Emoji picker ──────────────────────────────────────────────────
|
|
const EMOJIS = ['✨','🌙','🌸','🔮','🦋','🌿','⚡','🎯','🌊','🎨',
|
|
'🦊','🐉','🌺','🍀','🎵','💫','🔥','❄️','🌈','🏔️'];
|
|
const emojiRow = document.getElementById('emoji-row');
|
|
const emojiHidden = document.getElementById('emoji-hidden');
|
|
let selected = '✨';
|
|
|
|
EMOJIS.forEach(e => {
|
|
const span = document.createElement('span');
|
|
span.className = 'emoji-opt' + (e === selected ? ' selected' : '');
|
|
span.textContent = e;
|
|
span.addEventListener('click', () => {
|
|
document.querySelectorAll('.emoji-opt').forEach(s => s.classList.remove('selected'));
|
|
span.classList.add('selected');
|
|
selected = e;
|
|
emojiHidden.value = e;
|
|
});
|
|
emojiRow.appendChild(span);
|
|
});
|
|
|
|
// ── Step toggle (server tells us which step via query param) ─────
|
|
const params = new URLSearchParams(location.search);
|
|
if (params.get('step') === '2') {
|
|
document.getElementById('step-password').style.display = 'none';
|
|
document.getElementById('step-persona').style.display = 'block';
|
|
}
|
|
if (params.get('step') === '3') {
|
|
document.getElementById('step-password').style.display = 'none';
|
|
document.getElementById('step-persona').style.display = 'none';
|
|
document.getElementById('step-model').style.display = 'block';
|
|
}
|
|
|
|
// ── Client-side confirm password check ───────────────────────────
|
|
document.getElementById('password-form').addEventListener('submit', e => {
|
|
const pw = document.getElementById('password').value;
|
|
const cfm = document.getElementById('confirm').value;
|
|
if (pw !== cfm) {
|
|
e.preventDefault();
|
|
alert('Passwords do not match.');
|
|
}
|
|
});
|
|
|
|
// ── Skip model setup — navigate to user home ─────────────────────
|
|
document.getElementById('skip-model-link')?.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
// Ask server for skip target (the cx_setup_persona cookie has the path)
|
|
fetch('/setup/model/skip', { method: 'POST', credentials: 'same-origin' })
|
|
.then(r => { if (r.redirected) location.href = r.url; else location.href = '/'; })
|
|
.catch(() => { location.href = '/'; });
|
|
});
|
|
|
|
// ── Auto-generate persona slug from display name ─────────────────
|
|
document.getElementById('display_name').addEventListener('input', function() {
|
|
const slugField = document.getElementById('persona_name');
|
|
if (!slugField._touched) {
|
|
slugField.value = this.value
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9_-]/g, '')
|
|
.slice(0, 32);
|
|
}
|
|
});
|
|
document.getElementById('persona_name').addEventListener('input', function() {
|
|
this._touched = true;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|