feat: v0.8.1 answer sessions from the inbox: allow/deny, peek & reply

- PermissionRequest hook: the state file records tool, detail and
  description of a pending permission; Notification keeps it.
- devdesk attach --answer (presses 1/Esc only if the same wait is on and the
  prompt is visible), --peek (last exchange from the transcript), --reply
  (bracketed paste + Enter, streamed like uploads).
- Inbox: Allow/Deny/Open for permission waits; Peek & reply for other waits
  and finished sessions. Matrix messages include the command.

Closes #22
Closes #23

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/connection.js

@@ -215,6 +215,21 @@ async function uploadNow(session, file, onProgress) {
   return result.path;
 }
 
+// Answer a session from the inbox (devdesk#22, #23).
+export function answerPrompt(session, since, choice) {
+  return sessionAction('answer', session, String(since), choice);
+}
+
+export async function peekSession(session) {
+  return parseListOutput(await runCommand(['--peek', session], 15000));
+}
+
+export async function replyTo(session, text) {
+  const bytes = new TextEncoder().encode(text);
+  const result = await limited(() => streamIn(['--reply', session, String(bytes.length)], 'DEVDESK-REPLY-READY', new Blob([bytes])));
+  if (!result.ok) throw new Error('not sent');
+}
+
 // Save a file from the editor (devdesk#20): `--fs-write SESSION PATH BYTES BASE`
 // with the content streamed after the ready line. Resolves the server's JSON:
 // {ok: true, sha, size, mtime} or {ok: false, conflict: true, sha} when the file

web/src/inbox.js

@@ -5,6 +5,8 @@
 
 import { el } from './dom.js';
 import { ago } from './sessions.js';
+import { answerPrompt, peekSession, replyTo } from './connection.js';
+import { toast } from './ui.js';
 
 const KEY = 'devdesk.inbox';
 const MAX = 30;
@@ -65,6 +67,8 @@ export class Inbox {
     if (open) this.panel.removeAttribute('aria-hidden');
     else this.panel.setAttribute('aria-hidden', 'true');
     this.button.setAttribute('aria-expanded', String(open));
+    if (!open) this.peeking = null;
+    this.panel.classList.toggle('is-peek', false);
     if (open) this.render();
   }
 
@@ -113,7 +117,84 @@ export class Inbox {
     if (this.isOpen) this.renderPanel();
   }
 
