@saadnvd1/agent-os 0.3.794 → 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/Recipes/TimerFields.tsx

@@ -77,7 +77,8 @@ export function timerProblem(v: TimerValue): string | null {
   if (!isTimezone(v.timezone)) return "Unknown time zone";
   const bad = cronError(cron);
   if (bad) return bad;
-  return minGapMinutes(cron, v.timezone) < MIN_GAP_MINUTES
+  return minGapMinutes(cron, v.timezone, Date.now(), MIN_GAP_MINUTES) <
+    MIN_GAP_MINUTES
     ? "A recipe runs at most once an hour"
     : null;
 }

package/components/Schedules/ScheduleForm.tsx

@@ -303,7 +303,7 @@ export function ScheduleForm({
       !once &&
       !cronProblem &&
       tzOk &&
-      minGapMinutes(cron, timezone, openedAt) < minGap,
+      minGapMinutes(cron, timezone, openedAt, minGap) < minGap,
     [minGap, once, cron, cronProblem, timezone, tzOk, openedAt]
   );
 

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/Settings/SettingsDialog.tsx

@@ -126,7 +126,7 @@ export const SECTION_INFO: Record<
   },
   updates: {
     label: "Updates",
-    hint: "Version, check for updates, the update banner",
+    hint: "Version, check for updates, the update banner, tips",
     icon: RefreshCw,
   },
   experiments: {

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,5 +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,
@@ -12,6 +14,8 @@ 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 />
         </div>

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/Tips/TipButton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Lightbulb } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTips } from "@/data/tips";
+import { cn } from "@/lib/utils";
+import { tipsActions } from "@/stores/tips";
+
+/** A small footer icon that opens the tip dialog; a dot marks today's unread tip. */
+export function TipButton() {
+  const { data } = useTips();
+  if (data && (data.off || !data.deck.length)) return null;
+  // Holds the icon's place while the first answer loads, so What's New doesn't jump.
+  const fresh = !!data && !data.quiet && data.today?.read === false;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      title="Tip of the Day"
+      aria-label={fresh ? "Tip of the Day (new tip)" : "Tip of the Day"}
+      disabled={!data}
+      onClick={() => tipsActions.open()}
+      // The ::after widens the tap area to 44px on a phone without adding height.
+      className={cn(
+        "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",
+        !data && "invisible"
+      )}
+    >
+      <Lightbulb className="h-4 w-4" />
+      {fresh && (
+        <span
+          data-testid="tip-dot"
+          className="bg-primary absolute top-1.5 right-1.5 size-1.5 rounded-full"
+        />
+      )}
+    </Button>
+  );
+}

package/components/Tips/TipDialog.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight, Lightbulb, X } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useMarkTipSeen, useSetTipsOff, useTips } from "@/data/tips";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { TipMedia } from "./TipMedia";
+
+export function TipDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const wide = useMediaQuery("(min-width: 768px)");
+  const { data } = useTips();
+  const markSeen = useMarkTipSeen();
+  const setOff = useSetTipsOff();
+  const deck = data?.deck ?? [];
+  const [index, setIndex] = useState(() =>
+    Math.max(
+      0,
+      deck.findIndex((t) => t.id === data?.today?.id)
+    )
+  );
+  const tip = deck[index];
+
+  // Whatever tip is on screen counts as seen; today's one clears the dot.
+  const tipId = tip?.id;
+  useEffect(() => {
+    if (tipId) markSeen.mutate(tipId);
+    // markSeen is a new object each render; the tip is the trigger.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tipId]);
+
+  const step = (by: number) =>
+    setIndex((i) => (i + by + deck.length) % deck.length);
+
+  const turnOff = () => {
+    setOff.mutate(true, {
+      onSuccess: () =>
+        toast("Tips are off. Turn them back on in Settings → Updates.", {
+          action: { label: "Undo", onClick: () => setOff.mutate(false) },
+        }),
+    });
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        placement={wide ? "center" : "sheet"}
+        className="flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[26rem]"
+      >
+        <div className="bg-muted-foreground/40 mx-auto mt-2 h-1 w-9 rounded-full md:hidden" />
+        <div className="flex items-center gap-2 px-4 pt-3 pb-1">
+          <span className="bg-muted grid size-7 shrink-0 place-items-center rounded-lg">
+            <Lightbulb className="size-4" />
+          </span>
+          <DialogDescription className="label-mono text-muted-foreground min-w-0 flex-1 text-xs">
+            Tip of the Day
+            {deck.length > 1 && ` · ${index + 1} of ${deck.length}`}
+          </DialogDescription>
+          <DialogClose asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close"
+              className="-mr-2 size-11 shrink-0 md:size-8"
+            >
+              <X className="size-4" />
+            </Button>
+          </DialogClose>
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-4 pt-2 pb-4">
+          {tip ? (
+            <>
+              {tip.media && <TipMedia key={tip.id} media={tip.media} />}
+              <DialogTitle className="text-base font-semibold">
+                {tip.title}
+              </DialogTitle>
+              <p className="text-muted-foreground text-sm leading-relaxed">
+                {tip.body}
+              </p>
+              {tip.url && (
+                <a
+                  href={tip.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary w-fit text-sm underline"
+                >
+                  Learn more
+                </a>
+              )}
+            </>
+          ) : (
+            <DialogTitle className="text-sm font-medium">
+              No tips right now.
+            </DialogTitle>
+          )}
+        </div>
+        <div className="bg-muted/40 flex items-center gap-2 px-4 py-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground h-11 px-2 md:h-8"
+            onClick={turnOff}
+          >
+            Don&apos;t show tips
+          </Button>
+          <div className="ml-auto flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Previous tip"
+              disabled={deck.length < 2}
+              onClick={() => step(-1)}
+              className="size-11 md:size-8"
+            >
+              <ChevronLeft className="size-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Next tip"
+              disabled={deck.length < 2}
+              onClick={() => step(1)}
+              className="size-11 md:size-8"
+            >
+              <ChevronRight className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Tips/TipHost.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useSnapshot } from "valtio";
+import { tipsActions, tipsStore } from "@/stores/tips";
+import { TipDialog } from "./TipDialog";
+
+/** Mounted once, near the top of the app: the footer icon opens it. */
+export function TipHost() {
+  const { open } = useSnapshot(tipsStore);
+  if (!open) return null;
+  return (
+    <TipDialog open onOpenChange={(next) => !next && tipsActions.close()} />
+  );
+}