@saadnvd1/agent-os 0.3.680 → 0.3.691

package/README.md

@@ -43,7 +43,7 @@ and check on all of it from your phone.
 
 ## Install
 
-You need Node.js 20+, tmux, and at least one agent CLI (the installer offers to set up what's missing).
+You need Node.js 22+, tmux, and at least one agent CLI (the installer offers to set up what's missing).
 
 ```bash
 npm install -g @saadnvd1/agent-os
@@ -74,7 +74,7 @@ npm run check        # typecheck, lint, format and tests: what CI runs
 npm run screenshots  # regenerate screenshots/ from a demo instance with fake data
 ```
 
-A pre-commit hook checks formatting, secrets and banned terms on what is staged. Route handlers may not call `*Sync` functions, and git runs only through `lib/git-exec.ts`. More in [docs/reference/development.md](docs/reference/development.md).
+Dependencies install with pnpm, frozen to the lockfile, with a 7-day cooldown on new versions and an allowlist for install scripts: see [docs/reference/dependencies.md](docs/reference/dependencies.md) (it also covers adding a package that needs an install script and the override for an urgent security fix). A pre-commit hook checks formatting, secrets and banned terms on what is staged. Route handlers may not call `*Sync` functions, and git runs only through `lib/git-exec.ts`. More in [docs/reference/development.md](docs/reference/development.md).
 
 ## License
 

package/app/api/dev-servers/detect/route.ts

@@ -16,8 +16,7 @@ export async function GET(request: NextRequest) {
     }
 
     const project = queries.getProject(db).get(projectId) as
-      | Project
-      | undefined;
+      Project | undefined;
     if (!project) {
       return NextResponse.json({ error: "Project not found" }, { status: 404 });
     }

package/app/api/projects/[id]/dev-servers/[dsId]/route.ts

@@ -12,8 +12,7 @@ export async function PATCH(request: NextRequest, { params }: RouteParams) {
     const { dsId } = await params;
 
     const existing = queries.getProjectDevServer(db).get(dsId) as
-      | ProjectDevServer
-      | undefined;
+      ProjectDevServer | undefined;
     if (!existing) {
       return NextResponse.json(
         { error: "Dev server config not found" },
@@ -49,8 +48,7 @@ export async function DELETE(request: NextRequest, { params }: RouteParams) {
     const { dsId } = await params;
 
     const existing = queries.getProjectDevServer(db).get(dsId) as
-      | ProjectDevServer
-      | undefined;
+      ProjectDevServer | undefined;
     if (!existing) {
       return NextResponse.json(
         { error: "Dev server config not found" },

package/app/page.tsx

@@ -237,8 +237,7 @@ function HomeContent() {
 
   // Get terminal for a pane, with fallback to first available
   const getTerminalWithFallback = useCallback(():
-    | { terminal: TerminalHandle; paneId: string; tabId: string }
-    | undefined => {
+    { terminal: TerminalHandle; paneId: string; tabId: string } | undefined => {
     debugLog(
       `getTerminalWithFallback called, total refs: ${terminalRefs.current.size}, focusedPaneId: ${focusedPaneId}`
     );

package/components/Artifacts/ArtifactsPanel.tsx

@@ -141,7 +141,7 @@ export function ArtifactsPanel({
           </button>
         )}
       </div>
-      <div className="scrollbar-none mt-2.5 flex gap-1.5 overflow-x-auto">
+      <div className="mt-2.5 flex scrollbar-none gap-1.5 overflow-x-auto">
         {(Object.keys(FILTER_LABELS) as ArtifactFilter[])
           .filter((f) => f === "all" || tally[f])
           .map((f) => (

package/components/FileExplorer/FileTabs.tsx

@@ -41,7 +41,7 @@ export function FileTabs({
   return (
     <div
       ref={scrollRef}
-      className="bg-muted/30 scrollbar-none flex items-center gap-0.5 overflow-x-auto px-1"
+      className="bg-muted/30 flex scrollbar-none items-center gap-0.5 overflow-x-auto px-1"
     >
       {files.map((file) => {
         const isActive = file.path === activeFilePath;

package/components/Pane/DesktopTabBar.tsx

@@ -102,7 +102,7 @@ export function DesktopTabBar({
   return (
     <div
       className={cn(
-        "scrollbar-none @container/bar flex items-center gap-1 overflow-x-auto px-1.5 py-1.5 transition-colors",
+        "@container/bar flex scrollbar-none items-center gap-1 overflow-x-auto px-1.5 py-1.5 transition-colors",
         "shadow-[inset_0_-1px_0_hsl(var(--foreground)/0.06)]",
         isFocused ? "bg-foreground/[0.025]" : "bg-transparent"
       )}
@@ -110,7 +110,7 @@ export function DesktopTabBar({
       {leading}
 
       {/* Tabs */}
-      <div className="scrollbar-none flex min-w-28 flex-1 items-center gap-0.5 overflow-x-auto">
+      <div className="flex min-w-28 flex-1 scrollbar-none items-center gap-0.5 overflow-x-auto">
         {tabs.map((tab) => (
           <div
             key={tab.id}

package/components/QuickSwitcher.tsx

@@ -37,14 +37,33 @@ export function QuickSwitcher({
   currentSessionId,
   activeSessionWorkingDir,
 }: QuickSwitcherProps) {
-  const [mode, setMode] = useState<"sessions" | "code">("sessions");
-  const [query, setQuery] = useState("");
+  const [chosenMode, setMode] = useState<"sessions" | "code">("sessions");
+  const [query, setQueryState] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Check if ripgrep is available
   const { data: ripgrepAvailable } = useRipgrepAvailable();
 
+  // Code search needs ripgrep
+  const mode = ripgrepAvailable === false ? "sessions" : chosenMode;
+
+  const setQuery = (next: string) => {
+    setQueryState(next);
+    setSelectedIndex(0);
+  };
+
+  // Reset state when dialog opens
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setMode("sessions");
+      setQueryState("");
+      setSelectedIndex(0);
+    }
+  }
+
   // Filter sessions based on search query
   const filteredSessions = sessions.filter((session) => {
     if (!query) return true;
@@ -56,28 +75,12 @@ export function QuickSwitcher({
     );
   });
 
-  // Reset state when dialog opens
   useEffect(() => {
-    if (open) {
-      setMode("sessions");
-      setQuery("");
-      setSelectedIndex(0);
-      setTimeout(() => inputRef.current?.focus(), 50);
-    }
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(t);
   }, [open]);
 
-  // Force sessions mode if ripgrep is not available
-  useEffect(() => {
-    if (ripgrepAvailable === false && mode === "code") {
-      setMode("sessions");
-    }
-  }, [ripgrepAvailable, mode]);
-
-  // Reset selected index when filtered results change
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [query]);
-
   // Handle keyboard navigation
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {

package/components/SessionList/SessionRowMenu.tsx

@@ -32,7 +32,6 @@ import { selectionActions } from "@/stores/sessionSelection";
 import { schedulesUiActions } from "@/stores/schedulesUi";
 import { recipesUiActions } from "@/stores/recipesUi";
 import { rowGroup } from "@/lib/recipes/chip";
-import { finishActions } from "@/lib/sidebar/row-actions";
 import {
   useArchiveAction,
   useDoneAction,

package/components/Settings/ExperimentsSection.test.ts

@@ -3,7 +3,13 @@ import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-for (const key of ["Event", "CustomEvent", "FocusEvent", "HTMLButtonElement"])
+for (const key of [
+  "Event",
+  "CustomEvent",
+  "FocusEvent",
+  "HTMLButtonElement",
+  "HTMLFormElement",
+])
   Object.defineProperty(globalThis, key, {
     value: (window as unknown as Record<string, unknown>)[key],
     configurable: true,

package/components/Settings/NoApprovalsSection.test.ts

@@ -4,7 +4,13 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 // Radix dispatches its own events; they must be jsdom's, not Node's.
-for (const key of ["Event", "CustomEvent", "FocusEvent", "HTMLButtonElement"])
+for (const key of [
+  "Event",
+  "CustomEvent",
+  "FocusEvent",
+  "HTMLButtonElement",
+  "HTMLFormElement",
+])
   Object.defineProperty(globalThis, key, {
     value: (window as unknown as Record<string, unknown>)[key],
     configurable: true,

package/components/Terminal/TerminalToolbar.tsx

@@ -380,7 +380,7 @@ export function TerminalToolbar({
         onInsert={sendText}
       />
       <div
-        className="bg-background/95 border-border scrollbar-none flex items-center gap-1 overflow-x-auto border-t px-2 py-1.5 backdrop-blur"
+        className="bg-background/95 border-border flex scrollbar-none items-center gap-1 overflow-x-auto border-t px-2 py-1.5 backdrop-blur"
         onTouchEnd={(e) => e.stopPropagation()}
       >
         {/* Mic button */}

package/components/Terminal/VirtualKeyboard.tsx

@@ -295,7 +295,7 @@ function TerminalShortcutsBar({
         onClose={() => setShowPasteModal(false)}
         onPaste={handleModalPaste}
       />
-      <div className="scrollbar-none flex items-center gap-1.5 overflow-x-auto px-2 py-1.5">
+      <div className="flex scrollbar-none items-center gap-1.5 overflow-x-auto px-2 py-1.5">
         {/* Paste button */}
         <FastButton
           onPress={handlePaste}

package/components/WorkerCard.tsx

@@ -19,13 +19,7 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export type WorkerStatus =
-  | "pending"
-  | "running"
-  | "waiting"
-  | "idle"
-  | "completed"
-  | "failed"
-  | "dead";
+  "pending" | "running" | "waiting" | "idle" | "completed" | "failed" | "dead";
 
 export interface WorkerInfo {
   id: string;

package/components/Workspaces/WorkspaceNameDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -28,9 +28,11 @@ export function WorkspaceNameDialog({
   onClose,
 }: WorkspaceNameDialogProps) {
   const [name, setName] = useState(initialName);
-  useEffect(() => {
+  const [synced, setSynced] = useState({ open, initialName });
+  if (synced.open !== open || synced.initialName !== initialName) {
+    setSynced({ open, initialName });
     if (open) setName(initialName);
-  }, [open, initialName]);
+  }
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>

package/components/a/AButton.tsx

@@ -33,12 +33,7 @@ import { cn } from "@/lib/utils";
 
 export type AButtonSize = "sm" | "md" | "lg";
 export type AButtonVariant =
-  | "default"
-  | "ghost"
-  | "outline"
-  | "secondary"
-  | "destructive"
-  | "link";
+  "default" | "ghost" | "outline" | "secondary" | "destructive" | "link";
 
 export interface AButtonProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,

package/components/a/AIconButton.tsx

@@ -33,11 +33,7 @@ import { cn } from "@/lib/utils";
 
 export type AIconButtonSize = "sm" | "md" | "lg";
 export type AIconButtonHighlight =
-  | "blue"
-  | "green"
-  | "red"
-  | "orange"
-  | "purple";
+  "blue" | "green" | "red" | "orange" | "purple";
 
 export interface AIconButtonProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,

package/contexts/PaneContext.tsx

@@ -27,12 +27,7 @@ import {
 import { useViewport } from "@/hooks/useViewport";
 
 export type ViewMode =
-  | "terminal"
-  | "files"
-  | "git"
-  | "workers"
-  | "log"
-  | "artifacts";
+  "terminal" | "files" | "git" | "workers" | "log" | "artifacts";
 
 export interface PaneViewState {
   viewMode: ViewMode;

package/data/lumifyhub/index.ts

@@ -86,8 +86,7 @@ export function useLhWorkspaces(enabled: boolean) {
 }
 
 export type WorkspaceLinkTarget =
-  | { lhWorkspaceId: string }
-  | { create: true; name?: string };
+  { lhWorkspaceId: string } | { create: true; name?: string };
 
 export function useLinkWorkspace() {
   return useInvalidating(
@@ -120,8 +119,7 @@ export function useWorkspaceBoards(workspaceId: string | null) {
 }
 
 export type BoardLinkTarget =
-  | { boardId: string }
-  | { create: true; title?: string };
+  { boardId: string } | { create: true; title?: string };
 
 export function useLinkBoard() {
   return useInvalidating(

package/hooks/useDirectoryBrowser.ts

@@ -32,13 +32,14 @@ export function useDirectoryBrowser(options: UseDirectoryBrowserOptions = {}) {
   const currentPath = data?.resolvedPath || requestedPath;
 
   // Filter and sort files from query data
+  const dataFiles = data?.files;
   const files = useMemo(() => {
-    if (!data?.files) return [];
+    if (!dataFiles) return [];
     const items = filterRef.current
-      ? data.files.filter(filterRef.current)
-      : data.files;
+      ? dataFiles.filter(filterRef.current)
+      : dataFiles;
     return sortFiles(items);
-  }, [data?.files]);
+  }, [dataFiles]);
 
   const filteredFiles = useMemo(
     () =>

package/hooks/useDrawerAnimation.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 
 /**
  * Hook for smooth drawer enter animations.
@@ -6,22 +6,19 @@ import { useState, useEffect, useRef } from "react";
  */
 export function useDrawerAnimation(open: boolean) {
   const [isAnimatingIn, setIsAnimatingIn] = useState(false);
-  const hasAnimated = useRef(false);
 
   useEffect(() => {
-    if (open && !hasAnimated.current) {
-      hasAnimated.current = true;
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setIsAnimatingIn(true);
-        });
-      });
-    }
-    if (!open) {
-      hasAnimated.current = false;
+    if (!open) return;
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => setIsAnimatingIn(true));
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
       setIsAnimatingIn(false);
-    }
+    };
   }, [open]);
 
-  return isAnimatingIn;
+  return open && isAnimatingIn;
 }

package/hooks/useFileDrop.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useEffect, type RefObject } from "react";
+import { useState, useCallback, type RefObject } from "react";
 
 interface UseFileDropOptions {
   /** Disable drop handling (e.g., while uploading) */
@@ -29,11 +29,7 @@ export function useFileDrop(
   const [isDragging, setIsDragging] = useState(false);
 
   // Reset drag state when disabled
-  useEffect(() => {
-    if (options?.disabled) {
-      setIsDragging(false);
-    }
-  }, [options?.disabled]);
+  if (options?.disabled && isDragging) setIsDragging(false);
 
   const handleDragOver = useCallback(
     (e: React.DragEvent) => {

package/hooks/useKeybarVisibility.ts

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useCallback, useEffect } from "react";
+import { useCallback } from "react";
+import { useStoredFlag } from "./useStoredFlag";
 
 const STORAGE_KEY = "agentOS-keybar-visible";
 
@@ -9,34 +10,14 @@ const STORAGE_KEY = "agentOS-keybar-visible";
  * Default: hidden on mobile to maximize terminal space.
  */
 export function useKeybarVisibility() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  // Load persisted state on mount
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === "true") {
-      setIsVisible(true);
-    }
-  }, []);
-
-  const toggle = useCallback(() => {
-    setIsVisible((prev) => {
-      const next = !prev;
-      localStorage.setItem(STORAGE_KEY, String(next));
-      return next;
-    });
-  }, []);
-
-  const show = useCallback(() => {
-    setIsVisible(true);
-    localStorage.setItem(STORAGE_KEY, "true");
-  }, []);
-
-  const hide = useCallback(() => {
-    setIsVisible(false);
-    localStorage.setItem(STORAGE_KEY, "false");
-  }, []);
+  const [isVisible, setVisible] = useStoredFlag(STORAGE_KEY, false);
+
+  const toggle = useCallback(
+    () => setVisible(!isVisible),
+    [isVisible, setVisible]
+  );
+  const show = useCallback(() => setVisible(true), [setVisible]);
+  const hide = useCallback(() => setVisible(false), [setVisible]);
 
   return { isVisible, toggle, show, hide };
 }

package/hooks/useSidebarPinned.ts

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useCallback, useEffect } from "react";
+import { useCallback } from "react";
+import { useStoredFlag } from "./useStoredFlag";
 
 const STORAGE_KEY = "agentOS-sidebar-pinned";
 
@@ -11,29 +12,12 @@ const STORAGE_KEY = "agentOS-sidebar-pinned";
  * reveals on hover near the left edge.
  */
 export function useSidebarPinned() {
-  const [isPinned, setIsPinned] = useState(true);
+  const [isPinned, setPinned] = useStoredFlag(STORAGE_KEY, true);
 
-  // Load persisted state on mount
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === "false") {
-      setIsPinned(false);
-    }
-  }, []);
-
-  const setPinned = useCallback((pinned: boolean) => {
-    setIsPinned(pinned);
-    localStorage.setItem(STORAGE_KEY, String(pinned));
-  }, []);
-
-  const togglePin = useCallback(() => {
-    setIsPinned((prev) => {
-      const next = !prev;
-      localStorage.setItem(STORAGE_KEY, String(next));
-      return next;
-    });
-  }, []);
+  const togglePin = useCallback(
+    () => setPinned(!isPinned),
+    [isPinned, setPinned]
+  );
 
   return { isPinned, togglePin, setPinned };
 }

package/hooks/useSpeechRecognition.ts

@@ -1,6 +1,12 @@
 "use client";
 
-import { useState, useRef, useCallback, useEffect } from "react";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useSyncExternalStore,
+} from "react";
 
 // Web Speech API types
 interface SpeechRecognitionEvent extends Event {
@@ -46,19 +52,27 @@ declare global {
   }
 }
 
+const noopSubscribe = () => () => {};
+
+function getSpeechRecognitionAPI() {
+  return window.SpeechRecognition || window.webkitSpeechRecognition;
+}
+
 export function useSpeechRecognition(
   onTranscript: (text: string, isFinal: boolean) => void
 ) {
   const [isListening, setIsListening] = useState(false);
-  const [isSupported, setIsSupported] = useState(false);
+  const isSupported = useSyncExternalStore(
+    noopSubscribe,
+    () => !!getSpeechRecognitionAPI(),
+    () => false
+  );
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const lastTranscriptRef = useRef("");
 
   useEffect(() => {
     // Check for browser support
-    const SpeechRecognitionAPI =
-      window.SpeechRecognition || window.webkitSpeechRecognition;
-    setIsSupported(!!SpeechRecognitionAPI);
+    const SpeechRecognitionAPI = getSpeechRecognitionAPI();
 
     if (SpeechRecognitionAPI) {
       const recognition = new SpeechRecognitionAPI();

package/hooks/useStoredFlag.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+const listeners = new Set<() => void>();
+
+function subscribe(fn: () => void) {
+  listeners.add(fn);
+  window.addEventListener("storage", fn);
+  return () => {
+    listeners.delete(fn);
+    window.removeEventListener("storage", fn);
+  };
+}
+
+function read(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+// A boolean kept in localStorage, shared by every caller on the page. The
+// server and the hydrating render see `fallback`; the stored value follows.
+export function useStoredFlag(
+  key: string,
+  fallback: boolean
+): [boolean, (next: boolean) => void] {
+  const value = useSyncExternalStore(
+    subscribe,
+    () => read(key),
+    () => null
+  );
+  const set = useCallback(
+    (next: boolean) => {
+      try {
+        localStorage.setItem(key, String(next));
+      } catch {
+        // Storage unavailable: the choice lasts until reload.
+      }
+      listeners.forEach((fn) => fn());
+    },
+    [key]
+  );
+  return [value === null ? fallback : value === "true", set];
+}

package/hooks/useViewport.ts

@@ -1,28 +1,22 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useSyncExternalStore } from "react";
+import { useMediaQuery } from "./useMediaQuery";
+
+const noop = () => () => {};
 
 /**
  * Mobile-first viewport detection hook
  * Breakpoint: 768px (md in Tailwind)
  */
 export function useViewport() {
-  const [isMobile, setIsMobile] = useState(false);
-  const [isHydrated, setIsHydrated] = useState(false);
-
-  useEffect(() => {
-    const checkViewport = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
-    // Initial check
-    checkViewport();
-    setIsHydrated(true);
-
-    // Listen for resize
-    window.addEventListener("resize", checkViewport);
-    return () => window.removeEventListener("resize", checkViewport);
-  }, []);
+  const isMobile = useMediaQuery("(max-width: 767.98px)");
+  // False on the server and while hydrating, true after.
+  const isHydrated = useSyncExternalStore(
+    noop,
+    () => true,
+    () => false
+  );
 
   return {
     isMobile,

package/lib/approvals/no-approvals.ts

@@ -14,13 +14,7 @@ import { markAllStatusDirty } from "../status/dirty";
 export const NO_APPROVALS_KEY = "approvals.none";
 
 export type AuditSource =
-  | "ask"
-  | "brake"
-  | "plan"
-  | "chat"
-  | "terminal"
-  | "merge-approval"
-  | "mode";
+  "ask" | "brake" | "plan" | "chat" | "terminal" | "merge-approval" | "mode";
 
 export interface AuditRow {
   id: number;