+  // ------------------------------------------------------------ answer from here
+
+  async answer(session, since, choice, button) {
+    button.disabled = true;
+    try {
+      await answerPrompt(session, since, choice);
+      toast.success(choice === 'allow' ? `Allowed in ${session}` : `Denied in ${session}`);
+      this.hooks.refresh?.();
+    } catch (error) {
+      toast.error(`${session}: ${error.message}`);
+      this.hooks.refresh?.();
+    } finally {
+      button.disabled = false;
+    }
+  }
+
+  // Peek: the last exchange of a session, and a reply box.
+  async peek(session) {
+    this.peeking = session;
+    this.panel.classList.add('is-peek');
+    const body = el('div', { class: 'dd-peek' }, el('div', { class: 'dd-notif-empty' }, 'Loading…'));
+    this.list.replaceChildren(body);
+    let data;
+    try {
+      data = await peekSession(session);
+    } catch (error) {
+      body.replaceChildren(el('div', { class: 'dd-notif-empty' }, error.message));
+      return;
+    }
+    if (this.peeking !== session) return;
+    const input = el('textarea', { class: 'lt-input dd-peek-input', rows: '3', placeholder: `Reply to ${session}… (Ctrl+Enter sends)`, 'aria-label': `Reply to ${session}` });
+    const send = el('button', { type: 'button', class: 'lt-btn lt-btn-primary lt-btn-sm' }, 'Send');
+    const submit = async () => {
+      const text = input.value.trim();
+      if (!text) return;
+      send.disabled = true;
+      try {
+        await replyTo(session, text);
+        toast.success(`Sent to ${session}`);
+        this.peeking = null;
+        this.setOpen(false);
+        this.hooks.refresh?.();
+      } catch (error) {
+        toast.error(`${session}: ${error.message}`);
+      } finally {
+        send.disabled = false;
+      }
+    };
+    send.addEventListener('click', submit);
+    input.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        submit();
+      }
+      event.stopPropagation(); // keys belong to the reply box, not the terminal or shortcuts
+    });
+    const status = data.status;
+    const waitingRequest = status?.state === 'waiting' && status.request;
+    body.replaceChildren(
+      el('div', { class: 'dd-peek-head' },
+        el('button', { type: 'button', class: 'dd-peek-back', onclick: () => { this.peeking = null; this.panel.classList.remove('is-peek'); this.renderPanel(); } }, '←'),
+        el('span', { class: 'dd-peek-title' }, session),
+        el('span', { class: 'dd-peek-state' }, status?.state ? `${status.state}${status.since ? ` · ${ago(status.since)}` : ''}` : '')),
+      data.user ? el('div', { class: 'dd-peek-user' }, el('span', { class: 'dd-peek-label' }, 'You'), data.user.text) : null,
+      el('div', { class: 'dd-peek-assistant' },
+        el('span', { class: 'dd-peek-label' }, 'Claude'),
+        data.assistant ? `${data.assistant.truncated ? '…' : ''}${data.assistant.text}` : 'Nothing yet.'),
+      waitingRequest
+        ? el('div', { class: 'dd-notif-empty' }, 'Claude is asking for a permission: answer it from the list, or open the session.')
+        : el('div', { class: 'dd-peek-reply' }, input, el('div', { class: 'dd-peek-actions' },
+          el('button', { type: 'button', class: 'lt-btn lt-btn-ghost lt-btn-sm', onclick: () => { this.setOpen(false); this.hooks.openSession(session); } }, 'Open session'),
+          send)));
+    if (!waitingRequest) input.focus();
+    body.querySelector('.dd-peek-assistant').scrollTop = 1e9;
+  }
+
   renderPanel() {
+    if (this.peeking) return; // the peek view stays until you go back
     const close = (run) => () => {
       this.setOpen(false);
       run();
@@ -136,11 +217,31 @@ export class Inbox {
     if (this.waiting.length) {
       nodes.push(el('div', { class: 'dd-notif-section' }, 'Needs you'));
       for (const s of this.waiting) {
-        nodes.push(item({
+        const request = s.status?.request;
+        const node = item({
           dot: 'red', unread: true, title: `${s.name}: ${s.status?.message || 'Claude is waiting for your input'}`,
           meta: s.status?.since ? `waiting ${ago(s.status.since)}` : 'waiting',
           onclick: close(() => this.hooks.openSession(s.name)),
-        }));
+        });
+        const stop = (run) => (event) => {
+          event.stopPropagation();
+          run(event.currentTarget);
+        };
+        const body = node.querySelector('.lt-notif-item-body');
+        if (request) {
+          body.append(
+            request.description ? el('div', { class: 'dd-request-desc' }, request.description) : null,
+            el('code', { class: 'dd-request' }, request.detail || request.tool),
+            el('div', { class: 'dd-request-actions' },
+              el('button', { type: 'button', class: 'lt-btn lt-btn-primary lt-btn-sm', onclick: stop((b) => this.answer(s.name, s.status.since, 'allow', b)) }, 'Allow'),
+              el('button', { type: 'button', class: 'lt-btn lt-btn-danger lt-btn-sm', onclick: stop((b) => this.answer(s.name, s.status.since, 'deny', b)) }, 'Deny'),
+              el('button', { type: 'button', class: 'lt-btn lt-btn-ghost lt-btn-sm', onclick: stop(() => { this.setOpen(false); this.hooks.openSession(s.name); }) }, 'Open')));
+        } else {
+          body.append(el('div', { class: 'dd-request-actions' },
+            el('button', { type: 'button', class: 'lt-btn lt-btn-sm', onclick: stop(() => this.peek(s.name)) }, 'Peek & reply'),
+            el('button', { type: 'button', class: 'lt-btn lt-btn-ghost lt-btn-sm', onclick: stop(() => { this.setOpen(false); this.hooks.openSession(s.name); }) }, 'Open')));
+        }
+        nodes.push(node);
       }
     }
     if (this.alerts.length) {
@@ -160,7 +261,7 @@ export class Inbox {
         const kind = KINDS[e.kind] ?? { tone: 'cyan' };
         // An entry about a session that has since ended must not bring it back (devdesk#38).
         const ended = !e.url && e.session && this.known && !this.known.has(e.session);
-        nodes.push(item({
+        const recentNode = item({
           dot: e.read || ended ? 'read' : kind.tone, unread: !e.read && !ended, title: e.text,
           meta: `${when(e.at)}${ended ? ' · session ended' : ''}`,
           onclick: close(() => {
@@ -170,7 +271,12 @@ export class Inbox {
             else if (ended) this.hooks.ended?.(e.session);
             else if (e.session) this.hooks.openSession(e.session);
           }),
-        }));
+        });
+        if (e.kind === 'finished' && !ended) {
+          recentNode.querySelector('.lt-notif-item-body').append(el('div', { class: 'dd-request-actions' },
+            el('button', { type: 'button', class: 'lt-btn lt-btn-ghost lt-btn-sm', onclick: (event) => { event.stopPropagation(); this.peek(e.session); } }, 'Peek & reply')));
+        }
+        nodes.push(recentNode);
       }
     }
     if (!nodes.length) nodes.push(el('div', { class: 'dd-notif-empty' }, 'Nothing needs you. Sessions that finish or wait while you\'re elsewhere show up here.'));

web/src/main.js

@@ -900,6 +900,7 @@ function wireChrome() {
     hooks: {
       openSession: (name) => connect(name, { existing: true }),
       ended: (name) => toast.info(`${name} has ended; its conversation is still in Claude's history`),
+      refresh: () => sessionsPanel.reload(),
       showAlerts: () => {
         setSidebar(true);
         $('widget-alerts').scrollIntoView({ block: 'start', behavior: 'smooth' });

web/styles.css

@@ -947,3 +947,32 @@ html[data-theme="light"] .dd-files.is-narrow .dd-explorer { box-shadow: 8px 0 24
 .dd-dialog.is-wide .lt-modal-body { padding: 0; }
 .dd-compare { display: flex; height: min(64vh, 640px); }
 .dd-compare > .cm-editor { flex: 1; min-width: 0; }
+
+/* ---- inbox: answer & peek (devdesk#22, #23) --------------------------------------------- */
+.dd-inbox-panel.is-peek { width: min(460px, calc(100vw - 16px)); }
+.dd-request-desc { margin-top: 4px; color: var(--text-secondary); font-size: 0.7rem; }
+.dd-request {
+  display: block;
+  max-height: 7.5em;
+  margin-top: 4px;
+  padding: 4px 6px;
+  overflow: auto;
+  border-left: 2px solid var(--accent-amber);
+  background: var(--bg-terminal);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.dd-request-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.dd-peek { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; }
+.dd-peek-head { display: flex; align-items: center; gap: 8px; }
+.dd-peek-back { padding: 0 6px; border: 1px solid var(--border-color); background: none; color: var(--accent-cyan); cursor: pointer; }
+.dd-peek-title { flex: 1; color: var(--text-primary); font-weight: 700; font-size: 0.8rem; }
+.dd-peek-state { color: var(--text-muted); font-size: 0.66rem; }
+.dd-peek-label { display: block; margin-bottom: 2px; color: var(--accent-orange); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
+.dd-peek-user { padding: 6px 8px; border-left: 2px solid var(--border-color); color: var(--text-secondary); font-size: 0.72rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+.dd-peek-assistant { max-height: 38vh; padding: 6px 8px; overflow: auto; border-left: 2px solid var(--accent-cyan); background: var(--bg-terminal); color: var(--text-primary); font-size: 0.74rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
+.dd-peek-input { width: 100%; min-height: 4.5em; resize: vertical; font-family: var(--font-mono); font-size: 0.76rem; }
+.dd-peek-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }