@saadnvd1/agent-os 0.3.457 → 0.3.460

package/components/Chat/rowState.tsx

@@ -1,11 +1,44 @@
 "use client";
 
-import { createContext, useCallback, useContext, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
 // State a timeline row keeps across being scrolled out and back: the list
 // unmounts rows it doesn't show, so an opened step or a sized artifact would
 // otherwise start over each time it comes back. One store per conversation.
-export const RowState = createContext<Map<string, unknown> | null>(null);
+// Rows on screen hear a change made from outside them (find opening a step).
+export class RowStore {
+  private values = new Map<string, unknown>();
+  private listeners = new Map<string, Set<() => void>>();
+
+  has(key: string) {
+    return this.values.has(key);
+  }
+  get(key: string) {
+    return this.values.get(key);
+  }
+  set(key: string, value: unknown) {
+    if (this.values.get(key) === value && this.values.has(key)) return;
+    this.values.set(key, value);
+    for (const fn of this.listeners.get(key) ?? []) fn();
+  }
+  subscribe(key: string, fn: () => void): () => void {
+    let set = this.listeners.get(key);
+    if (!set) this.listeners.set(key, (set = new Set()));
+    set.add(fn);
+    return () => {
+      set.delete(fn);
+      if (!set.size) this.listeners.delete(key);
+    };
+  }
+}
+
+export const RowState = createContext<RowStore | null>(null);
 
 export function useRowState<T>(
   key: string,
@@ -15,10 +48,17 @@ export function useRowState<T>(
   const [value, setValue] = useState<T>(() =>
     store?.has(key) ? (store.get(key) as T) : initial
   );
+  useEffect(
+    () =>
+      store?.subscribe(key, () => {
+        if (store.has(key)) setValue(store.get(key) as T);
+      }),
+    [store, key]
+  );
   const set = useCallback(
     (next: T) => {
-      store?.set(key, next);
-      setValue(next);
+      if (store) store.set(key, next);
+      else setValue(next);
     },
     [store, key]
   );

package/components/Chat/stick-to-bottom.ts

@@ -206,6 +206,11 @@ export function stickToBottom(
   return {
     isStuck: () => stuck,
     pin,
+    /** Stops following, for a jump up the conversation (find). */
+    release() {
+      set(false);
+      pickAnchors();
+    },
     /** Back to the end, following again. */
     toBottom() {
       set(true);
@@ -271,8 +276,9 @@ export function useStickToBottom(
   }, [latest]);
 
   const toBottom = useCallback(() => ctl.current?.toBottom(), []);
+  const release = useCallback(() => ctl.current?.release(), []);
 
   const stuck = away === null;
   const unread = !stuck && away.seen !== latest;
-  return { stuck, unread, toBottom };
+  return { stuck, unread, toBottom, release };
 }

package/components/Chat/useFind.ts

@@ -0,0 +1,253 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ChatItem } from "@/lib/chat/events";
+import {
+  flattenHits,
+  joinPage,
+  locate,
+  MIN_QUERY,
+  stepIndex,
+  nextHits,
+  type FindResults as Results,
+  type FindTarget,
+  type SearchResult,
+} from "@/lib/chat/find";
+import { findRanges, paint, unpaint } from "./find-highlight";
+import type { RowStore } from "./rowState";
+
+// Asks the chat showing a session to open its find bar (the phone's header).
+export const FIND_EVENT = "agentos:find-in-chat";
+export const openFind = (sessionId: string) =>
+  window.dispatchEvent(new CustomEvent(FIND_EVENT, { detail: sessionId }));
+
+// ⌘F on a Mac, Ctrl+F elsewhere.
+export function isFindKey(e: {
+  key: string;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  shiftKey: boolean;
+}): boolean {
+  const mac =
+    typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad/.test(navigator.platform);
+  const mod = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+  return mod && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "f";
+}
+
+// How long to wait for a match's row to render (and a tool's output to load).
+const SETTLE_MS = 2000;
+// How long a placed match is held in view while the list settles around it
+// (rows measured, older pages landing), unless the reader scrolls first.
+const HOLD_MS = 800;
+const DEBOUNCE_MS = 150;
+
+// A match being shown, and the block it was found in.
+type Pinned = FindTarget & { block: string };
+
+export type FindStatus = "idle" | "searching" | "done" | "unavailable";
+
+export interface FindDeps {
+  search: (query: string, before?: number) => Promise<SearchResult | null>;
+  items: ChatItem[];
+  hasMore: boolean;
+  loadingOlder: boolean;
+  loadOlder: () => void;
+  rows: RowStore;
+  // Scrolls the list to a timeline block, and its scroll container.
+  scrollToBlock: (block: string) => Promise<void>;
+  scroller: () => HTMLElement | null;
+  // Stops following the end of the conversation.
+  release: () => void;
+}
+
+const blockEl = (root: HTMLElement, block: string) =>
+  root.querySelector<HTMLElement>(`[data-block="${CSS.escape(block)}"]`);
+
+// The element showing an item: its own row inside a block, or the block.
+function itemEl(root: HTMLElement, block: string, id: string) {
+  const b = blockEl(root, block);
+  return b?.querySelector<HTMLElement>(`[data-item="${CSS.escape(id)}"]`) ?? b;
+}
+
+// Scrolls `root` so `rect` sits a third of the way down, if it's out of view.
+function bringIntoView(root: HTMLElement, rect: DOMRect) {
+  const box = root.getBoundingClientRect();
+  if (rect.top >= box.top + 8 && rect.bottom <= box.bottom - 8) return;
+  root.scrollTop += rect.top - box.top - box.height / 3;
+}
+
+/**
+ * Find in a conversation: searches the stored conversation on the server,
+ * walks its results newest first, and brings each one on screen (loading
+ * older pages, opening folded rows) with its text highlighted.
+ */
+export function useFind(deps: FindDeps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<Results | null>(null);
+  const [index, setIndex] = useState(0);
+  const [status, setStatus] = useState<FindStatus>("idle");
+  const d = useRef(deps);
+  useEffect(() => {
+    d.current = deps;
+  });
+
+  // Each search answers only if it's still the latest one asked.
+  const asked = useRef(0);
+  useEffect(() => {
+    const q = query.trim();
+    const id = ++asked.current;
+    if (!open || q.length < MIN_QUERY) {
+      setResults(null);
+      setStatus("idle");
+      return;
+    }
+    setStatus("searching");
+    const timer = setTimeout(async () => {
+      const search = d.current.search;
+      const first = await search(q);
+      const more =
+        first && !first.hits.length && first.hasMore
+          ? await nextHits(search, q, first.cursor)
+          : null;
+      if (id !== asked.current) return;
+      setStatus(first ? "done" : "unavailable");
+      const r = first && { query: q, ...first };
+      setResults(r && more ? joinPage(r, more) : r);
+      setIndex(0);
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [open, query]);
+
+  const targets = useMemo(
+    () => (results ? flattenHits(results.hits) : []),
+    [results]
+  );
+  const target: FindTarget | undefined = targets[index];
+
+  const go = useCallback(
+    async (dir: 1 | -1) => {
+      const r = results;
+      if (!r || !targets.length) return;
+      const next = stepIndex(index, dir, targets.length, r.hasMore);
+      if (next !== "more") return setIndex(next);
+      const id = asked.current;
+      const page = await nextHits(d.current.search, r.query, r.cursor);
+      if (id !== asked.current || !page) return;
+      setResults(joinPage(r, page));
+      setIndex(page.hits.length ? targets.length : 0);
+    },
+    [results, targets, index]
+  );
+
+  // Going to a match: older pages load until it's there, then its rows open
+  // and it scrolls into view. Once per match, so new output arriving doesn't
+  // pull the reader back to it.
+  const shown = useRef<FindTarget | null>(null);
+  const [pinned, setPinned] = useState<Pinned | null>(null);
+  const { items, hasMore, loadingOlder } = deps;
+  useEffect(() => {
+    if (!open || !target || shown.current === target) return;
+    const { loadOlder, rows, release, scrollToBlock } = d.current;
+    const where = locate(items, target.id);
+    if (!where) {
+      if (!hasMore) shown.current = target;
+      else if (!loadingOlder) loadOlder();
+      return;
+    }
+    shown.current = target;
+    for (const key of where.open) rows.set(key, true);
+    release();
+    const pin = () =>
+      shown.current === target && setPinned({ ...target, block: where.block });
+    scrollToBlock(where.block).then(pin, pin);
+  }, [open, target, items, hasMore, loadingOlder]);
+
+  // Paints every match on screen, and the current one apart; the current one
+  // is scrolled to once its row (and a tool's loaded output) shows it.
+  const [owner] = useState(() => ({}));
+  useEffect(() => {
+    const root = d.current.scroller();
+    const q = results?.query;
+    if (!open || !root || !q) return unpaint(owner);
+    const current = pinned;
+    let frame = 0;
+    let placedAt = current ? 0 : -1;
+    let near = false;
+    let moved = false;
+    const started = Date.now();
+    const holding = () =>
+      placedAt > 0 && !moved && Date.now() - placedAt < HOLD_MS;
+    const draw = () => {
+      frame = 0;
+      const all = findRanges(root, q);
+      let mark: Range | null = null;
+      const el = current && itemEl(root, current.block, current.id);
+      if (el) {
+        const own = findRanges(el, q);
+        const exact = own.length > current.n;
+        mark = own[Math.min(current.n, own.length - 1)] ?? null;
+        if (!placedAt && (exact || Date.now() - started > SETTLE_MS)) {
+          bringIntoView(root, (mark ?? el).getBoundingClientRect());
+          placedAt = Date.now();
+        } else if (holding()) {
+          bringIntoView(root, (mark ?? el).getBoundingClientRect());
+        } else if (!placedAt && !near) {
+          // Its row is here and the rest is loading (a tool's output).
+          bringIntoView(root, el.getBoundingClientRect());
+          near = true;
+        }
+      }
+      paint(owner, all, mark);
+      if ((!placedAt && Date.now() - started < SETTLE_MS * 2) || holding())
+        schedule();
+    };
+    const schedule = () => {
+      frame ||= requestAnimationFrame(draw);
+    };
+    const watch = new MutationObserver(schedule);
+    watch.observe(root, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    const letGo = () => {
+      moved = true;
+    };
+    const input = ["wheel", "touchstart", "keydown", "pointerdown"] as const;
+    for (const type of input) root.addEventListener(type, letGo);
+    root.addEventListener("scroll", schedule, { passive: true });
+    schedule();
+    return () => {
+      cancelAnimationFrame(frame);
+      watch.disconnect();
+      root.removeEventListener("scroll", schedule);
+      for (const type of input) root.removeEventListener(type, letGo);
+      unpaint(owner);
+    };
+  }, [open, results, pinned, owner]);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setPinned(null);
+    shown.current = null;
+  }, []);
+
+  return {
+    open,
+    show: useCallback(() => setOpen(true), []),
+    close,
+    query,
+    setQuery,
+    status,
+    // 1-based, newest first; 0 with nothing found.
+    position: target ? index + 1 : 0,
+    // A capped count is a floor: never fewer than the matches walked so far.
+    total: Math.max(results?.total ?? 0, targets.length),
+    capped: results?.capped ?? false,
+    next: useCallback(() => go(1), [go]),
+    previous: useCallback(() => go(-1), [go]),
+  };
+}

package/components/Pane/MobileTabBar.tsx

@@ -23,6 +23,7 @@ import {
   Plus,
   Search,
   Terminal as TerminalIcon,
+  TextSearch,
   Users,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -80,6 +81,8 @@ interface MobileTabBarProps {
   onMenuClick?: () => void;
   onViewModeChange: (mode: ViewMode) => void;
   onSelectSession?: (sessionId: string) => void;
+  // Opens find in the chat on show (there's no ⌘F on a phone).
+  onFind?: () => void;
 }
 
 export function MobileTabBar({
@@ -93,6 +96,7 @@ export function MobileTabBar({
   onMenuClick,
   onViewModeChange,
   onSelectSession,
+  onFind,
 }: MobileTabBarProps) {
   // Find current session index and calculate prev/next
   const currentIndex = session
@@ -261,6 +265,20 @@ export function MobileTabBar({
         </button>
       </div>
 
+      {onFind && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Find in conversation"
+          onClick={(e) => {
+            e.stopPropagation();
+            onFind();
+          }}
+          className="-my-1.5 h-11 w-11 shrink-0"
+        >
+          <TextSearch className="h-4 w-4" />
+        </Button>
+      )}
       <Button
         variant="ghost"
         size="icon-sm"

package/components/Pane/index.tsx

@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { ConductorPanel } from "@/components/ConductorPanel";
 import { useFileEditor } from "@/hooks/useFileEditor";
 import { MobileTabBar } from "./MobileTabBar";
+import { openFind } from "@/components/Chat/useFind";
 import { DesktopTabBar } from "./DesktopTabBar";
 import {
   TerminalSkeleton,
@@ -402,6 +403,11 @@ export const Pane = memo(function Pane({
           onMenuClick={onMenuClick}
           onViewModeChange={setViewMode}
           onSelectSession={onSelectSession}
+          onFind={
+            activeTab && viewMode === "terminal" && chatSessionFor(activeTab)
+              ? () => openFind(activeTab.sessionId as string)
+              : undefined
+          }
         />
       ) : (
         <DesktopTabBar

package/components/Workspaces/FreshStartForm.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import type { RefreshSettings } from "@/lib/chat/refresh";
+import { useFreshStartQuery, useUpdateFreshStart } from "@/data/fresh-start";
+import { parseFreshStart } from "./fresh-start";
+
+// When a chat's agent starts a fresh conversation instead of carrying a
+// long one: app-wide, one threshold for orchestrators and one for tasks.
+export function FreshStartForm() {
+  const { data, isPending, isError, error } = useFreshStartQuery();
+  if (isPending)
+    return <div className="bg-muted/40 h-24 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive text-sm">{error.message}</p>;
+  return (
+    <Form key={`${data.orchestratorTokens}:${data.taskTokens}`} saved={data} />
+  );
+}
+
+function Form({ saved }: { saved: RefreshSettings }) {
+  const update = useUpdateFreshStart();
+  const orchestrator = useThreshold(saved.orchestratorTokens, 200);
+  const task = useThreshold(saved.taskTokens, 200);
+  const error = orchestrator.error ?? task.error;
+  const dirty =
+    !error &&
+    (orchestrator.tokens !== saved.orchestratorTokens ||
+      task.tokens !== saved.taskTokens);
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (error) return;
+        update.mutate(
+          { orchestratorTokens: orchestrator.tokens, taskTokens: task.tokens },
+          {
+            onSuccess: () => toast.success("Fresh starts saved"),
+            onError: (err) => toast.error(err.message),
+          }
+        );
+      }}
+      className="bg-muted/40 space-y-3 rounded-lg px-3 py-3"
+    >
+      <h3 className="text-sm font-medium">Fresh starts</h3>
+      <p className="text-muted-foreground text-sm">
+        When a conversation&apos;s context passes the threshold, its agent
+        starts a new one at the next turn boundary, with its brief. An
+        orchestrator also gets its rules and the workspace&apos;s current state,
+        so nothing is lost. A task keeps only its brief and its branch.
+      </p>
+      <ThresholdRow label="Orchestrators" field={orchestrator} />
+      <ThresholdRow label="Tasks" field={task} />
+      {error && <p className="text-destructive text-xs">{error}</p>}
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          size="sm"
+          className="h-11 sm:h-8"
+          disabled={!!error || !dirty || update.isPending}
+        >
+          Save
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+function useThreshold(tokens: number, fallbackK: number) {
+  const [on, setOn] = useState(tokens > 0);
+  const [text, setText] = useState(
+    String(tokens > 0 ? tokens / 1000 : fallbackK)
+  );
+  const parsed = parseFreshStart(on, text);
+  return {
+    on,
+    setOn,
+    text,
+    setText,
+    tokens: "tokens" in parsed ? parsed.tokens : tokens,
+    error: "error" in parsed ? parsed.error : null,
+  };
+}
+
+function ThresholdRow({
+  label,
+  field,
+}: {
+  label: string;
+  field: ReturnType<typeof useThreshold>;
+}) {
+  return (
+    <div className="space-y-2">
+      <label className="flex min-h-11 items-center justify-between gap-3 text-sm md:min-h-9">
+        {label}
+        <Switch
+          checked={field.on}
+          onCheckedChange={field.setOn}
+          aria-label={`Fresh starts for ${label.toLowerCase()}`}
+        />
+      </label>
+      {field.on && (
+        <label className="flex items-center justify-between gap-3 text-sm">
+          <span className="text-muted-foreground">At</span>
+          <span className="flex items-center gap-2">
+            <Input
+              type="number"
+              inputMode="numeric"
+              min={50}
+              step={10}
+              value={field.text}
+              onChange={(e) => field.setText(e.target.value)}
+              aria-label={`${label} threshold, thousands of tokens`}
+              aria-invalid={!!field.error}
+              className="h-11 w-24 text-base sm:h-9 md:text-sm"
+            />
+            <span className="text-muted-foreground">k tokens</span>
+          </span>
+        </label>
+      )}
+    </div>
+  );
+}

package/components/Workspaces/RulesForm.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Pencil, Trash2, X } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { RuleRow } from "@/lib/orchestrator/rules";
+import {
+  useAddRule,
+  useRemoveRule,
+  useRulesQuery,
+  useUpdateRule,
+} from "@/data/orchestrators/rules";
+
+const MAX_CHARS = 300;
+
+// The orchestrator's standing rules for one workspace: what it keeps
+// knowing across fresh starts. It adds them itself too; Saad edits here.
+export function RulesForm({ workspaceId }: { workspaceId: string }) {
+  const { data: rules, isPending, isError, error } = useRulesQuery(workspaceId);
+  const add = useAddRule(workspaceId);
+  const [text, setText] = useState("");
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm">Orchestrator rules</div>
+      {isPending ? (
+        <div className="bg-muted/60 h-11 animate-pulse rounded-md" />
+      ) : isError ? (
+        <p className="text-destructive text-xs">{error.message}</p>
+      ) : rules.length ? (
+        <ul className="space-y-1">
+          {rules.map((r) => (
+            <RuleItem key={`${r.id}:${r.text}`} rule={r} />
+          ))}
+        </ul>
+      ) : (
+        <p className="text-muted-foreground text-xs">
+          None yet. The orchestrator keeps one when you tell it something
+          standing, like a PR never to merge.
+        </p>
+      )}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (!text.trim()) return;
+          add.mutate(text, {
+            onSuccess: () => setText(""),
+            onError: (err) => toast.error(err.message),
+          });
+        }}
+        className="flex items-center gap-2"
+      >
+        <Input
+          value={text}
+          maxLength={MAX_CHARS}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="A PR never to merge, a URL, a house rule"
+          aria-label="New orchestrator rule"
+          className="h-11 text-base sm:h-9 md:text-sm"
+        />
+        <Button
+          type="submit"
+          size="sm"
+          className="h-11 sm:h-8"
+          disabled={!text.trim() || add.isPending}
+        >
+          Add
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+function RuleItem({ rule }: { rule: RuleRow }) {
+  const update = useUpdateRule(rule.workspace_id);
+  const remove = useRemoveRule(rule.workspace_id);
+  const [editing, setEditing] = useState(false);
+  const [text, setText] = useState(rule.text);
+
+  if (editing)
+    return (
+      <li>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            update.mutate(
+              { id: rule.id, text },
+              {
+                onSuccess: () => setEditing(false),
+                onError: (err) => toast.error(err.message),
+              }
+            );
+          }}
+          className="flex items-center gap-1"
+        >
+          <Input
+            autoFocus
+            value={text}
+            maxLength={MAX_CHARS}
+            onChange={(e) => setText(e.target.value)}
+            aria-label={`Rule ${rule.id}`}
+            className="h-11 text-base sm:h-9 md:text-sm"
+          />
+          <Button
+            type="submit"
+            variant="ghost"
+            size="icon"
+            className="size-11 shrink-0 sm:size-8"
+            disabled={!text.trim() || update.isPending}
+            aria-label="Save rule"
+          >
+            <Check className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-11 shrink-0 sm:size-8"
+            onClick={() => {
+              setText(rule.text);
+              setEditing(false);
+            }}
+            aria-label="Cancel"
+          >
+            <X className="size-4" />
+          </Button>
+        </form>
+      </li>
+    );
+
+  return (
+    <li className="bg-background/60 flex items-start gap-1 rounded-md py-1 pr-1 pl-2.5">
+      <div className="min-w-0 flex-1 py-1.5">
+        <p className="text-sm break-words">{rule.text}</p>
+        <p className="text-muted-foreground text-xs">
+          {rule.added_by === "saad" ? "You" : "Orchestrator"}
+        </p>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-11 shrink-0 sm:size-8"
+        onClick={() => setEditing(true)}
+        aria-label={`Edit rule: ${rule.text}`}
+      >
+        <Pencil className="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-11 shrink-0 sm:size-8"
+        disabled={remove.isPending}
+        onClick={() =>
+          remove.mutate(rule.id, {
+            onError: (err) => toast.error(err.message),
+          })
+        }
+        aria-label={`Remove rule: ${rule.text}`}
+      >
+        <Trash2 className="size-4" />
+      </Button>
+    </li>
+  );
+}