fix: complete browser work feedback loops

Keep feed-level instructions cancellable and visible through completion,
and give web editors and shortcut actions clear accessible names.

Author: JannikJung

src/App.tsx

@@ -5,14 +5,15 @@ import { api, post } from "./app/api";
 import type { AttentionScreen, Inspector, Tab, WorkspaceTab } from "./app/types";
 import { CardView } from "./feed/CardView";
 import { RoutineActionGroupView } from "./feed/RoutineActionGroupView";
-import { countFor, visibleCardActions, visibleCards, visibleRoutineActions } from "./feed/selectors";
+import { countFor, visibleCardActions, visibleCards, visibleFeedWork, visibleRoutineActions } from "./feed/selectors";
 import { Dock } from "./shell/Dock";
 import { InspectorPanel } from "./shell/InspectorPanel";
 import { TopBar } from "./shell/TopBar";
 import { useActiveCard } from "./state/activeCard";
 import { RealtimeProvider } from "./state/realtime";
 import { preferredTarget, sameTarget } from "./state/voiceTarget";
 import type { Card, CardAction, RevisionProposal, RoutineActionGroup, VoiceTarget, WorkItem, WorkspaceRevision, WorkspaceView } from "./types";
+import { FormattedText } from "./ui/FormattedText";
 import { LearningReview, RevisionProposals } from "./workspace/LearningReview";
 import { PromptWorkspace } from "./workspace/PromptWorkspace";
 
