diff --git a/lib/api/routes/agents.js b/lib/api/routes/agents.js index 5b4563f..f4df869 100644 --- a/lib/api/routes/agents.js +++ b/lib/api/routes/agents.js @@ -35,6 +35,9 @@ tokensRouter.use(requireOwner); router.get('/', asyncWrap(async (_req, res) => { res.json(await repo.list()); })); +// Token metadata across all agents (label/usage/revocation; never the hash) for Settings. +tokensRouter.get('/', asyncWrap(async (_req, res) => { res.json(await repo.listTokenMeta()); })); + router.post('/', validate({ body: createSchema }), asyncWrap(async (req, res) => { diff --git a/lib/api/routes/projects.js b/lib/api/routes/projects.js index 4335ccb..2ec0e63 100644 --- a/lib/api/routes/projects.js +++ b/lib/api/routes/projects.js @@ -80,6 +80,17 @@ router.patch('/:id', }) ); +// Research stub — owner asks Eithan (later) to research this project. +router.post('/:id/research', + validate({ params: idParams }), + asyncWrap(async (req, res) => { + if (req.actor?.kind !== 'user') return res.status(403).json({ error: { code: 'owner_only' } }); + const row = await repo.requestResearch(req.params.id, req.actor); + if (!row) throw new NotFoundError('project not found'); + res.json(row); + }) +); + router.delete('/:id', requireWrite('project'), validate({ params: idParams }), diff --git a/lib/db/migrations/019_project_research.sql b/lib/db/migrations/019_project_research.sql new file mode 100644 index 0000000..f355f88 --- /dev/null +++ b/lib/db/migrations/019_project_research.sql @@ -0,0 +1,8 @@ +-- 019_project_research.sql — fields for the per-space project research feature. +-- The Research button (stub) sets research_status='requested'; the future Eithan +-- agent picks those up, sets 'researching' → 'done', and fills research_notes. +ALTER TABLE projects ADD COLUMN research_status text NOT NULL DEFAULT 'none' + CHECK (research_status IN ('none', 'requested', 'researching', 'done', 'error')); +ALTER TABLE projects ADD COLUMN research_notes text; +ALTER TABLE projects ADD COLUMN research_requested_at timestamptz; +ALTER TABLE projects ADD COLUMN last_researched_at timestamptz; diff --git a/lib/db/repos/projects.js b/lib/db/repos/projects.js index aeb129f..7ada045 100644 --- a/lib/db/repos/projects.js +++ b/lib/db/repos/projects.js @@ -43,6 +43,18 @@ export async function update(id, patch, actor) { return r; } +// Stub for the future Eithan research agent: flag the project as research-requested. +// Eithan will later transition requested → researching → done and fill research_notes. +export async function requestResearch(id, actor) { + const before = await getById(id); + if (!before) return null; + const { rows: [r] } = await pool.query( + `UPDATE projects SET research_status='requested', research_requested_at=now(), updated_at=now() + WHERE id=$1 RETURNING *`, [id]); + await recordAudit(actor, 'update', 'project', id, before, r); + return r; +} + export async function del(id, actor) { const before = await getById(id); await pool.query(`DELETE FROM projects WHERE id=$1`, [id]); diff --git a/public/app.js b/public/app.js index 1fdeb09..47443ca 100644 --- a/public/app.js +++ b/public/app.js @@ -25,6 +25,7 @@ const VIEWS = { sentinel: () => import('./views/sentinel.js'), 'little-blue': () => import('./views/little_blue.js'), terminal: () => import('./views/terminal.js'), + settings: () => import('./views/settings.js'), jobs: () => import('./views/jobs.js') }; diff --git a/public/components/project_card.js b/public/components/project_card.js new file mode 100644 index 0000000..3190a79 --- /dev/null +++ b/public/components/project_card.js @@ -0,0 +1,61 @@ +// Void-1-style expandable project card: status (inline-editable), Research (Eithan +// stub), Edit, Delete (confirm), and an expandable research panel. +import { el } from '../dom.js'; +import { api } from '../api.js'; +import { renderMarkdown } from '../markdown.js'; +import { openProjectModal } from './project_modal.js'; + +const STATUSES = ['idea', 'active', 'paused', 'done', 'abandoned']; +const _open = new Set(); // expanded project ids (persist across re-renders) + +function ago(ts) { + if (!ts) return ''; + const s = (Date.now() - new Date(ts)) / 1000; + if (s < 60) return 'just now'; + if (s < 3600) return Math.floor(s / 60) + 'm ago'; + if (s < 86400) return Math.floor(s / 3600) + 'h ago'; + return Math.floor(s / 86400) + 'd ago'; +} + +// o: { reload() — refetch+render, rerender() — render from current data } +export function projectCard(p, o) { + const open = _open.has(p.id); + const card = el('div', { class: 'proj-card' + (open ? ' open' : '') }); + const busy = p.research_status === 'requested' || p.research_status === 'researching'; + + const statusSel = el('select', { + class: 'proj-status st-' + p.status, + onclick: (e) => e.stopPropagation(), + onchange: async (e) => { try { await api.patch('/api/projects/' + p.id, { status: e.target.value }); o.reload(); } catch (err) { alert('failed: ' + err.message); } } + }, STATUSES.map(s => el('option', { value: s, selected: s === p.status }, s))); + + const research = el('button', { + class: 'proj-btn' + (busy ? ' busy' : ''), + title: busy ? 'Queued for Eithan' : 'Ask Eithan to research this project', + onclick: async (e) => { e.stopPropagation(); try { await api.post('/api/projects/' + p.id + '/research'); o.reload(); } catch (err) { alert('failed: ' + err.message); } } + }, busy ? '↻ Queued' : '↻ Research'); + + const header = el('div', { class: 'proj-head', onclick: () => { open ? _open.delete(p.id) : _open.add(p.id); o.rerender(); } }, + el('span', { class: 'proj-chev' }, '›'), + el('div', { class: 'proj-meta' }, + el('div', { class: 'proj-title' }, p.name), + p.description ? el('div', { class: 'proj-desc' }, p.description) : null), + el('div', { class: 'proj-actions', onclick: (e) => e.stopPropagation() }, + statusSel, research, + el('button', { class: 'proj-btn', onclick: () => openProjectModal(p.space_id, p, o.reload) }, 'Edit'), + el('button', { + class: 'proj-btn danger', title: 'Delete project', + onclick: async () => { if (!confirm(`Delete project "${p.name}"? This cannot be undone.`)) return; try { await api.del('/api/projects/' + p.id); o.reload(); } catch (err) { alert('failed: ' + err.message); } } + }, '✕'))); + card.appendChild(header); + + if (open) { + const panel = el('div', { class: 'proj-panel' }); + panel.appendChild(el('div', { class: 'proj-section-h' }, 'Eithan research' + (p.last_researched_at ? ` · ${ago(p.last_researched_at)}` : ''))); + if (busy) panel.appendChild(el('div', { class: 'muted' }, "Queued for Eithan — he'll fill this in once the agent ships.")); + else if (p.research_notes) { const n = el('div', { class: 'md-preview' }); n.innerHTML = renderMarkdown(p.research_notes); panel.appendChild(n); } + else panel.appendChild(el('div', { class: 'muted' }, 'No research yet — press ↻ Research to queue it for Eithan.')); + card.appendChild(panel); + } + return card; +} diff --git a/public/components/project_modal.js b/public/components/project_modal.js new file mode 100644 index 0000000..383a95c --- /dev/null +++ b/public/components/project_modal.js @@ -0,0 +1,45 @@ +// Create / edit a project. Minimal modal: name, description, status. +import { el } from '../dom.js'; +import { api } from '../api.js'; + +const STATUSES = ['idea', 'active', 'paused', 'done', 'abandoned']; +const slugify = (s) => (s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '').slice(0, 50) || 'project'); + +export function openProjectModal(spaceId, project, onSaved) { + const editing = !!project; + const name = el('input', { class: 'pm-input', value: project?.name || '', placeholder: 'Project name' }); + const desc = el('textarea', { class: 'pm-input', rows: 3, placeholder: 'Description (optional)' }); + desc.value = project?.description || ''; + const status = el('select', { class: 'pm-input' }, STATUSES.map(s => el('option', { value: s, selected: s === (project?.status || 'active') }, s))); + const errEl = el('div', { class: 'err', style: { minHeight: '15px' } }, ''); + + async function save() { + const nm = name.value.trim(); + if (!nm) { errEl.textContent = 'Name required'; return; } + try { + if (editing) { + await api.patch('/api/projects/' + project.id, { name: nm, description: desc.value.trim() || null, status: status.value }); + } else { + await api.post(`/api/spaces/${spaceId}/projects`, { + slug: slugify(nm) + '-' + Date.now().toString(36).slice(-4), + name: nm, description: desc.value.trim() || undefined, status: status.value + }); + } + modal.remove(); + onSaved && onSaved(); + } catch (e) { errEl.textContent = 'Save failed: ' + e.message; } + } + + const modal = el('div', { class: 'rev-overlay', onclick: (e) => { if (e.target === modal) modal.remove(); } }, + el('div', { class: 'pm-modal' }, + el('div', { class: 'pm-head' }, editing ? 'Edit project' : 'New project'), + el('label', { class: 'pm-label' }, 'Name'), name, + el('label', { class: 'pm-label' }, 'Description'), desc, + el('label', { class: 'pm-label' }, 'Status'), status, + errEl, + el('div', { class: 'pm-foot' }, + el('button', { class: 'ghost', onclick: () => modal.remove() }, 'Cancel'), + el('button', { class: 'primary', onclick: save }, editing ? 'Save' : 'Create')))); + document.body.appendChild(modal); + name.focus(); +} diff --git a/public/components/sidebar.js b/public/components/sidebar.js index 28e8b6d..ef488e5 100644 --- a/public/components/sidebar.js +++ b/public/components/sidebar.js @@ -97,7 +97,7 @@ export function renderSidebar(root) { navItem('Search', '/search'), inboxItem, navItem('Jobs', '/jobs'), - el('div', { class: 'sb-item muted', title: 'Ships post-Plan-2' }, 'Resources — later') + navItem('Settings', '/settings') ) ); diff --git a/public/router.js b/public/router.js index c15c573..0379547 100644 --- a/public/router.js +++ b/public/router.js @@ -24,6 +24,7 @@ const ROUTES = [ { name: 'sentinel', re: /^\/sentinel$/, keys: [] }, { name: 'little-blue', re: /^\/little-blue$/, keys: [] }, { name: 'terminal', re: /^\/terminal$/, keys: [] }, + { name: 'settings', re: /^\/settings$/, keys: [] }, { name: 'jobs', re: /^\/jobs$/, keys: [] }, { name: 'home', re: /^\/?$/, keys: [] } ]; diff --git a/public/style.css b/public/style.css index 297ddea..fe27cfc 100644 --- a/public/style.css +++ b/public/style.css @@ -25,7 +25,7 @@ } * { box-sizing: border-box; } -html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; } +html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 15px; } #shell { display: grid; @@ -45,39 +45,39 @@ html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: #rightrail{ grid-area: rail; border-left: 1px solid var(--border); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; } /* topbar */ -.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 13px; color: var(--accent); text-transform: uppercase; padding: 0 6px; } +.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; font-size: 14px; color: var(--accent); text-transform: uppercase; padding: 0 6px; } .topbar-search { flex: 1; max-width: 520px; } .topbar-search input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); - padding: 7px 10px; border-radius: 4px; font-family: var(--font-ui); font-size: 13px; outline: none; + padding: 7px 10px; border-radius: 4px; font-family: var(--font-ui); font-size: 14px; outline: none; } .topbar-search input:focus { border-color: var(--accent-dim); } .topbar-spacer { flex: 1; } -.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } +.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; } .icon-btn:hover { border-color: var(--accent-dim); color: var(--accent); } .badge { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 8px; - background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 700; text-align: center; margin-left: 4px; + background: var(--accent); color: var(--bg); font-size: 11px; font-weight: 700; text-align: center; margin-left: 4px; } /* sidebar */ .sb-section { padding: 8px 12px; } -.sb-title { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; padding: 6px 4px; } +.sb-title { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; padding: 6px 4px; } .sb-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 3px; cursor: pointer; - color: var(--text); text-decoration: none; font-size: 13px; + color: var(--text); text-decoration: none; font-size: 14px; } .sb-item:hover { background: var(--panel-2); } .sb-item.active { background: var(--accent-soft); color: var(--accent); } -.sb-item .caret { color: var(--muted); width: 10px; text-align: center; font-size: 10px; } +.sb-item .caret { color: var(--muted); width: 10px; text-align: center; font-size: 11px; } .sb-children { padding-left: 18px; } /* rightrail */ .rail-toggle { height: var(--topbar-h); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; - cursor: pointer; color: var(--muted); font-size: 11px; + cursor: pointer; color: var(--muted); font-size: 12px; } -.rail-body { flex: 1; padding: 14px 14px; overflow-y: auto; font-size: 13px; color: var(--muted); } +.rail-body { flex: 1; padding: 14px 14px; overflow-y: auto; font-size: 14px; color: var(--muted); } #shell.rail-collapsed .rail-body { display: none; } /* main / views */ @@ -86,12 +86,12 @@ html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: .card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; margin-bottom: 12px; } -.card h3 { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; color: var(--accent); font-weight: 500; } +.card h3 { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; color: var(--accent); font-weight: 500; } .row { display: flex; gap: 16px; } .row > * { flex: 1; min-width: 0; } .muted { color: var(--muted); } -.kbd { font-family: var(--font-mono); background: var(--panel-2); padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 11px; } -pre, code { font-family: var(--font-mono); font-size: 12px; } +.kbd { font-family: var(--font-mono); background: var(--panel-2); padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; } +pre, code { font-family: var(--font-mono); font-size: 13px; } pre { background: var(--panel-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px; overflow-x: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } @@ -100,17 +100,17 @@ hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; } /* form */ input[type=text], input[type=password], textarea, select { background: var(--bg); border: 1px solid var(--border); color: var(--text); - padding: 6px 8px; border-radius: 3px; font-family: var(--font-ui); font-size: 13px; outline: none; + padding: 6px 8px; border-radius: 3px; font-family: var(--font-ui); font-size: 14px; outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--accent-dim); } button.primary { background: var(--accent-dim); color: var(--text); border: 1px solid var(--accent); padding: 6px 14px; - border-radius: 3px; cursor: pointer; font-family: var(--font-ui); font-size: 13px; + border-radius: 3px; cursor: pointer; font-family: var(--font-ui); font-size: 14px; } button.primary:hover { background: var(--accent); color: var(--bg); } button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 6px 12px; - border-radius: 3px; cursor: pointer; font-size: 13px; + border-radius: 3px; cursor: pointer; font-size: 14px; } button.ghost:hover { color: var(--text); border-color: var(--accent-dim); } .back-btn { margin-bottom: 12px; } @@ -122,13 +122,13 @@ button.ghost:hover { color: var(--text); border-color: var(--accent-dim); } font-family: var(--font-display); color: var(--accent); letter-spacing: 0.03em; margin: 16px 0 8px; } .md-preview h1 { font-size: 20px; } .md-preview h2 { font-size: 16px; } -.md-preview h3 { font-size: 14px; text-transform: uppercase; } +.md-preview h3 { font-size: 15px; text-transform: uppercase; } .md-preview a { color: var(--accent); } -.md-preview code { font-family: var(--font-mono); background: var(--panel-2); padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; } +.md-preview code { font-family: var(--font-mono); background: var(--panel-2); padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; } .md-preview pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 12px; overflow-x: auto; } .md-preview pre code { border: none; background: none; padding: 0; } .md-preview blockquote { border-left: 2px solid var(--accent-dim); margin: 8px 0; padding: 2px 12px; color: var(--muted); } -.md-preview table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; } +.md-preview table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; } .md-preview th, .md-preview td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; } .md-preview th { background: var(--panel-2); color: var(--accent); font-weight: 600; letter-spacing: 0.02em; } .md-preview tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); } @@ -138,26 +138,26 @@ button.ghost:hover { color: var(--text); border-color: var(--accent-dim); } .lb-chat { display: flex; flex-direction: column; height: 70vh; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); overflow: hidden; } .lb-chat .lb-log { flex: 1; overflow-y: auto; padding: 14px; } .lb-actions { display: flex; flex-direction: column; gap: 8px; } -.lb-sec { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 6px 0 2px; } +.lb-sec { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 6px 0 2px; } .lb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .lb-card { padding: 12px; margin: 0; } .lb-pending-card { padding: 12px; margin: 0; border-color: var(--accent-dim); } .lb-card-title { font-size: 12.5px; color: var(--text); margin-bottom: 10px; word-break: break-word; } .lb-btn-row { display: flex; gap: 8px; flex-wrap: wrap; } -.lb-act { padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 12px; font-family: var(--font-ui); border: 1px solid var(--border); background: transparent; color: var(--muted); } +.lb-act { padding: 5px 12px; border-radius: 3px; cursor: pointer; font-size: 13px; font-family: var(--font-ui); border: 1px solid var(--border); background: transparent; color: var(--muted); } .lb-act.safe { color: var(--ok); } .lb-act.safe:hover { border-color: var(--ok); color: var(--ok); } .lb-act.risky { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-dim); } .lb-act.risky:hover { background: var(--accent-dim); color: var(--text); } .lb-act:disabled { opacity: 0.5; cursor: default; } .lb-toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 60; } -.lb-toast { background: var(--panel-2); border: 1px solid var(--accent-dim); color: var(--text); padding: 8px 12px; border-radius: 4px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.45); } +.lb-toast { background: var(--panel-2); border: 1px solid var(--accent-dim); color: var(--text); padding: 8px 12px; border-radius: 4px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,0.45); } .lb-toast.err { border-color: var(--bad); color: var(--bad); } @media (max-width: 900px) { .lb-grid { grid-template-columns: 1fr; } } /* Terminal tab (embedded ttyd) */ .term-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } -.term-title { font-family: var(--font-display); color: var(--accent); letter-spacing: 0.08em; font-size: 14px; } +.term-title { font-family: var(--font-display); color: var(--accent); letter-spacing: 0.08em; font-size: 15px; } .term-frame { width: 100%; height: calc(100vh - 100px); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); display: block; } /* Doc/space header bar: back + breadcrumb on the left, export on the right. */ @@ -168,33 +168,100 @@ button.ghost:hover { color: var(--text); border-color: var(--accent-dim); } .ed-controls { display: inline-flex; align-items: center; gap: 8px; } /* Breadcrumb: Space › parent › current — sized + themed to sit inline with the back button */ -.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; font-family: var(--font-ui); line-height: 1; } +.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; font-family: var(--font-ui); line-height: 1; } .crumb { color: var(--muted); text-decoration: none; } .crumb:hover { color: var(--accent); } .crumb.current { color: var(--text); } -.crumb-sep { color: var(--accent-dim); font-size: 14px; } +.crumb-sep { color: var(--accent-dim); font-size: 15px; } /* Export dropdown */ .exp-menu { position: relative; } .exp-list { position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 4px; min-width: 168px; display: none; z-index: 40; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } .exp-menu.open .exp-list { display: block; } -.exp-list button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 7px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; font-family: var(--font-ui); } +.exp-list button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 7px 10px; border-radius: 3px; cursor: pointer; font-size: 13px; font-family: var(--font-ui); } .exp-list button:hover { background: var(--accent-soft); color: var(--accent); } .rev-list { max-height: 340px; overflow-y: auto; min-width: 220px; } /* Revision viewer modal */ .rev-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; } .rev-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; width: min(820px, 94vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6); } -.rev-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-display); color: var(--accent); letter-spacing: 0.04em; font-size: 13px; } +.rev-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-family: var(--font-display); color: var(--accent); letter-spacing: 0.04em; font-size: 14px; } .rev-modal .md-preview { padding: 16px 20px; overflow-y: auto; flex: 1; } .rev-modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } /* AI Usage card */ .aiu-sec { margin-bottom: 12px; } -.aiu-h { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; } -.aiu-link { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--accent); text-decoration: none; } +.aiu-h { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; } +.aiu-link { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--accent); text-decoration: none; } .aiu-link:hover { text-decoration: underline; } +/* ── Themed scrollbars (blackflame) ── */ +* { scrollbar-width: thin; scrollbar-color: var(--accent-dim) var(--panel); } +::-webkit-scrollbar { width: 11px; height: 11px; } +::-webkit-scrollbar-track { background: var(--panel); } +::-webkit-scrollbar-thumb { background: var(--accent-soft); border: 2px solid var(--panel); border-radius: 6px; } +::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); } +::-webkit-scrollbar-corner { background: var(--panel); } + +/* ── Topbar: themed, a touch larger + bolder ── */ +:root { --topbar-h: 54px; } +#topbar { background: linear-gradient(180deg, #17131b, var(--panel)); border-bottom: 1px solid var(--accent-soft); box-shadow: 0 1px 0 rgba(255, 79, 46, 0.10); } +.brand { font-size: 18px; letter-spacing: 0.22em; } +.icon-btn { font-size: 14px; font-weight: 600; padding: 7px 13px; color: var(--text); } +.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent-dim); color: var(--accent); } +.topbar-search input { font-size: 14px; padding: 8px 12px; } +.chrome-toggle { width: 38px; height: 34px; font-size: 17px; } + +/* card header row (h3 + action button) */ +.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } +.card-head h3 { margin: 0; } +.card-head .primary { margin-left: auto; } + +/* Project cards (per-space) */ +.proj-list { display: flex; flex-direction: column; gap: 8px; } +.proj-card { border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); overflow: hidden; } +.proj-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; } +.proj-head:hover { background: rgba(255, 255, 255, 0.015); } +.proj-chev { color: var(--muted); transition: transform .18s; flex: none; } +.proj-card.open .proj-chev { transform: rotate(90deg); color: var(--accent); } +.proj-meta { flex: 1; min-width: 0; } +.proj-title { font-size: 15px; color: var(--text); } +.proj-desc { font-size: 13px; color: var(--muted); margin-top: 2px; } +.proj-actions { display: flex; align-items: center; gap: 6px; flex: none; } +.proj-status { background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 4px; font-size: 12px; padding: 3px 6px; font-family: var(--font-ui); cursor: pointer; } +.proj-status.st-active { color: var(--ok); border-color: var(--ok); } +.proj-status.st-paused { color: var(--warn); border-color: var(--warn); } +.proj-status.st-done { color: var(--muted); } +.proj-status.st-abandoned { color: var(--bad); border-color: var(--bad); } +.proj-status.st-idea { color: var(--accent); border-color: var(--accent-dim); } +.proj-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; font-size: 12px; padding: 4px 9px; cursor: pointer; font-family: var(--font-ui); } +.proj-btn:hover { color: var(--accent); border-color: var(--accent-dim); } +.proj-btn.danger:hover { color: var(--bad); border-color: var(--bad); } +.proj-btn.busy { color: var(--accent); border-color: var(--accent-dim); } +.proj-panel { padding: 0 14px 14px 34px; border-top: 1px solid var(--border); } +.proj-section-h { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 12px 0 8px; } + +/* Project / generic modal */ +.pm-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; width: min(480px, 94vw); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 50px rgba(0,0,0,.6); } +.pm-head { font-family: var(--font-display); color: var(--accent); letter-spacing: .04em; font-size: 17px; margin-bottom: 6px; } +.pm-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 6px; } +.pm-input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 7px 9px; font-family: var(--font-ui); font-size: 14px; } +.pm-input:focus { border-color: var(--accent-dim); outline: none; } +.pm-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } + +/* Settings */ +.settings-card { max-width: 740px; } +.settings-sub { margin: -4px 0 12px; font-size: 13px; } +.settings-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } +.settings-row:last-child { border-bottom: none; } +.settings-row.revoked { opacity: .5; } +.settings-create { flex-wrap: wrap; } +.settings-label { color: var(--text); font-size: 14px; min-width: 120px; } +.settings-value { flex: 1; font-size: 13px; } +.token-out { min-height: 4px; } +.token-reveal { background: var(--accent-soft); border: 1px solid var(--accent-dim); border-radius: 5px; padding: 8px 10px; font-size: 13px; margin: 8px 0; word-break: break-all; } +.token-reveal code { color: var(--accent); font-family: var(--font-mono); } + /* modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal { @@ -209,7 +276,7 @@ ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--border); } ul.plain li:last-child { border-bottom: none; } /* badges (status) */ -.status { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--muted); } +.status { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--border); color: var(--muted); } .status.ok { color: var(--ok); border-color: var(--ok); } .status.warn { color: var(--warn); border-color: var(--warn); } .status.bad { color: var(--bad); border-color: var(--bad); } @@ -217,9 +284,9 @@ ul.plain li:last-child { border-bottom: none; } /* search results */ .search-group { margin-bottom: 22px; } -.search-group .group-h { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; } +.search-group .group-h { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; } .search-hit { padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; margin-bottom: 6px; background: var(--panel); } -.search-hit .hit-meta { color: var(--muted); font-size: 11px; } +.search-hit .hit-meta { color: var(--muted); font-size: 12px; } /* ── Plan 5: right-rail companion chat ──────────────────────────────────── */ .rail-chat { display:flex; flex-direction:column; height:100%; } @@ -228,25 +295,25 @@ ul.plain li:last-child { border-bottom: none; } .rail-hd .chev { cursor:pointer; color:#5b6478; } .rail-log { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; } .turn { display:flex; flex-direction:column; max-width:84%; } -.turn .lbl { font-size:9.5px; letter-spacing:.12em; margin-bottom:3px; } +.turn .lbl { font-size: 10.5px; letter-spacing:.12em; margin-bottom:3px; } .turn .msg { line-height:1.4; padding:6px 10px; border-radius:8px; background:#141826; } .turn.you { align-self:flex-end; align-items:flex-end; } .turn.you .lbl { color:#6f7ce0; } .turn.you .msg { border-right:2px solid #6f7ce0; } .turn.ai { align-self:flex-start; } .turn.ai .lbl { color:var(--accent,#b69cff); } .turn.ai .msg { border-left:2px solid var(--accent,#b69cff); } .tools { align-self:flex-start; } -.tools .chip { font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:#7d869b; } +.tools .chip { font-family:ui-monospace,Menlo,monospace; font-size: 11.5px; color:#7d869b; } .tools .chip.err { color:#e08a8a; } .draftx { align-self:flex-start; max-width:90%; border:1px solid #3a2f5e; background:#1a1530; border-radius:9px; padding:9px 11px; } -.draftx .dh { font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:#9b7dff; } +.draftx .dh { font-size: 10.5px; text-transform:uppercase; letter-spacing:.1em; color:#9b7dff; } .draftx .dt { color:#e3e0f5; margin:4px 0 9px; } .draftx .row { display:flex; gap:6px; } .draftx .ok { background:#2a6f4f; color:#d9ffe9; border:none; border-radius:6px; padding:4px 12px; } .draftx .no { background:#2a2f3d; color:#aeb6c7; border:none; border-radius:6px; padding:4px 12px; } -.draftx.resolved { opacity:.55; } .resolved-tag { font-size:10px; text-transform:uppercase; color:#7d869b; margin-top:6px; } +.draftx.resolved { opacity:.55; } .resolved-tag { font-size: 11px; text-transform:uppercase; color:#7d869b; margin-top:6px; } .rail-inputwrap { border-top:1px solid var(--border,#262b38); padding:9px 12px; } .rail-input { width:100%; resize:none; background:#0c0e14; color:#c9d1e0; border:1px solid #262b38; border-radius:8px; padding:7px 9px; } -.err { color:#e08a8a; font-size:12px; } +.err { color:#e08a8a; font-size: 13px; } #shell.rail-collapsed .rail-chat { display:none; } /* ===== Sacred Valley (Plan 6) ===== */ @@ -260,9 +327,9 @@ ul.plain li:last-child { border-bottom: none; } @media (max-width: 700px) { #sv-cards { grid-template-columns: 1fr; } .sv-card { grid-column: 1 / -1 !important; } } .sv-ed-span { display: inline-flex; align-items: center; gap: 3px; } .sv-ed-step { width: 18px; height: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); - border-radius: 3px; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; } + border-radius: 3px; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } .sv-ed-step:hover { color: var(--accent); border-color: var(--accent-dim); } -.sv-span-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); min-width: 14px; text-align: center; } +.sv-span-val { font-family: var(--font-mono); font-size: 12px; color: var(--text); min-width: 14px; text-align: center; } .sv-card { position: relative; border: 1px solid #2c242a; border-radius: 10px; padding: 16px 18px; @@ -283,18 +350,18 @@ ul.plain li:last-child { border-bottom: none; } .sv-card.dragging { opacity: .5; } .sv-card.drag-over { border-color: var(--accent); } .sv-card-title { - font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; + font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--text); padding-bottom: 7px; margin-bottom: 12px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--accent), transparent 60%) 1; cursor: grab; } -.sv-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; margin: 7px 0; } +.sv-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12px; margin: 7px 0; } .sv-row .k { color: var(--muted); letter-spacing: .04em; } .sv-bar { height: 5px; border-radius: 3px; background: #221820; overflow: hidden; margin-top: 3px; } .sv-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); transition: box-shadow .35s; } .sv-card:hover .sv-bar > i { box-shadow: 0 0 9px rgba(255,79,46,.55); } -.sv-search-input{width:100%;background:#0d0d13;border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--font-mono);font-size:12px} -.sv-run{background:var(--accent-soft);border:1px solid var(--accent-dim);color:var(--accent);border-radius:5px;padding:3px 10px;font-family:var(--font-ui);font-size:11px;cursor:pointer} +.sv-search-input{width:100%;background:#0d0d13;border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--font-mono);font-size: 13px} +.sv-run{background:var(--accent-soft);border:1px solid var(--accent-dim);color:var(--accent);border-radius:5px;padding:3px 10px;font-family:var(--font-ui);font-size: 12px;cursor:pointer} /* ===== Little Blue health band (Task 22) ===== */ #sv-health { margin-top: 28px; } @@ -302,26 +369,26 @@ ul.plain li:last-child { border-bottom: none; } .lb-av { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(125,211,216,.4)); animation: lb-bob 4s ease-in-out infinite; } @keyframes lb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .lb-name { font-family: var(--font-display); letter-spacing: .08em; font-size: 15px; color: var(--text); } -.lb-sub { font-family: var(--font-body); font-style: italic; color: var(--lb); font-size: 14px; } +.lb-sub { font-family: var(--font-body); font-style: italic; color: var(--lb); font-size: 15px; } .lb-group { margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; } -.lb-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); } -.lb-group .gcount { font-family: var(--font-mono); font-size: 10px; color: var(--lb); } +.lb-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--muted); } +.lb-group .gcount { font-family: var(--font-mono); font-size: 11px; color: var(--lb); } .lb-group .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(125,211,216,.25), transparent); } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: linear-gradient(160deg, #14141c, #101017); text-decoration: none; color: var(--text); transition: border-color .25s, transform .25s; } .tile:hover { transform: translateY(-2px); border-color: #37404a; } .tile-icon, .tile-icon-fb { width: 26px; height: 26px; border-radius: 6px; flex: none; } -.tile-icon-fb { display: grid; place-items: center; background: #20202a; color: var(--muted); font-family: var(--font-mono); font-size: 13px; } +.tile-icon-fb { display: grid; place-items: center; background: #20202a; color: var(--muted); font-family: var(--font-mono); font-size: 14px; } .tile-main { flex: 1; min-width: 0; } -.tile-nm { font-family: var(--font-mono); font-size: 12px; display: flex; align-items: center; gap: 7px; } -.tile-host { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 4px; } +.tile-nm { font-family: var(--font-mono); font-size: 13px; display: flex; align-items: center; gap: 7px; } +.tile-host { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; } .tile .dot { width: 8px; height: 8px; border-radius: 50%; } .tile.status-ok .dot { background: var(--ok); box-shadow: 0 0 7px var(--ok); } .tile.status-warn .dot { background: var(--warn); box-shadow: 0 0 7px var(--warn); } .tile.status-down .dot { background: var(--bad); box-shadow: 0 0 7px var(--bad); } .tile.status-unknown .dot { background: var(--muted); } -.tile-go { color: var(--lb); font-size: 11px; opacity: 0; transition: opacity .25s; } +.tile-go { color: var(--lb); font-size: 12px; opacity: 0; transition: opacity .25s; } .tile:hover .tile-go { opacity: 1; } /* ===== Collapsible chrome + responsive layout (Plan 6 polish) ===== */ @@ -389,39 +456,39 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; } /* ===== Network · Devices band (separate from Little Blue's health band) ===== */ #sv-devices { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--border); } .dv-hd { display: flex; align-items: baseline; gap: 12px; } -.dv-title { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--muted); } -.dv-count { font-family: var(--font-mono); font-size: 10px; color: var(--muted); } -.dv-note { font-family: var(--font-body); font-style: italic; color: var(--muted); font-size: 13px; margin: 4px 0 6px; opacity: .8; } +.dv-title { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; color: var(--muted); } +.dv-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } +.dv-note { font-family: var(--font-body); font-style: italic; color: var(--muted); font-size: 14px; margin: 4px 0 6px; opacity: .8; } .dv-section { margin-top: 12px; } .dv-group { display: flex; align-items: center; gap: 10px; margin: 10px 0 7px; } -.dv-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--muted); } -.dv-group .gcount { font-family: var(--font-mono); font-size: 10px; color: var(--muted); } +.dv-group .gname { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); } +.dv-group .gcount { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .dv-group .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .dv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .dv-tile { border: 1px solid var(--border); border-radius: 7px; padding: 8px 11px; background: #101017; display: flex; flex-direction: column; gap: 2px; } -.dv-tile .dv-nm { font-family: var(--font-ui); font-size: 12px; color: var(--text); } -.dv-tile .dv-ip { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } -.dv-tile .dv-vendor { font-family: var(--font-ui); font-size: 10px; color: var(--muted); opacity: .7; } +.dv-tile .dv-nm { font-family: var(--font-ui); font-size: 13px; color: var(--text); } +.dv-tile .dv-ip { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } +.dv-tile .dv-vendor { font-family: var(--font-ui); font-size: 11px; color: var(--muted); opacity: .7; } .dv-tile.flag { border-color: var(--bad); background: #1a1012; } .dv-tile.flag .dv-nm { color: var(--bad); } /* ===== Discovered services + scan (Plan: DB-backed registry) ===== */ .lb-scan { background: var(--accent-soft); border: 1px solid var(--accent-dim); color: var(--accent); - border-radius: 5px; padding: 4px 12px; font-family: var(--font-ui); font-size: 11px; cursor: pointer; flex: none; } + border-radius: 5px; padding: 4px 12px; font-family: var(--font-ui); font-size: 12px; cursor: pointer; flex: none; } .lb-scan:hover { background: var(--accent-dim); color: var(--text); } .tile.disc { border-style: dashed; } .disc-add { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex: none; - border: 1px solid var(--accent-dim); background: transparent; color: var(--accent); font-size: 14px; line-height: 1; cursor: pointer; } + border: 1px solid var(--accent-dim); background: transparent; color: var(--accent); font-size: 15px; line-height: 1; cursor: pointer; } .disc-add:hover { background: var(--accent); color: var(--bg); } /* ===== Sacred Valley — edit layout mode ===== */ .sv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .sv-toolbar { display: flex; gap: 8px; flex: none; } .sv-edit-btn, .sv-reset-btn { background: transparent; border: 1px solid var(--border); color: var(--text); - padding: 5px 12px; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 12px; } + padding: 5px 12px; border-radius: 5px; cursor: pointer; font-family: var(--font-ui); font-size: 13px; } .sv-edit-btn:hover, .sv-reset-btn:hover { border-color: var(--accent-dim); color: var(--accent); } .sv-card-title { cursor: default; } /* drag is via the grip now, not the title */ @@ -430,22 +497,22 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; } background: rgba(10,10,14,.88); border: 1px solid var(--border); border-radius: 6px; padding: 3px 5px; } #sv-cards.editing .sv-card-edit { display: flex; } #sv-cards.editing .sv-card { outline: 1px dashed var(--accent-dim); } -.sv-grip { cursor: grab; color: var(--muted); font-size: 13px; padding: 0 2px; user-select: none; } +.sv-grip { cursor: grab; color: var(--muted); font-size: 14px; padding: 0 2px; user-select: none; } .sv-grip:active { cursor: grabbing; } .sv-ed-sizes { display: flex; gap: 2px; } .sv-ed-size, .sv-ed-hide { width: 20px; height: 20px; border: 1px solid var(--border); background: transparent; - border-radius: 3px; font-size: 10px; cursor: pointer; padding: 0; line-height: 1; } + border-radius: 3px; font-size: 11px; cursor: pointer; padding: 0; line-height: 1; } .sv-ed-size { color: var(--muted); } .sv-ed-size:hover { color: var(--accent); border-color: var(--accent-dim); } .sv-card[data-size="s"] .sv-ed-size[data-s="s"], .sv-card[data-size="m"] .sv-ed-size[data-s="m"], .sv-card[data-size="l"] .sv-ed-size[data-s="l"] { background: var(--accent-dim); color: var(--text); border-color: var(--accent); } -.sv-ed-hide { color: var(--bad); font-size: 11px; } +.sv-ed-hide { color: var(--bad); font-size: 12px; } .sv-ed-hide:hover { background: var(--bad); color: var(--bg); } #sv-tray { flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 18px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; } -.sv-tray-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--muted); } +.sv-tray-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); } .sv-tray-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 14px; - padding: 4px 10px; font-family: var(--font-ui); font-size: 11px; cursor: pointer; } + padding: 4px 10px; font-family: var(--font-ui); font-size: 12px; cursor: pointer; } .sv-tray-chip:hover { border-color: var(--accent); color: var(--accent); } diff --git a/public/views/settings.js b/public/views/settings.js new file mode 100644 index 0000000..0662203 --- /dev/null +++ b/public/views/settings.js @@ -0,0 +1,81 @@ +// #/settings — API tokens, agents, and a placeholder for Orthos Mode. +import { el, mount } from '../dom.js'; +import { api } from '../api.js'; + +function section(title, sub, bodyEl) { + return el('div', { class: 'card settings-card' }, + el('h3', {}, title), + sub ? el('p', { class: 'settings-sub muted' }, sub) : null, + bodyEl); +} + +async function renderTokens(c) { + c.replaceChildren(el('div', { class: 'muted' }, 'Loading…')); + let tokens = [], agents = []; + try { tokens = await api.get('/api/agent-tokens'); } catch { /* */ } + try { agents = await api.get('/api/agents'); } catch { /* */ } + c.replaceChildren(); + + const sel = el('select', { class: 'pm-input', style: { maxWidth: '210px' } }, agents.map(a => el('option', { value: a.id }, `${a.name} (${a.slug})`))); + const label = el('input', { class: 'pm-input', placeholder: 'label (optional)', style: { maxWidth: '170px' } }); + const out = el('div', { class: 'token-out' }); + const mint = el('button', { + class: 'primary', + onclick: async () => { + if (!sel.value) { out.textContent = 'No agents available'; return; } + try { + const r = await api.post('/api/agents/' + sel.value + '/tokens', { label: label.value.trim() || undefined }); + out.replaceChildren(el('div', { class: 'token-reveal' }, el('span', {}, 'New token — copy it now, it won’t be shown again: '), el('code', {}, r.token))); + const list = await api.get('/api/agent-tokens'); tokens = list; paint(); + } catch (e) { out.textContent = 'failed: ' + e.message; } + } + }, 'Mint token'); + + const listWrap = el('div', {}); + function paint() { + listWrap.replaceChildren(); + if (!tokens.length) { listWrap.appendChild(el('div', { class: 'muted' }, 'No tokens yet.')); return; } + for (const t of tokens) { + listWrap.appendChild(el('div', { class: 'settings-row' + (t.revoked_at ? ' revoked' : '') }, + el('span', { class: 'settings-label' }, t.agent_name || t.agent_slug), + el('span', { class: 'settings-value muted' }, `${t.label || '—'} · ${t.last_used ? 'used ' + new Date(t.last_used).toLocaleDateString() : 'never used'}`), + t.revoked_at + ? el('span', { class: 'muted' }, 'revoked') + : el('button', { class: 'proj-btn danger', onclick: async () => { if (!confirm('Revoke this token?')) return; try { await api.del('/api/agent-tokens/' + t.id); renderTokens(c); } catch (e) { alert(e.message); } } }, 'Revoke'))); + } + } + + c.appendChild(el('div', { class: 'settings-row settings-create' }, sel, label, mint)); + c.appendChild(out); + c.appendChild(listWrap); + paint(); +} + +async function renderAgents(c) { + c.replaceChildren(el('div', { class: 'muted' }, 'Loading…')); + let agents = []; + try { agents = await api.get('/api/agents'); } catch { /* */ } + c.replaceChildren(); + if (!agents.length) { c.appendChild(el('div', { class: 'muted' }, 'No agents.')); return; } + for (const a of agents) { + const caps = Object.entries(a.capabilities || {}).filter(([, v]) => v).map(([k]) => k).join(', ') || '—'; + const scope = a.scopes?.space_id ? 'space-scoped' : ''; + c.appendChild(el('div', { class: 'settings-row' }, + el('span', { class: 'settings-label' }, a.name), + el('span', { class: 'settings-value muted' }, `${a.slug} · ${a.kind} · caps: ${caps}${scope ? ' · ' + scope : ''}`))); + } +} + +export async function render(main) { + const tokensBody = el('div', { class: 'settings-body' }); + const agentsBody = el('div', { class: 'settings-body' }); + mount(main, + el('h1', { class: 'view-h1' }, '◆ Settings'), + section('API Tokens', 'Bearer tokens for agents (e.g. the MCP external-research agent). The secret is shown once at creation.', tokensBody), + section('Agents', 'Seeded Cradle agents and what each is allowed to do.', agentsBody), + section('Orthos Mode', 'Local-first answering — Orthos answers first, Claude escalates when needed.', + el('div', { class: 'muted' }, 'Paused for a future project (arrives with the local-agent layer).')) + ); + renderTokens(tokensBody); + renderAgents(agentsBody); +} diff --git a/public/views/space.js b/public/views/space.js index e9d8ef7..155155e 100644 --- a/public/views/space.js +++ b/public/views/space.js @@ -1,14 +1,10 @@ -// Space view — Projects + Open tasks side by side at the top, then a full -// pages & references table below (all pages; refs up to the API max). +// Space view — rich project cards (status, research, edit/delete) + open tasks, +// then a full pages & references table. import { api } from '../api.js'; import { el, mount } from '../dom.js'; import { exportMenu } from '../components/export_menu.js'; - -function projItem(p) { - return el('li', {}, - el('a', { href: '#/project/' + p.id }, p.name), ' ', - el('span', { class: 'status' + (p.status === 'done' ? ' ok' : p.status === 'paused' ? ' warn' : '') }, p.status)); -} +import { projectCard } from '../components/project_card.js'; +import { openProjectModal } from '../components/project_modal.js'; function taskItem(t) { return el('li', {}, @@ -23,28 +19,32 @@ function tableRow(href, title, type) { export async function render(main, ctx) { const id = ctx.params.id; - mount(main, - el('h1', { class: 'view-h1' }, 'Space'), - el('p', { class: 'view-sub muted' }, 'Loading …') - ); + mount(main, el('h1', { class: 'view-h1' }, 'Space'), el('p', { class: 'view-sub muted' }, 'Loading …')); localStorage.setItem('last_space_id', id); let space; try { space = await api.get('/api/spaces/' + id); } - catch (e) { - mount(main, - el('h1', { class: 'view-h1' }, 'Space not found'), - el('p', { class: 'view-sub muted' }, e.message) - ); - return; - } + catch (e) { mount(main, el('h1', { class: 'view-h1' }, 'Space not found'), el('p', { class: 'view-sub muted' }, e.message)); return; } - const [projects, tasks, pages, refs] = await Promise.all([ - api.get(`/api/spaces/${id}/projects`).catch(() => []), + let projects = []; + const [tasks, pages, refs] = await Promise.all([ api.get(`/api/spaces/${id}/tasks?status=todo`).catch(() => []), - api.get(`/api/spaces/${id}/pages`).catch(() => []), // returns ALL pages - api.get(`/api/refs?space_id=${id}&limit=200`).catch(() => []) // 200 = API max + api.get(`/api/spaces/${id}/pages`).catch(() => []), + api.get(`/api/refs?space_id=${id}&limit=200`).catch(() => []) ]); + try { projects = await api.get(`/api/spaces/${id}/projects`); } catch { /* */ } + + // ---- Projects section (rich cards) ---- + const projWrap = el('div', { class: 'proj-list' }); + function renderProjects() { + projWrap.replaceChildren(); + projHead.textContent = `Projects${projects.length ? ` (${projects.length})` : ''}`; + if (!projects.length) { projWrap.appendChild(el('div', { class: 'muted', style: { padding: '4px 2px' } }, 'No projects yet.')); return; } + for (const p of projects) projWrap.appendChild(projectCard(p, { reload, rerender: renderProjects })); + } + async function reload() { try { projects = await api.get(`/api/spaces/${id}/projects`); } catch { /* */ } renderProjects(); } + const projHead = el('h3', {}, 'Projects'); + renderProjects(); const rows = [ ...pages.map(p => tableRow('#/page/' + p.id, p.title, 'page')), @@ -65,33 +65,23 @@ export async function render(main, ctx) { ), el('p', { class: 'view-sub' }, space.description || el('span', { class: 'muted' }, 'No description.')), - // Top: Projects + Open tasks, side by side. - el('div', { class: 'row' }, - el('div', { class: 'card' }, - el('h3', {}, `Projects${projects.length ? ` (${projects.length})` : ''}`), - projects.length - ? el('ul', { class: 'plain' }, projects.map(projItem)) - : el('p', { class: 'muted' }, 'None yet.') - ), - el('div', { class: 'card' }, - el('h3', {}, `Open tasks${tasks.length ? ` (${tasks.length})` : ''}`), - tasks.length - ? el('ul', { class: 'plain' }, tasks.map(taskItem)) - : el('p', { class: 'muted' }, 'Clear board.') - ) - ), + el('div', { class: 'card' }, + el('div', { class: 'card-head' }, projHead, + el('button', { class: 'primary', onclick: () => openProjectModal(id, null, reload) }, '+ New')), + projWrap), + + el('div', { class: 'card' }, + el('h3', {}, `Open tasks${tasks.length ? ` (${tasks.length})` : ''}`), + tasks.length ? el('ul', { class: 'plain' }, tasks.map(taskItem)) : el('p', { class: 'muted' }, 'Clear board.')), - // Below: the full pages & references table. el('div', { class: 'card' }, el('h3', {}, `Pages & references${rows.length ? ` (${pages.length + refs.length})` : ''}`), rows.length ? el('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: '13px' } }, - el('thead', {}, - el('tr', {}, - el('th', { class: 'muted', style: { textAlign: 'left', padding: '5px 8px', fontWeight: '500' } }, 'Title'), - el('th', { class: 'muted', style: { textAlign: 'left', padding: '5px 8px', width: '90px', fontWeight: '500' } }, 'Type'))), - el('tbody', {}, rows)) - : el('p', { class: 'muted' }, 'Nothing here yet.') - ) + el('thead', {}, el('tr', {}, + el('th', { class: 'muted', style: { textAlign: 'left', padding: '5px 8px', fontWeight: '500' } }, 'Title'), + el('th', { class: 'muted', style: { textAlign: 'left', padding: '5px 8px', width: '90px', fontWeight: '500' } }, 'Type'))), + el('tbody', {}, rows)) + : el('p', { class: 'muted' }, 'Nothing here yet.')) ); } diff --git a/tests/api/pending_extended_actions.test.js b/tests/api/pending_extended_actions.test.js index ff39202..7dce157 100644 --- a/tests/api/pending_extended_actions.test.js +++ b/tests/api/pending_extended_actions.test.js @@ -5,6 +5,7 @@ import * as spacesRepo from '../../lib/db/repos/spaces.js'; import * as agentsRepo from '../../lib/db/repos/agents.js'; import * as refsRepo from '../../lib/db/repos/refs.js'; import * as pendingChanges from '../../lib/db/repos/pending_changes.js'; +import { applyPendingChange } from '../../lib/api/routes/pending_changes.js'; // Regression coverage for docs/security-followups.md: // the pending_changes.action CHECK previously rejected the extended actions @@ -69,6 +70,14 @@ describe('ref upsert as a suggest-tier draft', () => { expect(created).toBeTruthy(); expect(created.title).toBe('Y'); }); + + it('approving an upsert for an entity whose repo cannot upsert fails clean (ValidationError, not TypeError)', async () => { + // 'upsert' only legitimately originates from refs; guard the dispatch so a + // stray upsert row on another entity_type fails loud, not with a bare TypeError. + await expect( + applyPendingChange({ entity_type: 'task', action: 'upsert', payload: {} }, owner) + ).rejects.toThrow(/does not support upsert/i); + }); }); describe('resource dependency mutations are owner-only', () => { diff --git a/tests/api/project_research.test.js b/tests/api/project_research.test.js new file mode 100644 index 0000000..1061363 --- /dev/null +++ b/tests/api/project_research.test.js @@ -0,0 +1,30 @@ +import { describe, it, expect, beforeAll } from 'vitest'; +import request from 'supertest'; +import { pool } from '../../lib/db/pool.js'; +import { setup } from './helpers.js'; + +let app, ownerHeaders, projectId; +beforeAll(async () => { + ({ app, ownerHeaders } = await setup()); + const { rows: [s] } = await pool.query(`INSERT INTO spaces(slug,name) VALUES('p','P') RETURNING id`); + const { rows: [p] } = await pool.query( + `INSERT INTO projects(space_id,slug,name,status) VALUES($1,'proj','Proj','active') RETURNING id`, [s.id]); + projectId = p.id; +}); + +describe('project research stub', () => { + it('defaults research_status to none', async () => { + const { rows: [p] } = await pool.query(`SELECT research_status FROM projects WHERE id=$1`, [projectId]); + expect(p.research_status).toBe('none'); + }); + it('POST /research → requested (owner)', async () => { + const res = await request(app).post(`/api/projects/${projectId}/research`).set(ownerHeaders); + expect(res.status).toBe(200); + expect(res.body.research_status).toBe('requested'); + expect(res.body.research_requested_at).toBeTruthy(); + }); + it('404 for an unknown project', async () => { + const res = await request(app).post(`/api/projects/00000000-0000-0000-0000-000000000000/research`).set(ownerHeaders); + expect(res.status).toBe(404); + }); +});