@saadnvd1/agent-os 0.3.649 → 0.3.654

package/components/Chat/ChatPanel.tsx

@@ -43,10 +43,11 @@ import { LearningCardsHost } from "@/components/LearningCards/LearningCard";
 import { composerCompacts } from "@/lib/chat/stale";
 import { useFreshStartQuery } from "@/data/fresh-start";
 import { QuoteButton } from "./QuoteButton";
+import { quoteIntoComposer } from "./quote-selection";
 import { ToolBodies, ToolGroup } from "./Tools";
 import { RowState, RowStore } from "./rowState";
+import { useKeybindings } from "@/hooks/useKeybindings";
 import { Background, type BackgroundValue } from "./background";
-import { backgroundKey } from "@/lib/chat/background";
 import { FindBar } from "./FindBar";
 import { FIND_EVENT, isFindKey, useFind } from "./useFind";
 import { McpServers } from "./McpServers";
@@ -365,6 +366,15 @@ export function ChatPanel({
         ?.focus(),
     []
   );
+  // Quote button or Enter: the text goes in, and the caret is ready to reply.
+  const quote = (text: string) =>
+    quoteIntoComposer(
+      text,
+      // After the draft, so the caret ends at the end of the composer.
+      (t) =>
+        setInsert({ text: quoteMarkdown(t), at: Date.now(), append: true }),
+      focusComposer
+    );
   const togglePlan = plan === null ? undefined : () => setPlan(!plan);
   const sendText = (text: string) => {
     toEnd();
@@ -377,39 +387,24 @@ export function ChatPanel({
   const asIs = asIsFor === sessionId;
   const setAsIs = (on: boolean) => setAsIsFor(on ? sessionId : null);
 
+  const inPanel = (e: KeyboardEvent) =>
+    !!rootRef.current?.contains(e.target as Node);
   // Shift+Tab switches plan mode from the composer, as in the terminal.
-  const shiftTab = useRef(togglePlan);
-  useEffect(() => {
-    shiftTab.current = togglePlan;
-  });
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Tab" || !e.shiftKey || e.metaKey || e.ctrlKey) return;
-      const target = e.target as HTMLElement;
-      if (
-        !shiftTab.current ||
-        !rootRef.current?.contains(target) ||
-        !(target === rootRef.current || target.closest(".chat-composer"))
-      )
-        return;
-      e.preventDefault();
-      shiftTab.current();
-    };
-    window.addEventListener("keydown", onKey, true);
-    return () => window.removeEventListener("keydown", onKey, true);
-  }, []);
-
-  useChatCommands({
-    sessionId,
-    connected,
-    running,
-    context,
-    plan,
-    send: sendText,
-    setPlan,
-    interrupt,
-    focusComposer,
-  });
+  useKeybindings(`chat-plan:${sessionId}`, [
+    {
+      id: "chat.plan",
+      keys: "shift+tab",
+      when: (e) => {
+        const target = e.target as HTMLElement;
+        return (
+          !!togglePlan &&
+          inPanel(e) &&
+          (target === rootRef.current || !!target.closest(".chat-composer"))
+        );
+      },
+      run: () => togglePlan?.(),
+    },
+  ]);
 
   const blocks = useMemo(
     () => groupTimeline(items, { foldEvents: !!orchestratorOf }),
@@ -466,20 +461,27 @@ export function ChatPanel({
       ),
     [canBackground, foregroundTasks]
   );
-  const moveRef = useRef({ canMove, backgroundTask });
-  useEffect(() => {
-    moveRef.current = { canMove, backgroundTask };
+  useKeybindings(`chat:${sessionId}`, [
+    {
+      id: "chat.background",
+      keys: "ctrl+b",
+      when: (e) => canMove && inPanel(e),
+      run: () => backgroundTask(),
+    },
+  ]);
+  useChatCommands({
+    sessionId,
+    connected,
+    running,
+    context,
+    plan,
+    send: sendText,
+    setPlan,
+    interrupt,
+    focusComposer,
+    background: canMove ? () => backgroundTask() : undefined,
   });
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (!rootRef.current?.contains(e.target as Node)) return;
-      if (!backgroundKey(e, moveRef.current.canMove)) return;
-      e.preventDefault();
-      moveRef.current.backgroundTask();
-    };
-    window.addEventListener("keydown", onKey, true);
-    return () => window.removeEventListener("keydown", onKey, true);
-  }, []);
+
   const itemsById = useMemo(
     () => new Map(items.map((i) => [i.id, i])),
     [items]
@@ -790,12 +792,7 @@ export function ChatPanel({
           onStop={stopTask}
           onLoadOutput={loadTaskOutput}
         />
-        <QuoteButton
-          rootRef={scrollRef}
-          onQuote={(text) =>
-            setInsert({ text: quoteMarkdown(text), at: Date.now() })
-          }
-        />
+        <QuoteButton rootRef={scrollRef} onQuote={quote} />
         <PausedBanner sessionId={sessionId} />
         <Queue
           queue={queue}

package/components/Chat/QuoteButton.tsx

@@ -1,10 +1,17 @@
 "use client";
 
-import { useEffect, useState, type RefObject } from "react";
+import { useEffect, useId, useState, type RefObject } from "react";
 import { Quote } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useCoarsePointer } from "./composer/useCoarsePointer";
-import { placeQuote, quotePick, type Placement } from "./quote-selection";
+import { useKeybindings } from "@/hooks/useKeybindings";
+import {
+  quoteAction,
+  quoteEnter,
+  placeQuote,
+  quotePick,
+  type Placement,
+} from "./quote-selection";
 
 interface Picked {
   text: string;
@@ -57,12 +64,16 @@ export function QuoteButton({
     };
   }, [rootRef]);
 
+  const shown = !!picked && (coarse || !!picked.at);
+  const quote = quoteAction(picked?.text, {
+    onQuote,
+    clearSelection: () => window.getSelection()?.removeAllRanges(),
+    hide: () => setPicked(null),
+  });
+  // One source per button: each open chat pane has its own.
+  useKeybindings(`chat-quote:${useId()}`, [quoteEnter(shown, quote)]);
+
   if (!picked) return null;
-  const quote = () => {
-    onQuote(picked.text);
-    window.getSelection()?.removeAllRanges();
-    setPicked(null);
-  };
   const button = (
     <button
       type="button"
@@ -73,6 +84,12 @@ export function QuoteButton({
     >
       <Quote className="h-3.5 w-3.5" />
       Quote
+      <kbd
+        aria-hidden
+        className="text-muted-foreground bg-muted hidden rounded px-1 font-mono text-[10px] leading-4 md:inline"
+      >
+        ↵
+      </kbd>
     </button>
   );
   if (coarse)

package/components/Chat/composer/editor.test.ts

@@ -55,13 +55,25 @@ const keys = (over: Partial<KeyHandlers> = {}): KeyHandlers => ({
 
 function press(
   key: string,
-  opts: { shift?: boolean; coarse?: boolean } = {},
+  opts: {
+    shift?: boolean;
+    coarse?: boolean;
+    alt?: boolean;
+    ctrl?: boolean;
+    meta?: boolean;
+  } = {},
   h = keys()
 ) {
   window.matchMedia = ((q: string) => ({
     matches: Boolean(opts.coarse) && q.includes("coarse"),
   })) as never;
-  const event = new KeyboardEvent("keydown", { key, shiftKey: opts.shift });
+  const event = new KeyboardEvent("keydown", {
+    key,
+    shiftKey: opts.shift,
+    altKey: opts.alt,
+    ctrlKey: opts.ctrl,
+    metaKey: opts.meta,
+  });
   if (!handleKeyDown(editor, event, h)) {
     editor.view.someProp("handleKeyDown", (f) => f(editor.view, event));
   }
@@ -289,6 +301,31 @@ describe("Enter", () => {
     expect(taken).toBe(2);
   });
 
+  it("→ leaves the caret alone with no suggestion, a modifier, or an open menu", () => {
+    make();
+    let taken = 0;
+    const on = keys({ suggestion: true, onAcceptSuggestion: () => taken++ });
+    const off = keys({ suggestion: false, onAcceptSuggestion: () => taken++ });
+    press("ArrowRight", {}, off);
+    for (const mod of [
+      { shift: true },
+      { alt: true },
+      { ctrl: true },
+      { meta: true },
+    ])
+      press("ArrowRight", mod, on);
+    const open = keys({
+      suggestion: true,
+      menuOpen: true,
+      menuHasMatches: true,
+      onAcceptSuggestion: () => taken++,
+    });
+    press("ArrowRight", {}, open);
+    expect(taken).toBe(0);
+    press("ArrowRight", {}, on);
+    expect(taken).toBe(1);
+  });
+
   it("Tab picks from an open menu before taking ghost text", () => {
     make();
     const got: string[] = [];

package/components/Chat/quote-selection.test.ts

@@ -1,6 +1,14 @@
 import { JSDOM } from "jsdom";
-import { beforeEach, describe, expect, it } from "vitest";
-import { placeQuote, quotePick, rangeText } from "./quote-selection";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { KeybindingRegistry } from "@/lib/keybindings/registry";
+import {
+  placeQuote,
+  quoteAction,
+  quoteEnter,
+  quoteIntoComposer,
+  quotePick,
+  rangeText,
+} from "./quote-selection";
 
 // The suite's setup needs node, so the DOM is built here.
 const { window } = new JSDOM("<!doctype html><body></body>");
@@ -165,3 +173,177 @@ describe("placeQuote", () => {
     ).toBeNull();
   });
 });
+
+describe("Enter quotes", () => {
+  let root: HTMLElement;
+  beforeEach(() => {
+    root = chat();
+  });
+
+  const reply = () => text("#a2 p", 1);
+  const key = (target: EventTarget, extra: object = {}) =>
+    ({
+      key: "Enter",
+      code: "Enter",
+      target,
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      shiftKey: false,
+      isComposing: false,
+      repeat: false,
+      preventDefault() {},
+      ...extra,
+    }) as unknown as KeyboardEvent;
+
+  // Runs a key through a real registry holding the binding.
+  function press(shown: boolean, e: KeyboardEvent) {
+    const run = vi.fn();
+    const reg = new KeybindingRegistry({
+      addEventListener() {},
+      removeEventListener() {},
+    });
+    reg.register("t", [quoteEnter(shown, run, () => window.getSelection())]);
+    return { handled: reg.handle(e), run };
+  }
+
+  it("fires with a selection in a reply and the button showing", () => {
+    select([reply(), 4], [reply(), 8]);
+    const { handled, run } = press(true, key(root));
+    expect(handled).toBe(true);
+    expect(run).toHaveBeenCalledOnce();
+  });
+
+  it("leaves Enter alone when the button isn't showing", () => {
+    select([reply(), 4], [reply(), 8]);
+    expect(press(false, key(root)).handled).toBe(false);
+  });
+
+  it("leaves Enter alone with no selection", () => {
+    window.getSelection()!.removeAllRanges();
+    expect(press(true, key(root)).handled).toBe(false);
+  });
+
+  it("leaves Enter alone in the composer, key or selection", () => {
+    const composer = document.getElementById("composer") as HTMLTextAreaElement;
+    select([reply(), 4], [reply(), 8]);
+    expect(press(true, key(composer)).handled).toBe(false);
+    composer.select();
+    select([composer.parentNode!, 0], [composer.parentNode!, 1]);
+    const inside = document.createElement("div");
+    inside.setAttribute("contenteditable", "true");
+    inside.textContent = "draft";
+    document.body.append(inside);
+    select([inside.firstChild!, 0], [inside.firstChild!, 3]);
+    expect(press(true, key(root)).handled).toBe(false);
+  });
+
+  it("leaves a focused button to its own Enter", () => {
+    select([reply(), 4], [reply(), 8]);
+    const button = document.querySelector("#a2 button")!;
+    expect(press(true, key(button)).handled).toBe(false);
+  });
+
+  it.each(["shiftKey", "metaKey", "ctrlKey", "altKey"])(
+    "ignores Enter with %s",
+    (mod) => {
+      select([reply(), 4], [reply(), 8]);
+      expect(press(true, key(root, { [mod]: true })).handled).toBe(false);
+    }
+  );
+
+  it("ignores IME composition and repeats", () => {
+    select([reply(), 4], [reply(), 8]);
+    expect(press(true, key(root, { isComposing: true })).handled).toBe(false);
+    expect(press(true, key(root, { repeat: true })).handled).toBe(false);
+  });
+});
+
+describe("quoteIntoComposer", () => {
+  it("puts the text in, then focuses the composer", () => {
+    const order: string[] = [];
+    quoteIntoComposer(
+      "hello",
+      (t) => order.push(`put:${t}`),
+      () => order.push("focus")
+    );
+    expect(order).toEqual(["put:hello", "focus"]);
+  });
+});
+
+describe("Enter quoting wiring", () => {
+  const sel = () => window.getSelection()!;
+  const enter = (): KeyboardEvent =>
+    ({
+      key: "Enter",
+      code: "Enter",
+      target: document.body,
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      shiftKey: false,
+      isComposing: false,
+      repeat: false,
+      preventDefault() {},
+    }) as unknown as KeyboardEvent;
+  const registry = () =>
+    new KeybindingRegistry({
+      addEventListener() {},
+      removeEventListener() {},
+    });
+  const pick = () => {
+    const root = chat();
+    select([text("#a2 p", 1), 4], [text("#a2 p", 1), 8]);
+    return root;
+  };
+
+  it("Enter hands the text over, clears the selection, hides, focuses", () => {
+    pick();
+    const calls: string[] = [];
+    const action = quoteAction("very", {
+      onQuote: (t) =>
+        quoteIntoComposer(
+          t,
+          (m) => calls.push(`put:${m}`),
+          () => calls.push("focus")
+        ),
+      clearSelection: () => {
+        sel().removeAllRanges();
+        calls.push("clear");
+      },
+      hide: () => calls.push("hide"),
+    });
+    const reg = registry();
+    reg.register("a", [quoteEnter(true, action, sel)]);
+    expect(reg.handle(enter())).toBe(true);
+    expect(calls).toEqual(["put:very", "focus", "clear", "hide"]);
+    expect(sel().isCollapsed).toBe(true);
+  });
+
+  it("does nothing without picked text", () => {
+    const onQuote = vi.fn();
+    quoteAction(undefined, {
+      onQuote,
+      clearSelection: vi.fn(),
+      hide: vi.fn(),
+    })();
+    expect(onQuote).not.toHaveBeenCalled();
+  });
+
+  it("keeps one binding per source: panes don't replace each other", () => {
+    pick();
+    const reg = registry();
+    const a = vi.fn();
+    const b = vi.fn();
+    const offA = reg.register("chat-quote:a", [quoteEnter(true, a, sel)]);
+    const offB = reg.register("chat-quote:b", [quoteEnter(false, b, sel)]);
+    expect(reg.handle(enter())).toBe(true);
+    expect(a).toHaveBeenCalledOnce();
+    expect(b).not.toHaveBeenCalled();
+    offB();
+    expect(reg.handle(enter())).toBe(true);
+    expect(a).toHaveBeenCalledTimes(2);
+    offA();
+    expect(reg.handle(enter())).toBe(false);
+  });
+});

package/components/Chat/quote-selection.ts

@@ -1,3 +1,4 @@
+import type { Keybinding } from "@/lib/keybindings/registry";
 // What a selection in the chat quotes: the parts of it inside replies
 // (elements marked data-quotable), whatever its ends touch. A triple-click
 // or a drag past a reply's last line ends the range outside the reply, in
@@ -114,3 +115,72 @@ export function placeQuote(sel: Box, view: Box, size = 48): Placement | null {
     side: "below",
   };
 }
+
+const TYPES_OR_ACTS =
+  'input, textarea, select, button, a[href], summary, [contenteditable]:not([contenteditable="false"])';
+
+function inTypingOrAction(node: Node | null): boolean {
+  const el =
+    node && (node.nodeType === 1 ? (node as Element) : node.parentElement);
+  return !!el?.closest(TYPES_OR_ACTS);
+}
+
+// Whether Enter quotes: the button is showing for a live selection, and
+// neither the key's target nor the selection sits in the composer or any
+// other field, where Enter keeps its own meaning.
+export function enterQuotes(
+  visible: boolean,
+  target: EventTarget | null,
+  sel: Selection | null
+): boolean {
+  if (!visible || !sel || sel.isCollapsed || !sel.rangeCount) return false;
+  if (!sel.toString().trim()) return false;
+  return (
+    !inTypingOrAction(target as Node | null) &&
+    !inTypingOrAction(sel.anchorNode) &&
+    !inTypingOrAction(sel.focusNode)
+  );
+}
+
+// What Quote does, from the button or from Enter: the text goes in the
+// composer, then the composer takes the caret so a reply can follow.
+export function quoteIntoComposer(
+  text: string,
+  put: (markdown: string) => void,
+  focus: () => void
+) {
+  put(text);
+  focus();
+}
+
+// Enter does what the Quote button does, while it's showing.
+export function quoteEnter(
+  shown: boolean,
+  run: () => void,
+  getSel: () => Selection | null = () => window.getSelection()
+): Keybinding {
+  return {
+    id: "chat.quote",
+    keys: "enter",
+    when: (e) => enterQuotes(shown, e.target, getSel()),
+    run,
+  };
+}
+
+// What the button does with the picked text, by click or by Enter: hand it
+// over, clear the selection, hide the button.
+export function quoteAction(
+  text: string | undefined,
+  io: {
+    onQuote: (text: string) => void;
+    clearSelection: () => void;
+    hide: () => void;
+  }
+) {
+  return () => {
+    if (text === undefined) return;
+    io.onQuote(text);
+    io.clearSelection();
+    io.hide();
+  };
+}

package/components/Chat/useChatCommands.ts

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { useSnapshot } from "valtio";
-import { ListChecks, Minimize2, Square } from "lucide-react";
+import { Layers, ListChecks, Minimize2, Square } from "lucide-react";
 import type { ChatContext } from "@/lib/chat/events";
 import { usePaletteCommands } from "@/hooks/usePaletteCommands";
 import { chatMeta, chatMetaActions, type ChatActions } from "@/stores/chatMeta";
@@ -15,6 +15,7 @@ export function useChatCommands({
   running,
   context,
   plan,
+  background,
   ...handlers
 }: ChatActions & {
   sessionId: string;
@@ -22,10 +23,12 @@ export function useChatCommands({
   running: boolean;
   context: ChatContext | null;
   plan: boolean | null;
+  // Set while a running call can move to the background.
+  background?: () => void;
 }) {
-  const latest = useRef(handlers);
+  const latest = useRef({ ...handlers, background });
   useEffect(() => {
-    latest.current = handlers;
+    latest.current = { ...handlers, background };
   });
 
   useEffect(() => {
@@ -69,6 +72,19 @@ export function useChatCommands({
             icon: Minimize2,
             run: () => latest.current.send("/compact"),
           },
+          ...(background
+            ? [
+                {
+                  id: "chat.background",
+                  title: "Run in background",
+                  group: "Chat",
+                  keywords: ["move", "detach", "task"],
+                  hint: "Ctrl+B",
+                  icon: Layers,
+                  run: () => latest.current.background?.(),
+                },
+              ]
+            : []),
           ...(running
             ? [
                 {

package/components/SessionList/OrchestratorPinRow.tsx

@@ -56,6 +56,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
 
   const content = (
     <RowFrame
+      data-session-row={session.id}
       data-tip={`${label}\n${summary}`}
       onActivate={() => !renaming && ctx.onSelect(session.id)}
       className={

package/components/SessionList/SessionRow.tsx

@@ -76,7 +76,7 @@ export const SessionRow = memo(function SessionRow({
   );
 
   return (
-    <div>
+    <div data-session-row={session.id}>
       <RowShell
         title={session.name}
         tipKey={`session:${session.id}`}

package/components/SessionList/SessionShelves.tsx

@@ -8,6 +8,7 @@ import {
   doneSummary,
   type Shelves,
 } from "@/lib/sidebar/shelves";
+import { shownShelves } from "@/lib/sidebar/visible-order";
 import type { MachineGroup } from "@/lib/sidebar/machines";
 import { sidebarUiActions } from "@/stores/sidebarUi";
 import { cn } from "@/lib/utils";
@@ -124,8 +125,10 @@ export function SessionShelves({
   snoozedCollapsed: boolean;
   donePages: number;
 }) {
+  const folds = { doneCollapsed, snoozedCollapsed, donePages };
   const shown = shelves.done.slice(0, doneLimit(donePages));
   const hidden = shelves.done.length - shown.length;
+  const visible = shownShelves(shelves, folds);
   const pendingCards = usePendingCardSessions();
   const doneCards = shelves.done.reduce(
     (n, r) => n + (pendingCards.get(r.session.id) ?? 0),
@@ -210,10 +213,9 @@ export function SessionShelves({
             collapsed={snoozedCollapsed}
             onToggle={sidebarUiActions.toggleSnoozed}
           />
-          {!snoozedCollapsed &&
-            shelves.snoozed.map((r) => (
-              <SessionRow key={r.session.id} row={r} muted />
-            ))}
+          {visible.snoozed.map((r) => (
+            <SessionRow key={r.session.id} row={r} muted />
+          ))}
         </section>
       )}
       {shelves.done.length > 0 && (
@@ -223,8 +225,9 @@ export function SessionShelves({
             collapsed={doneCollapsed}
             onToggle={sidebarUiActions.toggleDone}
           />
-          {!doneCollapsed &&
-            shown.map((r) => <SessionRow key={r.session.id} row={r} muted />)}
+          {visible.done.map((r) => (
+            <SessionRow key={r.session.id} row={r} muted />
+          ))}
           {!doneCollapsed && hidden > 0 && (
             <button
               type="button"