aimeat 1.33.2 → 1.35.0

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

@@ -4,10 +4,16 @@
  *   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.
+ *   brainCard · operatingCard · historyCard · metaCard · whatsNextCard. 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.10.0 — 2026-06-28 — G7: the delegate control gains a workflow picker (run an Agent Workflow chaining specialists).
+ *   v0.9.0 — 2026-06-28 — G10: feedCard groups entries by day (Today / Yesterday / date) with per-day counts.
+ *   v0.8.0 — 2026-06-28 — B4: routineStepRow gains the delegate control (pick a target agent → create an
+ *     agent task) + a "Check result" action on delegated steps.
+ *   v0.7.0 — 2026-06-27 — B2: replace guidedPlanCard with whatsNextCard (Routine propose/advance,
+ *     band-gated steps + per-step approve/run); guided-plan flow folded into "What's next".
  *   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
@@ -22,17 +28,17 @@ 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';
+import { Markdown } from '/components/Markdown.js';
+import { SECRETARY_CAPABILITIES, BANDS, autonomyLevelOf } from '/js/services/secretary-policy.js';
+import { buildInterviewPrompt, groupFeedByDay } 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-chip ${c.id === p.activeId ? 'active' : ''}" key=${c.id} onClick=${() => p.switchContext(c.id)}>${(c.name)}</button>`)}
       <button class="sec-ctx-add" title=${t('secretary.addContext')} onClick=${p.openAdd}>＋</button>
     </div>`;
 }
@@ -48,8 +54,8 @@ export function hirePanel(p) {
       <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 class="sec-prompt-box">${buildInterviewPrompt(p.owner, p.current)}</div>
+        <${CopyButton} text=${buildInterviewPrompt(p.owner, p.current)} 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>
@@ -69,21 +75,21 @@ 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>
+      <h2 class="sec-h2">${t('secretary.chatTitle')} · ${(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.chat.map((m, i) => html`<div class="sec-msg sec-msg-${m.role}" key=${i}>${(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>
+          <span>${t('secretary.routeSuggest')} <strong>${(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-route-hint"><span>${t('secretary.attachFiled')} <strong>${(p.attachResult.wsName)}</strong>${p.attachResult.name ? html` — ${(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)}
@@ -123,10 +129,10 @@ export function findCard(p) {
             ? 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>
+                <span class="sec-find-type">${(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 class="sec-find-title">${e.url ? html`<a href=${e.url} target="_blank" rel="noreferrer">${(e.title)}</a>` : (e.title)}</div>
+                  ${e.description ? html`<div class="sec-find-desc">${(String(e.description).slice(0, 160))}</div>` : null}
                 </div>
               </div>`)}
         </div>`}
@@ -142,14 +148,14 @@ export function noteCard(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>
+          <span>${t('secretary.routeBelongs')} <strong>${(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>`)}
+          ${p.wsList.map((w) => html`<option value=${w.id} selected=${p.effectiveWsId === w.id}>${(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}
@@ -167,9 +173,9 @@ export function decisionsCard(p) {
           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>
+            <span class="sec-hist-purpose">${((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`<button class="btn-primary btn-sm" onClick=${() => p.applyDecision(pid)}>${t('secretary.decisionApply')}: ${(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>`;
@@ -182,28 +188,61 @@ export function decisionsCard(p) {
 export function brainCard(p) {
   const brain = p.brain;
   const active = p.active;
+  const d = p.brainDraft; // C2: when set, the brain is in inline-edit mode
   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>
+        ${!d ? html`<div class="sec-brain-actions">
+          <button class="btn-ghost btn-sm" onClick=${p.startBrainEdit}>${t('secretary.editBrain')}</button>
+          <button class="btn-ghost btn-sm" onClick=${p.openEdit}>${t('secretary.rerun')}</button>
+        </div>` : null}
       </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>`}
+      ${d ? html`
+        <textarea class="sec-input" rows="3" value=${d.purpose} onInput=${(e) => p.setBrainDraft({ ...d, purpose: e.target.value })}></textarea>
+        <div class="sec-h3">${t('secretary.rules')}</div>
+        <ul class="sec-rule-edit">
+          ${d.rules.map((r, i) => html`
+            <li class="sec-rule-row" key=${i}>
+              <input class="sec-input" value=${r.description} onInput=${(e) => p.setBrainDraft({ ...d, rules: d.rules.map((x, j) => (j === i ? { ...x, description: e.target.value } : x)) })} />
+              <button class="btn-ghost btn-sm" title=${t('secretary.remove')} onClick=${() => p.setBrainDraft({ ...d, rules: d.rules.filter((_, j) => j !== i) })}>✕</button>
+            </li>`)}
+        </ul>
+        <button class="btn-ghost btn-sm" onClick=${() => p.setBrainDraft({ ...d, rules: [...d.rules, { id: '', description: '' }] })}>+ ${t('secretary.addRule')}</button>
+        <div class="sec-actions">
+          <button class="btn-ghost btn-sm" onClick=${p.cancelBrainEdit}>${t('secretary.cancel')}</button>
+          <button class="btn-primary btn-sm" disabled=${p.savingBrain} onClick=${p.saveBrain}>${p.savingBrain ? t('secretary.saving') : t('secretary.save')}</button>
+        </div>`
+      : html`
+        <p class="sec-purpose">${(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}>${(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>`}`}
+        <p class="sec-orgname">🗂 ${(active.organismName)}</p>
+        ${Array.isArray(active.workspaces) && html`<ul class="sec-ws">${active.workspaces.map((w, i) => html`<li key=${i}><strong>${(w.name)}</strong>${w.purpose ? html` — ${(w.purpose)}` : null}</li>`)}</ul>`}`}
     </section>`;
 }
 
 /** Operating model: stop-spending + daily budget + per-capability autonomy bands. */
 export function operatingCard(p) {
   const policy = p.policy;
+  const level = autonomyLevelOf(policy.bands);   // 'suggest' | 'assist' — the single toggle's state
   return html`
     <section class="sec-card">
       <h2 class="sec-h2">${t('secretary.howIWork')}</h2>
+
+      ${/* ONE autonomy toggle (collapses the per-capability band sprawl). Heavy work is always a Work
+          Brief a Builder executes — never something the cheap Secretary does on its own. */ ''}
+      <div class="sec-autonomy">
+        ${[['suggest', 'secretary.autonomy.suggest', 'secretary.autonomy.suggestHint'],
+           ['assist', 'secretary.autonomy.assist', 'secretary.autonomy.assistHint']].map(([val, label, hint]) => html`
+          <label class=${'sec-auto-opt' + (level === val ? ' sec-auto-opt--on' : '')} key=${val}>
+            <input type="radio" name="sec-autonomy" checked=${level === val} onChange=${() => p.setAutonomy(val)} />
+            <span><strong>${t(label)}</strong><br/><span class="sec-hint">${t(hint)}</span></span>
+          </label>`)}
+      </div>
+
       <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>
@@ -213,18 +252,24 @@ export function operatingCard(p) {
         <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>
+
+      ${/* Per-capability bands are still here for power users, tucked behind an Advanced disclosure so the
+          default surface is just the one toggle above. */ ''}
+      <details class="sec-adv">
+        <summary>${t('secretary.advancedBands')}</summary>
+        <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>
+      </details>
     </section>`;
 }
 
@@ -236,58 +281,148 @@ export function historyCard(p) {
       <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>
+            <span class="sec-hist-purpose">${((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) {
+/** A single Routine step row (B2 + B4): capability + band + summary + result, with the approve/run/delegate control. */
+function routineStepRow(p, r, s) {
+  const next = p.nextPendingStep(r);
+  const isNext = next && next.id === s.id;
+  const busy = p.busyStepId === s.id;
+  const runLabel = s.band === 'off' ? t('secretary.next.skip') : s.band === 'act' ? t('secretary.next.run') : t('secretary.next.approve');
+  const isDelegate = s.capability === 'delegate';
+  const agents = p.agents || [];
+  const workflows = p.workflows || [];
+  // Unblur the delegation target by ROLE: node-local Specialists vs connected big-AI Builders. The Secretary
+  // (the watcher) is never a delegation target. Same handler/value (agent name) — the optgroups just label
+  // which kind of agent each is, so "pick a specialist" no longer lumps Builders + specialists together.
+  const isSpecialist = (a) => (a.tags || []).includes('system:specialist');
+  const isSecretary = (a) => (a.tags || []).includes('system:secretary') || a.name === 'secretary';
+  const specialistAgents = agents.filter((a) => isSpecialist(a));
+  const builderAgents = agents.filter((a) => !isSpecialist(a) && !isSecretary(a));
+  // B4: delegate to one agent (agent task) · G7: OR run an Agent Workflow chaining specialists.
+  const delegateControl = html`
+    <div class="sec-delegate">
+      ${(specialistAgents.length + builderAgents.length) > 0 ? html`
+        <select class="sec-band" value=${p.delegateAgent} onChange=${(e) => p.setDelegateAgent(e.target.value)}>
+          <option value="" selected=${!p.delegateAgent}>${t('secretary.next.delegatePick')}</option>
+          ${specialistAgents.length ? html`<optgroup label=${t('secretary.next.delegateSpecialists')}>
+            ${specialistAgents.map((a) => html`<option value=${a.name} selected=${p.delegateAgent === a.name}>${(a.name)}</option>`)}
+          </optgroup>` : null}
+          ${builderAgents.length ? html`<optgroup label=${t('secretary.next.delegateBuilders')}>
+            ${builderAgents.map((a) => html`<option value=${a.name} selected=${p.delegateAgent === a.name}>${(a.name)}</option>`)}
+          </optgroup>` : null}
+        </select>
+        <button class="btn-primary btn-sm" disabled=${busy || !p.delegateAgent} onClick=${() => p.approveStep(r, s, { agentName: p.delegateAgent })}>${busy ? t('secretary.next.running') : t('secretary.next.delegateGo')}</button>` : null}
+      ${workflows.length > 0 ? html`
+        <select class="sec-band" value=${p.delegateWorkflow} onChange=${(e) => p.setDelegateWorkflow(e.target.value)}>
+          <option value="" selected=${!p.delegateWorkflow}>${t('secretary.next.delegateWorkflowPick')}</option>
+          ${workflows.map((w) => html`<option value=${w.id} selected=${p.delegateWorkflow === w.id}>${((w.title && (w.title.en_US || w.title)) || w.id)}</option>`)}
+        </select>
+        <button class="btn-outline btn-sm" disabled=${busy || !p.delegateWorkflow} onClick=${() => p.approveStep(r, s, { workflowId: p.delegateWorkflow, workflowName: (workflows.find((w) => w.id === p.delegateWorkflow) || {}).title?.en_US })}>${busy ? t('secretary.next.running') : t('secretary.next.delegateWorkflowGo')}</button>` : null}
+      ${p.onDesignWorkflow ? html`<button class="btn-ghost btn-sm" disabled=${busy} title=${t('secretary.wf.title')} onClick=${() => p.onDesignWorkflow(s)}>${t('secretary.next.delegateDesignWf')}</button>` : null}
+      ${agents.length === 0 && workflows.length === 0 && !p.onDesignWorkflow ? html`<span class="sec-hint">${t('secretary.next.delegateNoAgents')}</span>` : null}
+    </div>`;
+  return html`
+    <li class="sec-step-row ${s.status}" key=${s.id}>
+      <div class="sec-step-main">
+        <div class="sec-step-tags">
+          <span class="sec-step-cap">${t('secretary.cap.' + s.capability)}</span>
+          <span class="sec-band-tag band-${s.band}">${t('secretary.band.' + s.band)}</span>
+        </div>
+        <div class="sec-step-summary">${(s.summary)}</div>
+        ${s.result ? html`<div class="sec-hint">→ ${(s.result.summary)}</div>` : null}
+        ${s.status === 'delegated' && s.result && (s.result.taskId || s.result.runId) ? html`
+          <button class="btn-ghost btn-sm" disabled=${p.checkingStepId === s.id} onClick=${() => p.checkDelegateResult(r, s)}>${p.checkingStepId === s.id ? t('secretary.next.running') : t('secretary.next.checkResult')}</button>` : null}
+      </div>
+      ${s.status === 'pending'
+        ? (isNext
+          ? (isDelegate
+            ? delegateControl
+            : html`<button class="btn-primary btn-sm" disabled=${busy} onClick=${() => p.approveStep(r, s)}>${busy ? t('secretary.next.running') : runLabel}</button>`)
+          : html`<span class="sec-hint">${t('secretary.next.queued')}</span>`)
+        : html`<span class="sec-step-status sec-${s.status}">${t('secretary.next.status.' + s.status)}</span>`}
+    </li>`;
+}
+
+/** B2 "What's next": propose a NEW routine from a goal, or walk the selected one step-by-step (band-gated). */
+export function whatsNextCard(p) {
+  const r = p.selected;
   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>
+    <section class="sec-card sec-next">
+      <h2 class="sec-h2">${t('secretary.next.cardTitle')}</h2>
+      <p class="sec-hint">${t('secretary.next.hint')}</p>
+      ${!r ? html`
+        <p class="sec-hint">${t('secretary.next.explain')}</p>
+        ${p.actionItems && p.actionItems.length ? html`<div class="sec-next-followups">↑ ${t('secretary.next.followups', { n: p.actionItems.length })}</div>` : null}
+        ${p.activeRoutines && p.activeRoutines.length ? html`
+          <div class="sec-h3">${t('secretary.next.continueTitle')}</div>
+          <ul class="sec-routine-list">
+            ${p.activeRoutines.map((rt) => {
+              const ns = p.nextPendingStep(rt);
+              return html`
+                <li class="sec-routine-row" key=${rt.id}>
+                  <div class="sec-routine-main">
+                    <div class="sec-routine-title">${(rt.title)}</div>
+                    <div class="sec-hint">${ns ? `${t('secretary.next.nextStep')}: ${ns.summary}` : t('secretary.next.allSettled')}</div>
+                  </div>
+                  <button class="btn-outline btn-sm" onClick=${() => p.advance(rt)}>${t('secretary.next.advance')}</button>
+                </li>`;
+            })}
+          </ul>` : null}
+        <div class="sec-h3">${t('secretary.next.startNewTitle')}</div>
+        <textarea class="sec-paste" rows="2" placeholder=${t('secretary.next.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>
+          <button class="btn-primary" disabled=${!p.goal.trim() || p.proposing} onClick=${p.proposeRoutine}>${p.proposing ? t('secretary.next.proposing') : t('secretary.next.propose')}</button>
+        </div>` : html`
+        <div class="sec-routine">
+          <div class="sec-routine-head">
+            <div>
+              <div class="sec-routine-title">${(r.title)}</div>
+              ${r.purpose ? html`<div class="sec-hint">${(r.purpose)}</div>` : null}
+            </div>
+            ${r.status === 'done' ? html`<span class="sec-step-status sec-done">${t('secretary.next.status.done')}</span>` : null}
           </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}
+          <div class="sec-routine-cadence">
+            <label class="sec-hint">${t('secretary.next.repeats')}</label>
+            <select class="sec-band" value=${r.cadence || ''} onChange=${(e) => p.setRoutineCadence(r, e.target.value)}>
+              <option value="" selected=${!r.cadence}>${t('secretary.next.cadence.none')}</option>
+              <option value="daily" selected=${r.cadence === 'daily'}>${t('secretary.next.cadence.daily')}</option>
+              <option value="weekly" selected=${r.cadence === 'weekly'}>${t('secretary.next.cadence.weekly')}</option>
+            </select>
+            ${r.cadence && r.nextRunAt ? html`<span class="sec-hint">${t('secretary.next.nextRun')}: ${new Date(r.nextRunAt).toLocaleDateString()}</span>` : null}
+          </div>
+          <ul class="sec-step-list">${r.steps.map((s) => routineStepRow(p, r, s))}</ul>
+          <div class="sec-actions sec-routine-actions">
+            <button class="btn-ghost btn-sm" onClick=${() => p.setSelectedId(null)}>${t('secretary.next.startNew')}</button>
+            <button class="btn-ghost btn-sm" onClick=${() => p.deleteRoutine(r)}>${t('secretary.next.discard')}</button>
+          </div>
+        </div>`}
     </section>`;
 }
 
-/** Home feed (Phase 4): what the Secretary did on its own (autonomous briefings). */
+/** Home feed (Phase 4 + G10): what the Secretary did on its own, grouped by day (today + previous days). */
 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>`}
+        : groupFeedByDay(p.feed).map((g) => html`
+            <div class="sec-feed-day" key=${g.key}>
+              <div class="sec-feed-day-head">${(g.label)} <span class="sec-feed-day-count">${g.items.length}</span></div>
+              <ul class="sec-feed-list">
+                ${g.items.map((it, i) => html`<li class="sec-feed-item" key=${it.id || i}>
+                  <div class="sec-feed-meta">${it.contextName ? (it.contextName) + ' · ' : ''}${it.ts ? new Date(it.ts).toLocaleTimeString() : ''}</div>
+                  <div class="sec-feed-text"><${Markdown} text=${it.text || ''} /></div>
+                  ${it.href ? html`<a class="sec-feed-link" href=${it.href} target="_blank" rel="noopener">${t('secretary.next.openResult')} ↗</a>` : null}
+                </li>`)}
+              </ul>
+            </div>`)}
     </section>`;
 }
 
@@ -303,8 +438,8 @@ export function automationCard(p) {
       : 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>
+            <div><strong>${(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 ? ' · ' + (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">
@@ -335,8 +470,8 @@ export function goalsCard(p) {
         : 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 class="sec-goal-title">${(g.title)}</div>
+                ${g.why ? html`<div class="sec-hint">${(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>
@@ -375,7 +510,7 @@ export function decisionLogCard(p) {
             <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>`)}
+              ${p.goals.filter((g) => g.status !== 'done').map((g) => html`<option value=${'secretary.goal.' + g.id} selected=${f.goalRef === 'secretary.goal.' + g.id}>${(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 })} />
@@ -387,10 +522,10 @@ export function decisionLogCard(p) {
         : 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>
+                <div class="sec-goal-title">${(d.decision)}${d.chosen ? html` <span class="sec-hint">→ ${(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)}
+                  ? html`<div class="sec-hint">${(d.verdict)}</div>`
+                  : (d.expectedOutcome ? html`<div class="sec-hint">${t('secretary.learn.expected')}: ${(d.expectedOutcome)}</div>` : null)}
               </div>
               ${scoreChip(d)}
               <button class="btn-ghost btn-sm" onClick=${() => p.deleteDecision(d)}>✕</button>
@@ -409,11 +544,14 @@ export function metaCard(p) {
     <section class="sec-card sec-meta-card">
       <dl class="sec-meta">
         <dt>${t('secretary.identity')}</dt>
-        <dd><code>${escHtml(p.secretary.gaii)}</code></dd>
+        <dd><code>${(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>
+        <dd class="sec-scopes">
+          ${(p.secretary.default_scopes || []).map((s) => html`<span class="sec-scope" key=${s}>${s}</span>`)}
+          <a class="sec-perm-link" href="/v1/profile?tab=agents">${t('secretary.managePermissions')} ↗</a>
+        </dd>
       </dl>
     </section>`;
 }