@saadnvd1/agent-os 0.3.799 → 0.3.807

package/components/Nav/HistoryButtons.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { useSnapshot } from "valtio";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useLongPress } from "@/components/Chat/useLongPress";
+import { earlier, later, type MirrorEntry } from "@/lib/nav/history-mirror";
+import { isMac } from "@/lib/keybindings/chord";
+import { navHistory, navHistoryActions } from "@/stores/navHistory";
+
+const KEYS_BACK = () => (isMac() ? "⌘[" : "Alt+←");
+const KEYS_FORWARD = () => (isMac() ? "⌘]" : "Alt+→");
+
+function useReach() {
+  const snap = useSnapshot(navHistory);
+  const m = { entries: [...snap.entries], current: snap.current };
+  return { back: earlier(m), forward: later(m) };
+}
+
+function Entries({ entries }: { entries: MirrorEntry[] }) {
+  return entries.slice(0, 15).map((e) => (
+    <DropdownMenuItem
+      key={e.index}
+      className="min-h-11 md:min-h-0"
+      onSelect={() => navHistoryActions.goTo(e.index)}
+    >
+      <span className="truncate">{e.name || "Chat"}</span>
+    </DropdownMenuItem>
+  ));
+}
+
+/** One history button: tap goes a step; hold (touch) or right-click opens the list of chats it would pass. */
+function HistoryButton({
+  dir,
+  entries,
+  className,
+}: {
+  dir: "back" | "forward";
+  entries: MirrorEntry[];
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const hold = useLongPress(entries.length > 0 ? () => setOpen(true) : null);
+  const Icon = dir === "back" ? ArrowLeft : ArrowRight;
+  const label = dir === "back" ? "Back" : "Forward";
+  const hint = dir === "back" ? KEYS_BACK() : KEYS_FORWARD();
+  const go = () =>
+    dir === "back" ? navHistoryActions.back() : navHistoryActions.forward();
+  const button = (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      disabled={entries.length === 0}
+      className={className}
+      onClick={(e) => {
+        e.stopPropagation();
+        go();
+      }}
+      onContextMenu={(e) => {
+        if (entries.length === 0) return;
+        e.preventDefault();
+        setOpen(true);
+      }}
+      {...hold}
+    >
+      <Icon className="h-4 w-4" />
+    </Button>
+  );
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{`${label} (${hint})`}</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="start" className="max-w-72">
+        <DropdownMenuLabel>
+          {dir === "back" ? "Earlier" : "Later"}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <Entries entries={entries} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** Desktop: back and forward through the chats and bookmarks visited. */
+export function HistoryButtons() {
+  const { back, forward } = useReach();
+  return (
+    <>
+      <HistoryButton dir="back" entries={back} className="h-7 w-7 shrink-0" />
+      <HistoryButton
+        dir="forward"
+        entries={forward}
+        className="h-7 w-7 shrink-0"
+      />
+    </>
+  );
+}
+
+/** Phone: the back button beside the menu; hold it for the list. */
+export function PhoneBackButton() {
+  const { back } = useReach();
+  return (
+    <HistoryButton
+      dir="back"
+      entries={back}
+      className="relative h-8 w-8 shrink-0 after:absolute after:-inset-1.5 after:content-['']"
+    />
+  );
+}

package/components/Pane/MobileTabBar.tsx

@@ -44,6 +44,7 @@ import { useCanAddAnalyst } from "@/components/Analyst/pair";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
+import { PhoneBackButton } from "@/components/Nav/HistoryButtons";
 import { MobileViewPicker } from "./MobileViewPicker";
 
 interface MobileTabBarProps {
@@ -169,6 +170,8 @@ export function MobileTabBar({
         </Button>
       )}
 
+      <PhoneBackButton />
+
       {/* Session/Tab navigation */}
       <div className="flex min-w-0 flex-1 items-center gap-1">
         <button

package/components/Pane/index.tsx

@@ -255,7 +255,7 @@ export const Pane = memo(function Pane({
       fileOpenActions.clearRequest();
       // TODO: Scroll to line (requires FileEditor enhancement)
     }
-  }, [fileOpenRequest, isFocused, session, fileEditor]);
+  }, [fileOpenRequest, isFocused, session, fileEditor, setViewMode]);
 
   // An artifact's file, opened in the Files view.
   const openInFiles = useCallback(
@@ -291,7 +291,7 @@ export const Pane = memo(function Pane({
 
   // Create onConnected callback for a specific tab
   const getTerminalConnectedHandler = useCallback(
-    (tab: (typeof paneData.tabs)[0]) => () => {
+    (tab: TabData) => () => {
       console.log(
         `[AgentOS] Terminal connected for pane: ${paneId}, tab: ${tab.id}`
       );

package/components/SessionList/useSessionSwitching.ts

@@ -4,11 +4,12 @@ import { MessageSquare } from "lucide-react";
 import { useKeybindings } from "@/hooks/useKeybindings";
 import { usePaletteCommands } from "@/hooks/usePaletteCommands";
 import { chordHint } from "@/lib/keybindings/chord";
+import { keysOf } from "@/lib/keybindings/keymap";
 import { fieldOwnsKey } from "@/lib/keybindings/focus";
 import { neighbourSession } from "@/lib/sidebar/visible-order";
 
-const PREVIOUS = "mod+up";
-const NEXT = "mod+down";
+const PREVIOUS = keysOf("session.previous");
+const NEXT = keysOf("session.next");
 
 // ⌘↑ / ⌘↓ (Ctrl off a Mac) select the row above or below the active one, as
 // a click would, in the order the sidebar shows. Nothing happens at either end.

package/components/Shortcuts/PendingKeys.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useSnapshot } from "valtio";
+import { shortcutsUi } from "@/stores/shortcutsUi";
+
+/** The first key of a sequence, shown until the second comes or time runs out. */
+export function PendingKeys() {
+  const { pending } = useSnapshot(shortcutsUi);
+  if (!pending) return null;
+  return (
+    <div
+      role="status"
+      className="bg-popover text-popover-foreground border-foreground/10 pointer-events-none fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-md border px-3 py-1.5 text-sm shadow-md"
+    >
+      <kbd className="font-mono font-medium uppercase">{pending}</kbd>
+      <span className="text-muted-foreground ml-2">then…</span>
+    </div>
+  );
+}

package/components/Shortcuts/ShortcutsButton.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Keyboard } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { shortcutsUiActions } from "@/stores/shortcutsUi";
+
+/** A footer icon that opens the shortcuts panel; on a phone it is the only way in. */
+export function ShortcutsButton() {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      title="Keyboard shortcuts (?)"
+      aria-label="Keyboard shortcuts"
+      onClick={() => shortcutsUiActions.open()}
+      className="text-muted-foreground relative h-8 w-8 after:absolute after:-inset-1.5 after:content-[''] md:after:hidden [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
+    >
+      <Keyboard className="h-4 w-4" />
+    </Button>
+  );
+}

package/components/Shortcuts/ShortcutsDialog.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { useSnapshot } from "valtio";
+import { Search } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
+import { useSingleKeys } from "@/hooks/useNavKeys";
+import { chordHint, isMac } from "@/lib/keybindings/chord";
+import {
+  isSequence,
+  searchKeymap,
+  type KeyEntry,
+  type KeyGroup,
+} from "@/lib/keybindings/keymap";
+import { shortcutsUi, shortcutsUiActions } from "@/stores/shortcutsUi";
+
+const GROUPS: KeyGroup[] = ["Go to", "Chats", "General", "Browser"];
+
+// The browser's own keys for back and forward, per platform.
+function hint(k: KeyEntry): string[] {
+  if (isSequence(k.keys)) return k.keys.split(" ").map((x) => x.toUpperCase());
+  if (k.browser) {
+    if (!isMac()) return [k.id === "history.back" ? "Alt+←" : "Alt+→"];
+    const arrow = k.keys.replace("[", "left").replace("]", "right");
+    return [chordHint(k.keys, true), chordHint(arrow, true)];
+  }
+  return [chordHint(k.keys)];
+}
+
+function Row({ k }: { k: KeyEntry }) {
+  const parts = hint(k);
+  return (
+    <li className="flex min-h-11 items-center justify-between gap-3 py-1 md:min-h-8">
+      <span className="min-w-0 text-sm">{k.label}</span>
+      <span className="flex shrink-0 items-center gap-1">
+        {isSequence(k.keys) ? (
+          parts.map((p, i) => <Kbd key={i}>{p}</Kbd>)
+        ) : (
+          <Kbd>{parts.join(" · ")}</Kbd>
+        )}
+      </span>
+    </li>
+  );
+}
+
+const Kbd = ({ children }: { children: React.ReactNode }) => (
+  <kbd className="bg-muted text-muted-foreground min-w-6 rounded border px-1.5 py-0.5 text-center font-mono text-xs">
+    {children}
+  </kbd>
+);
+
+/** Every shortcut, searchable, with the switch that turns the bare-key ones off. */
+export function ShortcutsDialog() {
+  const { open } = useSnapshot(shortcutsUi);
+  const [query, setQuery] = useState("");
+  const [singles, setSingles] = useSingleKeys();
+  const found = searchKeymap(query);
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(o) => {
+        shortcutsUiActions.setOpen(o);
+        if (!o) setQuery("");
+      }}
+    >
+      <DialogContent className="flex max-h-[min(80dvh,640px)] flex-col gap-3 sm:max-w-lg">
+        <DialogTitle>Keyboard shortcuts</DialogTitle>
+        <DialogDescription className="sr-only">
+          Search the shortcuts and turn the single-key ones off
+        </DialogDescription>
+        <label className="border-foreground/10 flex items-center gap-2 rounded-md border px-3">
+          <Search className="text-muted-foreground h-4 w-4 shrink-0" />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search shortcuts…"
+            aria-label="Search shortcuts"
+            className="placeholder:text-muted-foreground h-11 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm"
+          />
+        </label>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          {found.length === 0 && (
+            <p className="text-muted-foreground py-6 text-center text-sm">
+              No shortcut matches.
+            </p>
+          )}
+          {GROUPS.map((g) => {
+            const rows = found.filter((k) => k.group === g);
+            if (!rows.length) return null;
+            return (
+              <section key={g} className="mb-3">
+                <h3 className="label-mono text-muted-foreground mb-1">{g}</h3>
+                <ul>
+                  {rows.map((k) => (
+                    <Row key={k.id} k={k} />
+                  ))}
+                </ul>
+              </section>
+            );
+          })}
+        </div>
+        <label className="border-foreground/10 flex min-h-11 items-center justify-between gap-3 border-t pt-3 text-sm">
+          <span>
+            Single-key shortcuts
+            <span className="text-muted-foreground block text-xs">
+              Letters like C and G I, only when you are not typing. This browser
+              only.
+            </span>
+          </span>
+          <Switch checked={singles} onCheckedChange={setSingles} />
+        </label>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/SidebarFooter.tsx

@@ -1,6 +1,7 @@
 import { TipButton } from "@/components/Tips";
 import { WhatsNewButton } from "@/components/WhatsNew";
 import { ThemeToggle } from "@/components/ThemeToggle";
+import { ShortcutsButton } from "@/components/Shortcuts/ShortcutsButton";
 import {
   Tooltip,
   TooltipContent,
@@ -13,6 +14,7 @@ export function SidebarFooter() {
       <div className="flex items-center justify-between">
         <span className="label-mono text-muted-foreground">Theme</span>
         <div className="flex items-center">
+          <ShortcutsButton />
           <TipButton />
           <WhatsNewButton />
           <ThemeToggle />

package/components/Terminal/hooks/useTerminalConnection.ts

@@ -137,7 +137,8 @@ export function useTerminalConnection({
 
   // Main setup effect
   useEffect(() => {
-    if (!terminalRef.current) return;
+    const container = terminalRef.current;
+    if (!container) return;
 
     let cancelled = false;
     // Reset intentional close flag (may be true from previous cleanup)
@@ -220,9 +221,9 @@ export function useTerminalConnection({
 
       // Save scroll state before unmount
       const term = xtermRef.current;
-      if (term && callbacksRef.current.onBeforeUnmount && terminalRef.current) {
+      if (term && callbacksRef.current.onBeforeUnmount) {
         const buffer = term.buffer.active;
-        const viewport = terminalRef.current.querySelector(
+        const viewport = container.querySelector(
           ".xterm-viewport"
         ) as HTMLElement;
         callbacksRef.current.onBeforeUnmount({

package/components/views/DesktopView.tsx

@@ -6,8 +6,9 @@ import { UpdateBanner } from "@/components/Updates";
 import { PaneLayout } from "@/components/PaneLayout";
 import { PaneBarSlotsProvider } from "@/components/Pane/PaneBarSlots";
 import type { ViewProps } from "./types";
-import { QuickSwitcher, StartServerDialog } from "./lazy";
+import { CodeSearchDialog, StartServerDialog } from "./lazy";
 import { fileOpenActions } from "@/stores/fileOpen";
+import { HistoryButtons } from "@/components/Nav/HistoryButtons";
 import { useSidebarPinned } from "@/hooks/useSidebarPinned";
 
 export function DesktopView({
@@ -57,7 +58,10 @@ export function DesktopView({
         <div className="min-h-0 flex-1">
           <PaneBarSlotsProvider
             leading={
-              <SidebarToggle isPinned={isPinned} togglePin={togglePin} />
+              <>
+                <SidebarToggle isPinned={isPinned} togglePin={togglePin} />
+                <HistoryButtons />
+              </>
             }
             trailing={<DesktopAppActions showNew={!isPinned} />}
           >
@@ -67,16 +71,10 @@ export function DesktopView({
       </div>
 
       {/* Dialogs */}
-      <QuickSwitcher
-        sessions={sessions}
+      <CodeSearchDialog
         open={showQuickSwitcher}
         onOpenChange={setShowQuickSwitcher}
-        currentSessionId={focusedActiveTab?.sessionId ?? undefined}
         activeSessionWorkingDir={activeSession?.working_directory ?? undefined}
-        onSelectSession={(sessionId) => {
-          const session = sessions.find((s) => s.id === sessionId);
-          if (session) selectSession(session);
-        }}
         onSelectFile={(file, line) => {
           // Convert relative path to absolute by prepending working directory
           const absolutePath = activeSession?.working_directory

package/components/views/MobileView.tsx

@@ -6,7 +6,7 @@ import { PaneLayout } from "@/components/PaneLayout";
 import { SwipeSidebar } from "@/components/mobile/SwipeSidebar";
 import { UpdateBanner } from "@/components/Updates";
 import type { ViewProps } from "./types";
-import { QuickSwitcher, StartServerDialog } from "./lazy";
+import { CodeSearchDialog, StartServerDialog } from "./lazy";
 import { fileOpenActions } from "@/stores/fileOpen";
 
 export function MobileView({
@@ -66,16 +66,10 @@ export function MobileView({
       </div>
 
       {/* Dialogs */}
-      <QuickSwitcher
-        sessions={sessions}
+      <CodeSearchDialog
         open={showQuickSwitcher}
         onOpenChange={setShowQuickSwitcher}
-        currentSessionId={focusedActiveTab?.sessionId ?? undefined}
         activeSessionWorkingDir={activeSession?.working_directory ?? undefined}
-        onSelectSession={(sessionId) => {
-          const session = sessions.find((s) => s.id === sessionId);
-          if (session) attachToSession(session);
-        }}
         onSelectFile={(file, line) => {
           // Convert relative path to absolute by prepending working directory
           const absolutePath = activeSession?.working_directory

package/components/views/lazy.ts

@@ -2,8 +2,8 @@ import dynamic from "next/dynamic";
 
 // Dialogs both views hold closed until asked for: their code loads after the
 // first paint rather than with it.
-export const QuickSwitcher = dynamic(
-  () => import("@/components/QuickSwitcher").then((m) => m.QuickSwitcher),
+export const CodeSearchDialog = dynamic(
+  () => import("@/components/CodeSearchDialog").then((m) => m.CodeSearchDialog),
   { ssr: false }
 );
 export const StartServerDialog = dynamic(