aimeat 1.32.1 → 1.33.2

package/dist/public/views/secretary/cards.js

@@ -0,0 +1,419 @@
+/**
+ * @file secretary/cards.js
+ * @description Presentational cards for the Secretary view, split out of views/secretary.js to keep the
+ *   main component focused on state + logic (and under the file-size limit). Each export is a PURE render
+ *   function taking a props bag — no hooks, no state — so the view owns all state/handlers and passes
+ *   them in. Cards: contextSwitcher · hirePanel · chatCard · findCard · noteCard · decisionsCard ·
+ *   brainCard · operatingCard · historyCard · metaCard. See views/secretary.js + docs/plans/2026-06-23-secretary-feature.md.
+ * @structure one exported render function per card (props in → htm out)
+ * @usage import { chatCard, findCard, ... } from '/views/secretary/cards.js'; ... ${chatCard({...})}
+ * @version-history
+ *   v0.6.0 — 2026-06-24 — P3-A: chatCard gains a doc/image attach control (📎) + an in-flight /
+ *     filed status line, driven by the intake hook's handleAttach.
+ *   v0.5.0 — 2026-06-24 — P2-E: noteCard shows the cross-context route banner (auto-route to a
+ *     non-active context on high confidence; "unsure" hint on low) driven by the intake hook.
+ *   v0.4.0 — 2026-06-24 — P1: automationCard shows remaining daily morsel budget; metaCard shows a
+ *     self-facing reliability chip (mean reviewed-decision score); decisionsCard handles tick `text`.
+ *   v0.3.0 — 2026-06-24 — Phase 5: goalsCard + decisionLogCard (learning loop).
+ *   v0.2.0 — 2026-06-24 — Phase 4: feedCard + automationCard.
+ *   v0.1.0 — 2026-06-24 — Extract cards from views/secretary.js (Phase 3 cleanup).
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
+import { SECRETARY_CAPABILITIES, BANDS } from '/js/services/secretary-policy.js';
+import { buildInterviewPrompt } from '/js/services/secretary-helpers.js';
+
+/** Context "hats" switcher chips + add. */
+export function contextSwitcher(p) {
+  return html`
+    <div class="sec-ctx-bar">
+      ${p.contexts.map((c) => html`
+        <button class="sec-ctx-chip ${c.id === p.activeId ? 'active' : ''}" key=${c.id} onClick=${() => p.switchContext(c.id)}>${escHtml(c.name)}</button>`)}
+      <button class="sec-ctx-add" title=${t('secretary.addContext')} onClick=${p.openAdd}>＋</button>
+    </div>`;
+}
+
+/** Hire / re-run onboarding: external prompt-driven interview + in-app generate + paste→apply. */
+export function hirePanel(p) {
+  return html`
+    <section class="sec-card sec-hire">
+      <div class="sec-card-head">
+        <h2 class="sec-h2">${p.firstEver ? t('secretary.hireTitle') : (p.hireMode === 'edit' ? t('secretary.rerun') : t('secretary.addContextTitle'))}</h2>
+        ${!p.firstEver && html`<button class="btn-ghost btn-sm" onClick=${p.onCancel}>${t('secretary.cancel')}</button>`}
+      </div>
+      <p class="sec-desc">${t('secretary.hireIntro')}</p>
+      <div class="sec-opt">
+        <div class="sec-opt-h">${t('secretary.optionA')}</div>
+        <div class="sec-prompt-box">${buildInterviewPrompt(p.owner)}</div>
+        <${CopyButton} text=${buildInterviewPrompt(p.owner)} className="btn-outline btn-sm" label=${t('secretary.copyPrompt')} copiedLabel=${'✓ ' + t('secretary.copied')} />
+      </div>
+      <div class="sec-opt">
+        <div class="sec-opt-h">${t('secretary.optionB')}</div>
+        <textarea class="sec-paste" rows="3" placeholder=${t('secretary.needsPlaceholder')} value=${p.needs} onInput=${(e) => p.setNeeds(e.target.value)}></textarea>
+        <button class="btn-outline btn-sm" disabled=${!p.needs.trim() || p.generating} onClick=${p.generateInApp}>${p.generating ? t('secretary.generating') : t('secretary.generate')}</button>
+      </div>
+      <div class="sec-step"><span class="sec-step-n">→</span> ${t('secretary.hireStep2')}</div>
+      <textarea class="sec-paste" rows="7" placeholder=${t('secretary.pastePlaceholder')} value=${p.result} onInput=${(e) => p.setResult(e.target.value)}></textarea>
+      <div class="sec-actions">
+        <button class="btn-primary" disabled=${!p.result.trim() || p.applying} onClick=${p.applyResult}>${p.applying ? t('secretary.applying') : (p.firstEver || p.hireMode === 'new' ? t('secretary.apply') : t('secretary.applyEdit'))}</button>
+      </div>
+    </section>`;
+}
+
+/** Context-aware chat (per active context) + the cheap routing suggestion + doc/image attach (P3-A). */
+export function chatCard(p) {
+  const canAttach = typeof p.onAttach === 'function' && p.canAttach !== false;
+  return html`
+    <section class="sec-card sec-chat">
+      <h2 class="sec-h2">${t('secretary.chatTitle')} · ${escHtml(p.activeName)}</h2>
+      <div class="sec-chat-log">
+        ${p.chat.length === 0
+          ? html`<div class="sec-hint">${t('secretary.chatEmpty')}</div>`
+          : p.chat.map((m, i) => html`<div class="sec-msg sec-msg-${m.role}" key=${i}>${escHtml(m.content)}</div>`)}
+        ${p.chatSending ? html`<div class="sec-msg sec-msg-assistant sec-msg-pending">…</div>` : null}
+      </div>
+      ${p.routeSuggestion ? html`
+        <div class="sec-route-hint">
+          <span>${t('secretary.routeSuggest')} <strong>${escHtml(p.routeSuggestion.name)}</strong></span>
+          <button class="btn-ghost btn-sm" onClick=${() => p.switchContext(p.routeSuggestion.id)}>${t('secretary.routeSwitch')}</button>
+        </div>` : null}
+      ${canAttach && p.attaching ? html`<div class="sec-hint sec-attach-status">${t('secretary.attaching')}</div>` : null}
+      ${canAttach && !p.attaching && p.attachResult ? html`
+        <div class="sec-route-hint"><span>${t('secretary.attachFiled')} <strong>${escHtml(p.attachResult.wsName)}</strong>${p.attachResult.name ? html` — ${escHtml(p.attachResult.name)}` : null}</span></div>` : null}
+      <div class="sec-chat-input">
+        <textarea rows="2" placeholder=${t('secretary.chatPlaceholder')} value=${p.chatInput}
+          onInput=${(e) => p.setChatInput(e.target.value)}
+          onKeyDown=${(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); p.sendChat(); } }}></textarea>
+        ${canAttach ? html`
+          <label class="btn-outline btn-sm sec-attach-btn ${p.attaching ? 'disabled' : ''}" title=${t('secretary.attachHint')}>
+            📎 ${t('secretary.attach')}
+            <input type="file" accept="image/*,.pdf,.txt,.md,.doc,.docx,.csv" hidden disabled=${p.attaching}
+              onChange=${(e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; if (f) p.onAttach(f); }} />
+          </label>` : null}
+        <button class="btn-primary" disabled=${!p.chatInput.trim() || p.chatSending} onClick=${p.sendChat}>
+          ${p.chatSending ? t('secretary.chatSending') : t('secretary.chatSend')}
+        </button>
+      </div>
+    </section>`;
+}
+
+/** Resource finder via aimeat_discover. */
+export function findCard(p) {
+  return html`
+    <section class="sec-card sec-find">
+      <h2 class="sec-h2">${t('secretary.findTitle')}</h2>
+      <p class="sec-hint">${t('secretary.findHint')}</p>
+      <div class="sec-find-bar">
+        <input class="sec-find-in" placeholder=${t('secretary.findPlaceholder')} value=${p.findQ}
+          onInput=${(e) => p.setFindQ(e.target.value)}
+          onKeyDown=${(e) => { if (e.key === 'Enter') { e.preventDefault(); p.doFind(); } }} />
+        <select class="sec-band" value=${p.findScope} onChange=${(e) => p.setFindScope(e.target.value)}>
+          <option value="public" selected=${p.findScope === 'public'}>${t('secretary.findScopePublic')}</option>
+          <option value="own" selected=${p.findScope === 'own'}>${t('secretary.findScopeMine')}</option>
+        </select>
+        <button class="btn-primary" disabled=${p.finding} onClick=${p.doFind}>${p.finding ? t('secretary.findSearching') : t('secretary.findSearch')}</button>
+      </div>
+      ${p.findResults !== null && html`
+        <div class="sec-find-results">
+          ${p.findResults.length === 0
+            ? html`<div class="sec-hint">${t('secretary.findEmpty')}</div>`
+            : p.findResults.map((e, i) => html`
+              <div class="sec-find-row" key=${i}>
+                <span class="sec-find-type">${escHtml(e.type)}</span>
+                <div class="sec-find-main">
+                  <div class="sec-find-title">${e.url ? html`<a href=${e.url} target="_blank" rel="noreferrer">${escHtml(e.title)}</a>` : escHtml(e.title)}</div>
+                  ${e.description ? html`<div class="sec-find-desc">${escHtml(String(e.description).slice(0, 160))}</div>` : null}
+                </div>
+              </div>`)}
+        </div>`}
+    </section>`;
+}
+
+/** Save-a-note composer (file into a workspace) + Ask-in-inbox (Ask band). */
+export function noteCard(p) {
+  return html`
+    <section class="sec-card sec-note">
+      <h2 class="sec-h2">${t('secretary.noteTitle')}</h2>
+      <p class="sec-hint">${t('secretary.noteHint')}</p>
+      <textarea class="sec-paste" rows="3" placeholder=${t('secretary.notePlaceholder')} value=${p.noteText} onInput=${(e) => p.setNoteText(e.target.value)}></textarea>
+      ${p.route && p.route.confidence === 'high' ? html`
+        <div class="sec-route-hint">
+          <span>${t('secretary.routeBelongs')} <strong>${escHtml(p.route.name)}</strong></span>
+          <button class="btn-outline btn-sm" disabled=${p.noteSaving} onClick=${p.autoRouteNote}>${t('secretary.routeFileThere')}</button>
+        </div>` : p.route && p.route.confidence === 'low' ? html`
+        <div class="sec-route-hint"><span class="sec-hint">${t('secretary.routeUnsure')}</span></div>` : null}
+      <div class="sec-note-bar">
+        <label class="sec-hint">${t('secretary.noteInto')}</label>
+        <select class="sec-band" value=${p.effectiveWsId} onChange=${(e) => p.setNoteWsId(e.target.value)}>
+          ${p.wsList.map((w) => html`<option value=${w.id} selected=${p.effectiveWsId === w.id}>${escHtml(w.name)}</option>`)}
+        </select>
+        <button class="btn-primary" disabled=${!p.noteText.trim() || p.noteSaving} onClick=${p.saveNote}>${p.noteSaving ? t('secretary.noteSaving') : t('secretary.noteSave')}</button>
+        ${p.wsList.length >= 2 ? html`<button class="btn-outline btn-sm" disabled=${!p.noteText.trim() || p.noteSaving} onClick=${p.askDecision} title=${t('secretary.askInInboxHint')}>${t('secretary.askInInbox')}</button>` : null}
+      </div>
+    </section>`;
+}
+
+/** Pending Ask-band decisions awaiting the owner's inbox answer (+ Apply / dismiss). */
+export function decisionsCard(p) {
+  return html`
+    <section class="sec-card">
+      <h2 class="sec-h2">${t('secretary.decisionsTitle')}</h2>
+      <ul class="sec-hist">
+        ${p.pendingIds.map((pid) => {
+          const dec = p.pendingDecisions[pid];
+          const answer = p.decisionAnswers[pid];
+          return html`<li class="sec-hist-row" key=${pid}>
+            <span class="sec-hist-purpose">${escHtml((dec.body || dec.text || dec.question || '').slice(0, 60))}</span>
+            ${answer
+              ? html`<button class="btn-primary btn-sm" onClick=${() => p.applyDecision(pid)}>${t('secretary.decisionApply')}: ${escHtml(answer)}</button>`
+              : html`<span class="sec-hint">${t('secretary.decisionAwaiting')}</span>`}
+            <button class="btn-ghost btn-sm" onClick=${() => p.dismissDecision(pid)}>${t('secretary.cancel')}</button>
+          </li>`;
+        })}
+      </ul>
+    </section>`;
+}
+
+/** Status + brain (purpose + rules) + self-organism summary, with Re-run. */
+export function brainCard(p) {
+  const brain = p.brain;
+  const active = p.active;
+  return html`
+    <section class="sec-card">
+      <div class="sec-card-head">
+        <div class="sec-status"><span class="sec-dot"></span> ${t('secretary.hiredStatus')}</div>
+        <button class="btn-ghost btn-sm" onClick=${p.openEdit}>${t('secretary.rerun')}</button>
+      </div>
+      <h2 class="sec-h2">${t('secretary.brain')}</h2>
+      <p class="sec-purpose">${escHtml(brain.purpose)}</p>
+      ${Array.isArray(brain.rules) && brain.rules.length > 0 && html`<ul class="sec-rules">${brain.rules.map((r) => html`<li key=${r.id}>${escHtml(r.description)}</li>`)}</ul>`}
+      ${active.organismName && html`
+        <h2 class="sec-h2">${t('secretary.selfOrganism')}</h2>
+        <p class="sec-orgname">🗂 ${escHtml(active.organismName)}</p>
+        ${Array.isArray(active.workspaces) && html`<ul class="sec-ws">${active.workspaces.map((w, i) => html`<li key=${i}><strong>${escHtml(w.name)}</strong>${w.purpose ? html` — ${escHtml(w.purpose)}` : null}</li>`)}</ul>`}`}
+    </section>`;
+}
+
+/** Operating model: stop-spending + daily budget + per-capability autonomy bands. */
+export function operatingCard(p) {
+  const policy = p.policy;
+  return html`
+    <section class="sec-card">
+      <h2 class="sec-h2">${t('secretary.howIWork')}</h2>
+      <label class="sec-stop ${policy.stopSpending ? 'on' : ''}">
+        <input type="checkbox" checked=${policy.stopSpending} onChange=${p.toggleStop} />
+        <span><strong>${t('secretary.stopSpending')}</strong><br/><span class="sec-hint">${t('secretary.stopSpendingHint')}</span></span>
+      </label>
+      <div class="sec-budget">
+        <label>${t('secretary.dailyBudget')}</label>
+        <input type="number" min="0" class="sec-budget-in" value=${policy.dailyMorselBudget == null ? '' : policy.dailyMorselBudget} placeholder=${t('secretary.noLimit')} onChange=${(e) => p.setBudget(e.target.value)} />
+        <span class="sec-hint">${t('secretary.dailyBudgetHint')}</span>
+      </div>
+      <p class="sec-hint sec-bands-note">${t('secretary.bandsNote')}</p>
+      <ul class="sec-caps">
+        ${SECRETARY_CAPABILITIES.map((c) => html`
+          <li class="sec-cap" key=${c.id}>
+            <span class="sec-cap-label">${t('secretary.cap.' + c.id)}${c.costs ? html`<span class="sec-cap-tag">${t('secretary.capCosts')}</span>` : null}</span>
+            ${c.enterprise
+              ? html`<span class="sec-cap-locked sec-cap-ent">${t('secretary.enterprise')}</span>`
+              : c.locked
+              ? html`<span class="sec-cap-locked">${t('secretary.band.' + policy.bands[c.id])} · ${t('secretary.locked')}</span>`
+              : html`<select class="sec-band" value=${policy.bands[c.id]} onChange=${(e) => p.setBand(c.id, e.target.value)}>${BANDS.map((b) => html`<option value=${b} selected=${policy.bands[c.id] === b}>${t('secretary.band.' + b)}</option>`)}</select>`}
+          </li>`)}
+      </ul>
+    </section>`;
+}
+
+/** Brain version history + restore. */
+export function historyCard(p) {
+  return html`
+    <section class="sec-card">
+      <h2 class="sec-h2">${t('secretary.history')}</h2>
+      <ul class="sec-hist">
+        ${p.brainHistory.map((snap, i) => html`
+          <li class="sec-hist-row" key=${i}>
+            <span class="sec-hist-purpose">${escHtml((snap.purpose || '').slice(0, 80))}</span>
+            <button class="btn-ghost btn-sm" disabled=${p.applying} onClick=${() => p.restore(snap)}>${t('secretary.restore')}</button>
+          </li>`)}
+      </ul>
+    </section>`;
+}
+
+/** Guided playbook (Phase 3c): propose steps → approve → execute (file + discover) → result. */
+export function guidedPlanCard(p) {
+  return html`
+    <section class="sec-card sec-plan">
+      <h2 class="sec-h2">${t('secretary.plan.title')}</h2>
+      <p class="sec-hint">${t('secretary.plan.hint')}</p>
+      ${!p.steps && !p.result ? html`
+        <textarea class="sec-paste" rows="2" placeholder=${t('secretary.plan.placeholder')} value=${p.goal} onInput=${(e) => p.setGoal(e.target.value)}></textarea>
+        <div class="sec-actions">
+          <button class="btn-primary" disabled=${!p.goal.trim() || p.planning} onClick=${p.planIt}>${p.planning ? t('secretary.plan.planning') : t('secretary.plan.go')}</button>
+        </div>` : null}
+      ${p.steps && !p.result ? html`
+        <div class="sec-plan-steps">
+          ${p.steps.summary ? html`<p class="sec-purpose">${escHtml(p.steps.summary)}</p>` : null}
+          <ol class="sec-rules">
+            ${p.steps.steps.map((s, i) => html`<li key=${i}><strong>${escHtml(s.title)}</strong>${s.detail ? html` — ${escHtml(s.detail)}` : null}</li>`)}
+          </ol>
+          <div class="sec-actions">
+            <button class="btn-ghost btn-sm" onClick=${p.cancelPlan}>${t('secretary.cancel')}</button>
+            <button class="btn-primary" disabled=${p.running} onClick=${p.runPlan}>${p.running ? t('secretary.plan.running') : t('secretary.plan.approve')}</button>
+          </div>
+        </div>` : null}
+      ${p.result ? html`
+        <div class="sec-plan-result">
+          <div class="sec-status"><span class="sec-dot"></span> ${t('secretary.plan.ran')}</div>
+          ${p.result.wsName ? html`<p class="sec-hint">${t('secretary.plan.filed')} <strong>${escHtml(p.result.wsName)}</strong></p>` : null}
+          <p class="sec-hint">${t('secretary.plan.found')} ${p.result.found}</p>
+          <button class="btn-ghost btn-sm" onClick=${p.resetPlan}>${t('secretary.plan.new')}</button>
+        </div>` : null}
+    </section>`;
+}
+
+/** Home feed (Phase 4): what the Secretary did on its own (autonomous briefings). */
+export function feedCard(p) {
+  return html`
+    <section class="sec-card sec-feed">
+      <h2 class="sec-h2">${t('secretary.feed.title')}</h2>
+      ${p.feed.length === 0
+        ? html`<div class="sec-hint">${t('secretary.feed.empty')}</div>`
+        : html`<ul class="sec-feed-list">
+            ${p.feed.map((it, i) => html`<li class="sec-feed-item" key=${it.id || i}>
+              <div class="sec-feed-meta">${it.contextName ? escHtml(it.contextName) + ' · ' : ''}${it.ts ? new Date(it.ts).toLocaleString() : ''}</div>
+              <div class="sec-feed-text">${escHtml(it.text || '')}</div>
+            </li>`)}
+          </ul>`}
+    </section>`;
+}
+
+/** Autonomous tick + calendar (Phase 4): enable / run-now / pause the daily check-in. */
+export function automationCard(p) {
+  const s = p.schedule;
+  return html`
+    <section class="sec-card sec-auto">
+      <h2 class="sec-h2">${t('secretary.auto.title')}</h2>
+      ${!s ? html`
+        <p class="sec-hint">${t('secretary.auto.hint')}</p>
+        <button class="btn-primary" onClick=${p.enableTick}>${t('secretary.auto.enable')}</button>`
+      : html`
+        <div class="sec-auto-row">
+          <div>
+            <div><strong>${escHtml(s.displayName || t('secretary.auto.scheduleName'))}</strong>${s.enabled ? null : html` <span class="sec-hint">(${t('secretary.auto.paused')})</span>`}</div>
+            <div class="sec-hint">${t('secretary.auto.nextRun')}: ${s.nextRunAt ? new Date(s.nextRunAt).toLocaleString() : '—'}${s.cron ? ' · ' + escHtml(s.cron) : ''}</div>
+            ${p.budgetInfo ? html`<div class="sec-hint">${t('secretary.auto.budgetLeft')}: ${p.budgetInfo.remaining} / ${p.budgetInfo.budget}</div>` : null}
+          </div>
+          <div class="sec-auto-actions">
+            <button class="btn-ghost btn-sm" onClick=${p.toggleTick}>${s.enabled ? t('secretary.auto.pause') : t('secretary.auto.resume')}</button>
+            <button class="btn-primary btn-sm" disabled=${p.running} onClick=${p.runTick}>${p.running ? t('secretary.auto.running') : t('secretary.auto.runNow')}</button>
+          </div>
+        </div>`}
+    </section>`;
+}
+
+/** Goals (Phase 5): lightweight standalone goal records the Secretary works toward. */
+export function goalsCard(p) {
+  const f = p.goalForm;
+  return html`
+    <section class="sec-card sec-goals">
+      <div class="sec-card-head">
+        <h2 class="sec-h2">${t('secretary.learn.goalsTitle')}</h2>
+        <button class="btn-ghost btn-sm" onClick=${() => p.setGoalForm({ ...f, open: !f.open })}>${f.open ? t('secretary.cancel') : t('secretary.learn.addGoal')}</button>
+      </div>
+      ${f.open ? html`
+        <div class="sec-form">
+          <input class="sec-input" placeholder=${t('secretary.learn.goalTitle')} value=${f.title} onInput=${(e) => p.setGoalForm({ ...f, title: e.target.value })} />
+          <textarea class="sec-paste" rows="2" placeholder=${t('secretary.learn.goalWhy')} value=${f.why} onInput=${(e) => p.setGoalForm({ ...f, why: e.target.value })}></textarea>
+          <button class="btn-primary" disabled=${!f.title.trim() || f.saving} onClick=${p.addGoal}>${f.saving ? t('secretary.noteSaving') : t('secretary.learn.saveGoal')}</button>
+        </div>` : null}
+      ${p.goals.length === 0
+        ? html`<div class="sec-hint">${t('secretary.learn.goalsEmpty')}</div>`
+        : html`<ul class="sec-goal-list">
+            ${p.goals.map((g) => html`<li class="sec-goal-row ${g.status === 'done' ? 'done' : ''}" key=${g.id}>
+              <div class="sec-goal-main">
+                <div class="sec-goal-title">${escHtml(g.title)}</div>
+                ${g.why ? html`<div class="sec-hint">${escHtml(g.why)}</div>` : null}
+              </div>
+              <button class="btn-ghost btn-sm" onClick=${() => p.completeGoal(g)}>${g.status === 'done' ? t('secretary.learn.reopen') : t('secretary.learn.done')}</button>
+              <button class="btn-ghost btn-sm" onClick=${() => p.deleteGoal(g)}>✕</button>
+            </li>`)}
+          </ul>`}
+    </section>`;
+}
+
+/** Decision log (Phase 5): self-describing decision contracts that stay open until the review scores them. */
+export function decisionLogCard(p) {
+  const f = p.decForm;
+  const scoreChip = (d) => {
+    if (d.status === 'reviewed' && typeof d.score === 'number') {
+      const cls = d.score >= 70 ? 'good' : d.score >= 40 ? 'mid' : 'bad';
+      return html`<span class="sec-score ${cls}">${d.score}/100</span>`;
+    }
+    return html`<span class="sec-hint">${t('secretary.learn.revisit')}: ${d.revisitWhen ? new Date(d.revisitWhen).toLocaleDateString() : '—'}</span>`;
+  };
+  return html`
+    <section class="sec-card sec-decisions-log">
+      <div class="sec-card-head">
+        <h2 class="sec-h2">${t('secretary.learn.decisionsTitle')}</h2>
+        <div class="sec-auto-actions">
+          <button class="btn-ghost btn-sm" disabled=${p.reviewing} onClick=${p.reviewNow}>${p.reviewing ? t('secretary.auto.running') : t('secretary.learn.reviewNow')}</button>
+          <button class="btn-ghost btn-sm" onClick=${() => p.setDecForm({ ...f, open: !f.open })}>${f.open ? t('secretary.cancel') : t('secretary.learn.logDecision')}</button>
+        </div>
+      </div>
+      ${f.open ? html`
+        <div class="sec-form">
+          <input class="sec-input" placeholder=${t('secretary.learn.decision')} value=${f.decision} onInput=${(e) => p.setDecForm({ ...f, decision: e.target.value })} />
+          <textarea class="sec-paste" rows="2" placeholder=${t('secretary.learn.options')} value=${f.options} onInput=${(e) => p.setDecForm({ ...f, options: e.target.value })}></textarea>
+          <input class="sec-input" placeholder=${t('secretary.learn.chosen')} value=${f.chosen} onInput=${(e) => p.setDecForm({ ...f, chosen: e.target.value })} />
+          <input class="sec-input" placeholder=${t('secretary.learn.rationale')} value=${f.rationale} onInput=${(e) => p.setDecForm({ ...f, rationale: e.target.value })} />
+          <input class="sec-input" placeholder=${t('secretary.learn.expected')} value=${f.expectedOutcome} onInput=${(e) => p.setDecForm({ ...f, expectedOutcome: e.target.value })} />
+          <div class="sec-note-bar">
+            <label class="sec-hint">${t('secretary.learn.goalRef')}</label>
+            <select class="sec-band" value=${f.goalRef} onChange=${(e) => p.setDecForm({ ...f, goalRef: e.target.value })}>
+              <option value="">—</option>
+              ${p.goals.filter((g) => g.status !== 'done').map((g) => html`<option value=${'secretary.goal.' + g.id} selected=${f.goalRef === 'secretary.goal.' + g.id}>${escHtml(g.title)}</option>`)}
+            </select>
+            <label class="sec-hint">${t('secretary.learn.revisitIn')}</label>
+            <input class="sec-input sec-input-sm" type="number" min="0" value=${f.revisitDays} onInput=${(e) => p.setDecForm({ ...f, revisitDays: e.target.value })} />
+            <button class="btn-primary" disabled=${!f.decision.trim() || f.saving} onClick=${p.addDecision}>${f.saving ? t('secretary.noteSaving') : t('secretary.learn.saveDecision')}</button>
+          </div>
+        </div>` : null}
+      ${p.decisions.length === 0
+        ? html`<div class="sec-hint">${t('secretary.learn.decisionsEmpty')}</div>`
+        : html`<ul class="sec-goal-list">
+            ${p.decisions.map((d) => html`<li class="sec-goal-row" key=${d.id}>
+              <div class="sec-goal-main">
+                <div class="sec-goal-title">${escHtml(d.decision)}${d.chosen ? html` <span class="sec-hint">→ ${escHtml(d.chosen)}</span>` : null}</div>
+                ${d.status === 'reviewed' && d.verdict
+                  ? html`<div class="sec-hint">${escHtml(d.verdict)}</div>`
+                  : (d.expectedOutcome ? html`<div class="sec-hint">${t('secretary.learn.expected')}: ${escHtml(d.expectedOutcome)}</div>` : null)}
+              </div>
+              ${scoreChip(d)}
+              <button class="btn-ghost btn-sm" onClick=${() => p.deleteDecision(d)}>✕</button>
+            </li>`)}
+          </ul>`}
+    </section>`;
+}
+
+/** Identity + granted scopes + self-facing reliability (mean reviewed-decision score). */
+export function metaCard(p) {
+  const rel = p.reliability;
+  const relChip = (rel && typeof rel.score === 'number')
+    ? html`<span class="sec-score ${rel.score >= 70 ? 'good' : rel.score >= 40 ? 'mid' : 'bad'}">${rel.score}/100</span> <span class="sec-hint">(${rel.count})</span>`
+    : html`<span class="sec-hint">${t('secretary.reliabilityBuilding')}</span>`;
+  return html`
+    <section class="sec-card sec-meta-card">
+      <dl class="sec-meta">
+        <dt>${t('secretary.identity')}</dt>
+        <dd><code>${escHtml(p.secretary.gaii)}</code></dd>
+        <dt title=${t('secretary.reliabilityHint')}>${t('secretary.reliability')}</dt>
+        <dd>${relChip}</dd>
+        <dt>${t('secretary.scopes')}</dt>
+        <dd class="sec-scopes">${(p.secretary.default_scopes || []).map((s) => html`<span class="sec-scope" key=${s}>${s}</span>`)}</dd>
+      </dl>
+    </section>`;
+}