@@ -344,7 +345,7 @@ export default function App({ feedId, screen, workspaceTab }: { feedId: string;
 
   const updated = cards.filter((card) => card.status === "to_review_updated");
   const fresh = cards.filter((card) => card.status !== "to_review_updated");
-  const feedWork = feed.work.filter((work) => work.cardId === "__feed__" && work.status === tab);
+  const feedWork = visibleFeedWork(feed, tab);
   return withRealtime(
     <>
       <TopBar state={state} onMind={openMind} onFeed={changeFeed} onInspector={setInspector} onWorkspace={openWorkspace} />
@@ -374,7 +375,43 @@ export default function App({ feedId, screen, workspaceTab }: { feedId: string;
               <span className="kind-dot proposal" />
               <div><div className="eyebrow">Feed instruction · {work.status}</div><h2>{work.instruction}</h2></div>
             </header>
-            <p className="why">{work.status === "queued" ? "Ready for the home Codex thread to drain." : "The home Codex thread is working through this feed-level instruction."}</p>
+            <p className="why">
+              {work.status === "queued"
+                ? "Ready for the home Codex thread to drain."
+                : work.status === "working"
+                  ? "The home Codex thread is working through this feed-level instruction."
+                  : "The home Codex thread completed this feed-level instruction."}
+            </p>
+            {work.status === "completed" && work.response && (
+              <div className="blocks">
+                <section className="block block-rich_text">
+                  <h3>Codex response</h3>
+                  <p><FormattedText text={work.response} /></p>
+                </section>
+              </div>
+            )}
+            {work.status === "queued" && (
+              <footer className="card-action">
+                <div>
+                  <span className="action-label">Queued for Codex</span>
+                  <b>Waiting for the feed thread</b>
+                </div>
+                <div className="action-buttons">
+                  <button className="button ghost" onClick={() => void withRefresh(
+                    () => post(`/api/feeds/${work.feedId}/work/${work.id}/cancel`),
+                    "Instruction cancelled",
+                  )}>Cancel instruction</button>
+                </div>
+              </footer>
+            )}
+            {work.status === "completed" && (
+              <footer className="card-action">
+                <div>
+                  <span className="action-label">Done</span>
+                  <b>Completed</b>
+                </div>
+              </footer>
+            )}
           </article>
         ))}
         {!cards.length && !routineActions.length && !feedWork.length && <div className="empty"><h2>Nothing here right now.</h2><p>{tab === "review" ? "A quiet feed is allowed. Wake the feed thread when you want Codex to collect or drain pending work." : "Move back to To review when you are ready for the next pass."}</p></div>}

src/feed/CardView.tsx

@@ -94,7 +94,14 @@ function Block({ feedId, cardId, block, onChanged }: { feedId: string; cardId: s
     return (
       <section className="block block-editor">
         {block.label && <h3>{block.label}</h3>}
-        <textarea data-block-id={block.id} value={value} onChange={(event) => setValue(event.target.value)} onBlur={() => void save()} rows={Math.max(4, value.split("\n").length + 1)} />
+        <textarea
+          aria-label={block.label ?? "Editable card content"}
+          data-block-id={block.id}
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          onBlur={() => void save()}
+          rows={Math.max(4, value.split("\n").length + 1)}
+        />
       </section>
     );
   }
@@ -228,7 +235,7 @@ function QueuedNoteEditor({ work, onChanged }: { work: WorkItem; onChanged: () =
   return (
     <section className="queued-note">
       <span className="action-label">Queued note</span>
-      <textarea value={value} onChange={(event) => setValue(event.target.value)} onBlur={() => void save()} rows={Math.max(2, value.split("\n").length)} />
+      <textarea aria-label="Queued note" value={value} onChange={(event) => setValue(event.target.value)} onBlur={() => void save()} rows={Math.max(2, value.split("\n").length)} />
       <small>{saving ? "Saving..." : "Edit before Codex claims it."}</small>
     </section>
   );
@@ -313,12 +320,14 @@ export function CardView({
           <div className="action-buttons">
             {actions.map((action) => (
               <button
+                aria-keyshortcuts={action.shortcut}
+                aria-label={action.label}
                 className={`button ${action.variant === "primary" ? "primary" : "ghost"}`}
                 key={action.id}
                 onPointerDown={(event) => event.preventDefault()}
                 onClick={(event) => { event.stopPropagation(); onAction(action); }}
               >
-                {action.label}{action.shortcut && <kbd>{action.shortcut.toUpperCase()}</kbd>}
+                {action.label}{action.shortcut && <kbd aria-hidden="true">{action.shortcut.toUpperCase()}</kbd>}
               </button>
             ))}
           </div>

src/feed/selectors.ts

@@ -1,5 +1,5 @@
 import type { Tab } from "../app/types";
-import type { Card, CardAction, FeedView, RoutineActionGroup } from "../types";
+import type { Card, CardAction, FeedView, RoutineActionGroup, WorkItem } from "../types";
 
 export function visibleCards(feed: FeedView, tab: Tab): Card[] {
   const pass = feed.config.currentPass;
@@ -22,11 +22,14 @@ export function visibleRoutineActions(feed: FeedView, tab: Tab): RoutineActionGr
   return feed.routineActions.filter((group) => group.status === status);
 }
 
+export function visibleFeedWork(feed: FeedView, tab: Tab): WorkItem[] {
+  if (tab === "review") return [];
+  const status = tab === "done" ? "completed" : tab;
+  return feed.work.filter((work) => work.cardId === "__feed__" && work.status === status);
+}
+
 export function countFor(feed: FeedView, tab: Tab): number {
-  const feedWork = tab === "queued" || tab === "working"
-    ? feed.work.filter((work) => work.cardId === "__feed__" && work.status === tab).length
-    : 0;
-  return visibleCards(feed, tab).length + visibleRoutineActions(feed, tab).length + feedWork;
+  return visibleCards(feed, tab).length + visibleRoutineActions(feed, tab).length + visibleFeedWork(feed, tab).length;
 }
 
 export function visibleCardActions(card: Card): CardAction[] {

src/shell/Dock.tsx

@@ -79,8 +79,8 @@ export function Dock({
           </div>
         </div>
         <div className="dock-row">
-          <textarea ref={inputRef} value={value} onChange={(event) => setValue(event.target.value)} onKeyDown={onDockKeyDown} rows={1} placeholder="Tell Codex what to notice, change, or do…" />
-          <button className="button primary" type="submit">Send</button>
+          <textarea aria-label="Instruction for Codex" ref={inputRef} value={value} onChange={(event) => setValue(event.target.value)} onKeyDown={onDockKeyDown} rows={1} placeholder="Tell Codex what to notice, change, or do…" />
+          <button className="button primary" type="submit" disabled={!value.trim()}>Send</button>
         </div>
         <div className="dock-footer">
           <div className="dock-hints"><kbd>↑</kbd>/<kbd>↓</kbd> change scope when empty · hold <kbd>{state.dictation.activationLabel}</kbd> to dictate · <kbd>Enter</kbd> send</div>

src/shell/InspectorPanel.tsx

@@ -27,12 +27,19 @@ export function InspectorPanel({ value, state, onClose, onChanged }: { value: In
   return (
     <div className="overlay" onMouseDown={onClose}>
       <section className="inspector setup-panel" onMouseDown={(event) => event.stopPropagation()}>
-        <button className="close" onClick={onClose}>×</button>
+        <button aria-label="Close setup panel" className="close" onClick={onClose}>×</button>
         <div className="panel-kicker">{create ? "New feed" : "New source"}</div>
         <h2>{create ? "What should this feed notice?" : "What else should this feed pay attention to?"}</h2>
         <p>Describe it naturally. Codex can refine the recipe with you in the feed thread.</p>
-        <textarea autoFocus rows={8} value={text} onChange={(event) => setText(event.target.value)} placeholder={create ? "Track the models I am actually using and show me meaningful changes in where each one is winning…" : "Also look at the product planning Slack channel and pull in decisions or unresolved questions that affect Q3…"} />
-        <button className="button primary large" onClick={() => void submit()}>{create ? "Create feed" : "Add source"}</button>
+        <textarea
+          aria-label={create ? "Feed brief" : "Source brief"}
+          autoFocus
+          rows={8}
+          value={text}
+          onChange={(event) => setText(event.target.value)}
+          placeholder={create ? "Track the models I am actually using and show me meaningful changes in where each one is winning…" : "Also look at the product planning Slack channel and pull in decisions or unresolved questions that affect Q3…"}
+        />
+        <button className="button primary large" disabled={!text.trim()} onClick={() => void submit()}>{create ? "Create feed" : "Add source"}</button>
       </section>
     </div>
   );

src/workspace/PromptWorkspace.tsx

@@ -26,7 +26,7 @@ function WorkspaceEditor({
       <div className="workspace-editor-head">
         <h3>{label}</h3>
         <div className="workspace-editor-actions">
-          {undoRevision && <button className="button text" onClick={() => void (async () => {
+          {undoRevision && <button aria-label={`Undo last save for ${label}`} className="button text" onClick={() => void (async () => {
             setSaving(true);
             try {
               await onUndo(undoRevision);
@@ -37,7 +37,7 @@ function WorkspaceEditor({
               setSaving(false);
             }
           })()}>Undo last save</button>}
-          <button className="button ghost" disabled={!changed || saving} onClick={() => void (async () => {
+          <button aria-label={`Save ${label}`} className="button ghost" disabled={!changed || saving} onClick={() => void (async () => {
             setSaving(true);
             try {
               const revision = await onSave(value);
@@ -50,7 +50,7 @@ function WorkspaceEditor({
           })()}>{saving ? "Saving…" : "Save"}</button>
         </div>
       </div>
-      <textarea value={value} onFocus={onFocus} onClick={onFocus} onChange={(event) => setValue(event.target.value)} rows={Math.max(7, Math.min(20, value.split("\n").length + 2))} />
+      <textarea aria-label={label} value={value} onFocus={onFocus} onClick={onFocus} onChange={(event) => setValue(event.target.value)} rows={Math.max(7, Math.min(20, value.split("\n").length + 2))} />
     </section>
   );
 }