package/dist/public/views/secretary/use-access.js

@@ -0,0 +1,95 @@
+/**
+ * @file secretary/use-access.js
+ * @description P2-C — access gatekeeper. A surface for the Secretary to help the owner manage their OWN
+ *   sharing groups + consent grants (Draft/Ask: the form IS the draft, an explicit Approve commits). It
+ *   lists the owner's active consent grants (GET /v1/consent) and sharing groups (GET /v1/groups), can
+ *   propose + create a new consent grant (POST /v1/consent) or sharing group (POST /v1/groups), and can
+ *   revoke a grant (DELETE /v1/consent/:id). PERSONAL admin only — owner sessions bypass the
+ *   `consent:manage` scope; this never touches org / Enterprise `consent:manage`. Re-fetches on the
+ *   consent/groups live-update domains. See docs/plans/2026-06-24-secretary-p2-fix-prompt.md (P2-C) + §21.
+ * @structure useAccess({ showToast }) -> { consents, groups, loading, grantForm, groupForm, ...handlers }
+ * @usage const access = useAccess({ showToast }); accessCard(access)
+ * @version-history v0.1.0 — 2026-06-24 — P2-C: list/grant/revoke consent + create sharing groups.
+ */
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import { apiGet, apiPost, apiDelete } from '/js/api.js';
+import { t } from '/js/i18n.js';
+
+const EMPTY_GRANT = { open: false, dataPattern: '', recipient: '', purpose: '', saving: false };
+const EMPTY_GROUP = { open: false, name: '', saving: false };
+
+export function useAccess({ showToast }) {
+  const [consents, setConsents] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [grantForm, setGrantForm] = useState(EMPTY_GRANT);
+  const [groupForm, setGroupForm] = useState(EMPTY_GROUP);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [c, g] = await Promise.all([
+        apiGet(`/v1/consent?status=active&_=${Date.now()}`).catch(() => null),
+        apiGet(`/v1/groups?_=${Date.now()}`).catch(() => null),
+      ]);
+      setConsents((c && c.data && c.data.consents) || []);
+      setGroups((g && g.data && g.data.groups) || []);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+  useEffect(() => {
+    const handler = (e) => {
+      const d = e.detail && e.detail.domains;
+      if (!d || d.has('consent') || d.has('groups')) refresh();
+    };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [refresh]);
+
+  const approveGrant = useCallback(async () => {
+    const data_pattern = grantForm.dataPattern.trim();
+    const recipient = grantForm.recipient.trim();
+    const purpose = grantForm.purpose.trim();
+    if (!data_pattern || !recipient || !purpose) return;
+    setGrantForm((f) => ({ ...f, saving: true }));
+    try {
+      await apiPost('/v1/consent', { data_pattern, recipient, purpose, scope: 'private' });
+      setGrantForm(EMPTY_GRANT);
+      showToast(t('secretary.access.granted'));
+      await refresh();
+    } catch (e) {
+      showToast(`${t('secretary.access.error')}: ${e.message}`, true);
+      setGrantForm((f) => ({ ...f, saving: false }));
+    }
+  }, [grantForm, refresh, showToast]);
+
+  const revokeGrant = useCallback(async (id) => {
+    try {
+      await apiDelete(`/v1/consent/${encodeURIComponent(id)}`);
+      showToast(t('secretary.access.revoked'));
+      await refresh();
+    } catch (e) {
+      showToast(`${t('secretary.access.error')}: ${e.message}`, true);
+    }
+  }, [refresh, showToast]);
+
+  const createGroup = useCallback(async () => {
+    const name = groupForm.name.trim();
+    if (!name) return;
+    setGroupForm((f) => ({ ...f, saving: true }));
+    try {
+      await apiPost('/v1/groups', { name });
+      setGroupForm(EMPTY_GROUP);
+      showToast(t('secretary.access.groupCreated'));
+      await refresh();
+    } catch (e) {
+      showToast(`${t('secretary.access.error')}: ${e.message}`, true);
+      setGroupForm((f) => ({ ...f, saving: false }));
+    }
+  }, [groupForm, refresh, showToast]);
+
+  return { consents, groups, loading, grantForm, setGrantForm, approveGrant, revokeGrant, groupForm, setGroupForm, createGroup };
+}

package/dist/public/views/secretary/use-autonomy.js

@@ -0,0 +1,92 @@
+/**
+ * @file secretary/use-autonomy.js
+ * @description Phase 4 — autonomous tick + Home feed + calendar. A hook that loads the Secretary's
+ *   activity feed (`secretary.feed`) and its autonomous schedule (a `secretary`-kind scheduled job),
+ *   and lets the owner enable / run-now / pause the daily check-in. The backend `secretary` scheduler
+ *   kind (services/scheduler.ts) runs the active context's brain on the owner's key each fire and
+ *   appends a briefing to the feed — unless stop-spending is on. See docs/plans/2026-06-23-secretary-feature.md (Phase 4).
+ * @structure useAutonomy({ showToast }) -> { feed, schedule, loading, refresh, enableTick, runTick, toggleTick, running }
+ * @usage const auto = useAutonomy({ showToast }); ... feedCard(auto) / automationCard(auto)
+ * @version-history v0.1.0 — 2026-06-24 — Phase 4: autonomous tick, feed, calendar controls.
+ */
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import { api, apiGet, apiPost, apiPatch } from '/js/api.js';
+import { t } from '/js/i18n.js';
+
+const DAILY_CRON = '0 8 * * *'; // every day at 08:00 (server-local)
+
+export function useAutonomy({ showToast }) {
+  const [feed, setFeed] = useState([]);
+  const [schedule, setSchedule] = useState(null); // the secretary-kind ScheduledJobRecord, or null
+  const [loading, setLoading] = useState(true);
+  const [running, setRunning] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [feedR, schedR] = await Promise.all([
+        apiGet('/v1/memory/secretary.feed').catch(() => null),
+        apiGet('/v1/schedules').catch(() => null),
+      ]);
+      const items = (feedR && feedR.data && feedR.data.value && Array.isArray(feedR.data.value.items)) ? feedR.data.value.items : [];
+      setFeed(items);
+      const managed = (schedR && schedR.data && Array.isArray(schedR.data.managed)) ? schedR.data.managed : [];
+      setSchedule(managed.find((j) => j.type === 'secretary') || null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  // Re-fetch on server-reported changes (the tick writes the feed + schedule state server-side).
+  useEffect(() => {
+    const handler = () => refresh();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [refresh]);
+
+  const enableTick = useCallback(async () => {
+    try {
+      await apiPost('/v1/schedules', { kind: 'secretary', cron: DAILY_CRON, display_name: t('secretary.auto.scheduleName') });
+      showToast(t('secretary.auto.enabled'));
+      await refresh();
+    } catch (e) {
+      showToast(`${t('secretary.auto.error')}: ${e.message}`, true);
+    }
+  }, [refresh, showToast]);
+
+  const runTick = useCallback(async () => {
+    if (!schedule) return;
+    setRunning(true);
+    try {
+      // The tick makes a (possibly slow) AI call server-side — use api() with a long timeout + no
+      // retries so it isn't aborted/re-fired by apiPost's 30s default. (See long-ai-call gotcha.)
+      const r = await api(`/v1/schedules/${schedule.id}/trigger`, { method: 'POST', body: '{}', timeoutMs: 1_800_000, retries: 0 });
+      const outcome = r && r.data && r.data.outcome;
+      // 'busy'/'limited'/'error' come back with a reason; 'ran' means a feed entry was produced.
+      if (outcome && outcome !== 'ran' && outcome !== 'created') {
+        showToast(`${t('secretary.auto.skipped')}: ${(r.data && r.data.reason) || outcome}`);
+      } else {
+        showToast(t('secretary.auto.ran'));
+      }
+      await refresh();
+    } catch (e) {
+      showToast(`${t('secretary.auto.error')}: ${e.message}`, true);
+    } finally {
+      setRunning(false);
+    }
+  }, [schedule, refresh, showToast]);
+
+  const toggleTick = useCallback(async () => {
+    if (!schedule) return;
+    try {
+      await apiPatch(`/v1/schedules/${schedule.id}`, { enabled: !schedule.enabled });
+      await refresh();
+    } catch (e) {
+      showToast(`${t('secretary.auto.error')}: ${e.message}`, true);
+    }
+  }, [schedule, refresh, showToast]);
+
+  return { feed, schedule, loading, running, refresh, enableTick, runTick, toggleTick };
+}