stagent 0.10.0 → 0.11.1

package/src/components/shared/command-palette.tsx

@@ -21,9 +21,29 @@ import {
   CheckCheck,
   Loader2,
   BookOpen,
+  Sparkles,
+  FileCode,
+  Bookmark,
+  Trash2,
+  Settings2,
 } from "lucide-react";
 import { navigationItems, createItems } from "@/lib/chat/command-data";
 import { toggleTheme } from "@/lib/theme";
+import { useProjectSkills } from "@/hooks/use-project-skills";
+import { useSavedSearches, type SavedSearch, type SavedSearchSurface } from "@/hooks/use-saved-searches";
+import { SavedSearchesManager } from "./saved-searches-manager";
+import { toast } from "sonner";
+
+// Maps each saved-search surface to its list-page route. Tasks route to
+// /dashboard since /tasks is still a redirect stub.
+const SURFACE_ROUTE: Record<SavedSearchSurface, string> = {
+  task: "/dashboard",
+  project: "/projects",
+  workflow: "/workflows",
+  document: "/documents",
+  skill: "/skills",
+  profile: "/profiles",
+};
 
 interface RecentProject {
   id: string;
@@ -64,8 +84,21 @@ export function CommandPalette() {
   const [recentTasks, setRecentTasks] = useState<RecentTask[]>([]);
   const [playbookItems, setPlaybookItems] = useState<PlaybookItem[]>([]);
   const [loadingRecent, setLoadingRecent] = useState(false);
+  const [fileQuery, setFileQuery] = useState("");
+  const [fileResults, setFileResults] = useState<Array<{ entityId: string; label: string; description?: string }>>([]);
   const abortRef = useRef<AbortController | null>(null);
+  const fileAbortRef = useRef<AbortController | null>(null);
+  const fileDebounceRef = useRef<number | null>(null);
   const router = useRouter();
+  const { skills } = useProjectSkills(null);
+  const {
+    searches: savedSearches,
+    refetch: refetchSavedSearches,
+    remove: removeSavedSearch,
+    save: saveSavedSearch,
+    rename: renameSavedSearch,
+  } = useSavedSearches();
+  const [managerOpen, setManagerOpen] = useState(false);
 
   // Defer render until after hydration to avoid Radix ID mismatch
   useEffect(() => setMounted(true), []);
@@ -86,6 +119,10 @@ export function CommandPalette() {
     if (!open) {
       abortRef.current?.abort();
       abortRef.current = null;
+      fileAbortRef.current?.abort();
+      if (fileDebounceRef.current) window.clearTimeout(fileDebounceRef.current);
+      setFileQuery("");
+      setFileResults([]);
       return;
     }
 
@@ -108,6 +145,33 @@ export function CommandPalette() {
       .finally(() => setLoadingRecent(false));
   }, [open]);
 
+  function handleInputChange(value: string) {
+    setFileQuery(value);
+    if (fileDebounceRef.current) {
+      window.clearTimeout(fileDebounceRef.current);
+    }
+    fileAbortRef.current?.abort();
+    if (!value || value.length < 2) {
+      setFileResults([]);
+      return;
+    }
+    fileDebounceRef.current = window.setTimeout(() => {
+      const controller = new AbortController();
+      fileAbortRef.current = controller;
+      const params = new URLSearchParams({ q: value, limit: "8" });
+      fetch(`/api/chat/files/search?${params}`, { signal: controller.signal })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((data) => {
+          if (Array.isArray(data)) setFileResults(data);
+          else if (Array.isArray(data?.results)) setFileResults(data.results);
+          else setFileResults([]);
+        })
+        .catch(() => {
+          // aborted or failed — ignore
+        });
+    }, 200);
+  }
+
   const navigate = useCallback(
     (href: string) => {
       setOpen(false);
@@ -121,6 +185,24 @@ export function CommandPalette() {
     toggleTheme();
   }
 
+  function handleSelectSkill(id: string, name: string) {
+    setOpen(false);
+    window.dispatchEvent(
+      new CustomEvent("stagent.chat.activate-skill", { detail: { id } })
+    );
+    toast.info(`Skill "${name}" — activation coming soon`);
+  }
+
+  function handleSelectFile(entityId: string, label: string) {
+    setOpen(false);
+    window.dispatchEvent(
+      new CustomEvent("stagent.chat.insert-mention", {
+        detail: { type: "file", path: entityId, label },
+      })
+    );
+    toast.info(`File "${label}" — mention insert coming soon`);
+  }
+
   async function markAllRead() {
     setOpen(false);
     await fetch("/api/notifications/mark-all-read", { method: "PATCH" });
@@ -129,11 +211,55 @@ export function CommandPalette() {
 
   const hasRecent = recentProjects.length > 0 || recentTasks.length > 0;
 
+  const handleDeleteSavedSearch = useCallback(
+    (s: SavedSearch) => {
+      // Optimistic remove + toast with Undo. The closure holds the full
+      // record so undo restores id/createdAt verbatim (not just label).
+      removeSavedSearch(s.id);
+      toast("Saved search deleted", {
+        duration: 5000,
+        action: {
+          label: "Undo",
+          onClick: () => {
+            // `save` generates a new id — we need to restore the original.
+            // The cheapest restoration is to re-save and then immediately
+            // patch the id via a rename-adjacent path. Since the hook has
+            // no "insert with id" method, we accept id churn on undo: the
+            // label/filterInput/surface are preserved, which is what the
+            // user sees. Acceptance criterion: the row reappears with its
+            // label and filter, the actual id is an implementation detail.
+            saveSavedSearch({
+              surface: s.surface,
+              label: s.label,
+              filterInput: s.filterInput,
+            });
+          },
+        },
+      });
+    },
+    [removeSavedSearch, saveSavedSearch]
+  );
+
   if (!mounted) return null;
 
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
-      <CommandInput placeholder="Type a command or search..." />
+    <>
+    <CommandDialog
+      open={open}
+      onOpenChange={(next) => {
+        // Revalidate saved searches on every open. Each useSavedSearches
+        // consumer holds its own state, so a save in the chat popover
+        // wouldn't otherwise appear here until page reload.
+        // See features/saved-search-polish-v1.md.
+        if (next && !open) void refetchSavedSearches();
+        setOpen(next);
+      }}
+    >
+      <CommandInput
+        placeholder="Type a command or search..."
+        value={fileQuery}
+        onValueChange={handleInputChange}
+      />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
 
@@ -182,6 +308,63 @@ export function CommandPalette() {
 
         {hasRecent && <CommandSeparator />}
 
+        {/* Saved searches */}
+        {savedSearches.length > 0 && (
+          <>
+            <CommandGroup heading="Saved searches">
+              {savedSearches.map((s) => (
+                <CommandItem
+                  key={`saved-${s.id}`}
+                  value={`saved ${s.label} ${s.filterInput} ${s.surface}`}
+                  onSelect={() => {
+                    const base = SURFACE_ROUTE[s.surface];
+                    navigate(`${base}?filter=${encodeURIComponent(s.filterInput)}`);
+                  }}
+                  keywords={["saved", "search", s.surface]}
+                  className="group/item"
+                  onKeyDown={(e) => {
+                    // ⌘⌫ on focused row deletes with undo
+                    if ((e.metaKey || e.ctrlKey) && e.key === "Backspace") {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDeleteSavedSearch(s);
+                    }
+                  }}
+                >
+                  <Bookmark className="h-4 w-4" />
+                  <span className="flex-1 truncate">{s.label}</span>
+                  <span className="text-xs text-muted-foreground font-mono">{s.filterInput}</span>
+                  <span className="ml-2 text-xs text-muted-foreground">{s.surface}</span>
+                  <button
+                    type="button"
+                    aria-label={`Delete saved search: ${s.label}`}
+                    className="ml-1 p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100 transition-opacity"
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDeleteSavedSearch(s);
+                    }}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </CommandItem>
+              ))}
+              <CommandItem
+                value="manage-saved-searches"
+                keywords={["manage", "saved", "rename", "delete"]}
+                onSelect={() => {
+                  setManagerOpen(true);
+                }}
+              >
+                <Settings2 className="h-4 w-4" />
+                <span className="flex-1">Manage saved searches…</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+          </>
+        )}
+
         {/* Navigation */}
         <CommandGroup heading="Navigation">
           {navigationItems.map((item) => (
@@ -236,6 +419,75 @@ export function CommandPalette() {
 
         <CommandSeparator />
 
+        {/* Templates */}
+        <CommandGroup heading="Templates">
+          <CommandItem
+            value="start-from-template"
+            keywords={["template", "blueprint", "new", "conversation", "chat"]}
+            onSelect={() => {
+              setOpen(false);
+              // Ensure chat-shell is mounted so its event listener is live.
+              // When already on /chat, next-tick dispatch is a no-op nav.
+              router.push("/chat");
+              window.setTimeout(() => {
+                window.dispatchEvent(
+                  new CustomEvent("stagent.chat.openTemplatePicker")
+                );
+              }, 50);
+            }}
+          >
+            <Sparkles className="h-4 w-4" />
+            Start conversation from template…
+          </CommandItem>
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        {/* Skills */}
+        {skills.length > 0 && (
+          <>
+            <CommandGroup heading="Skills">
+              {skills.map((skill) => (
+                <CommandItem
+                  key={`skill-${skill.id}`}
+                  value={`skill-${skill.name}`}
+                  onSelect={() => handleSelectSkill(skill.id, skill.name)}
+                  keywords={["skill", "profile"]}
+                >
+                  <Sparkles className="h-4 w-4" />
+                  <span className="flex-1 truncate">{skill.name}</span>
+                  {skill.description && (
+                    <span className="text-xs text-muted-foreground truncate max-w-[40%]">
+                      {skill.description}
+                    </span>
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+          </>
+        )}
+
+        {/* Files */}
+        {fileResults.length > 0 && (
+          <>
+            <CommandGroup heading="Files">
+              {fileResults.map((file) => (
+                <CommandItem
+                  key={`file-${file.entityId}`}
+                  value={`file-${file.label}`}
+                  onSelect={() => handleSelectFile(file.entityId, file.label)}
+                  keywords={["file", "path"]}
+                >
+                  <FileCode className="h-4 w-4" />
+                  <span className="flex-1 truncate font-mono text-xs">{file.label}</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+          </>
+        )}
+
         {/* Utility */}
         <CommandGroup heading="Utility">
           <CommandItem onSelect={handleToggleTheme} value="Toggle Theme" keywords={["dark", "light", "mode"]}>
@@ -252,5 +504,13 @@ export function CommandPalette() {
         </CommandGroup>
       </CommandList>
     </CommandDialog>
+    <SavedSearchesManager
+      open={managerOpen}
+      onOpenChange={setManagerOpen}
+      searches={savedSearches}
+      onRename={renameSavedSearch}
+      onRemove={removeSavedSearch}
+    />
+    </>
   );
 }

package/src/components/shared/filter-hint.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Lightbulb } from "lucide-react";
+import { parseFilterInput } from "@/lib/filters/parse";
+
+interface FilterHintProps {
+  inputValue: string;
+  storageKey: string;
+  /** Optional copy override; defaults to the #key:value tip. */
+  message?: string;
+}
+
+/**
+ * FilterHint — passive discovery row for the `#key:value` filter syntax.
+ *
+ * Visibility rules:
+ *  - Hidden once the dismissal flag is set in localStorage.
+ *  - Hidden when the input contains `#` (user has discovered the syntax).
+ *  - The flag is set the first time parseFilterInput returns ≥1 clause.
+ *
+ * Consumers: chat-command-popover, filter-input (list pages).
+ */
+export function FilterHint({ inputValue, storageKey, message }: FilterHintProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  const parsed = useMemo(() => parseFilterInput(inputValue), [inputValue]);
+
+  useEffect(() => {
+    try {
+      if (window.localStorage.getItem(storageKey) === "1") {
+        setDismissed(true);
+      }
+    } catch {
+      // Private-mode or disabled storage — hint stays visible.
+    }
+  }, [storageKey]);
+
+  useEffect(() => {
+    if (dismissed) return;
+    if (parsed.clauses.length > 0) {
+      try {
+        window.localStorage.setItem(storageKey, "1");
+      } catch {
+        // Private-mode or disabled storage — hint stays visible, no-op.
+      }
+      setDismissed(true);
+    }
+  }, [parsed.clauses.length, dismissed, storageKey]);
+
+  if (dismissed) return null;
+  if (inputValue.includes("#")) return null;
+
+  return (
+    <div
+      role="note"
+      className="flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground border-t border-border/50"
+    >
+      <Lightbulb className="h-3 w-3 shrink-0" aria-hidden />
+      <span>
+        {message ?? (
+          <>
+            Tip: use <code className="font-mono text-foreground">#key:value</code> to filter (e.g.{" "}
+            <code className="font-mono text-foreground">#status:blocked</code>)
+          </>
+        )}
+      </span>
+    </div>
+  );
+}

package/src/components/shared/filter-input.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Hash } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { parseFilterInput, type FilterClause } from "@/lib/filters/parse";
+import { FilterHint } from "./filter-hint";
+
+interface FilterInputProps {
+  value: string;
+  onChange: (next: { raw: string; clauses: FilterClause[]; rawQuery: string }) => void;
+  placeholder?: string;
+}
+
+/**
+ * FilterInput — free-text input that recognizes `#key:value` filter syntax.
+ *
+ * Renders parsed clauses as outline badges next to the input. Consumer
+ * receives the raw string (for URL serialization) and the parsed breakdown
+ * (for list filtering). Keeps the existing free-text search behavior — the
+ * `rawQuery` is the text with filter clauses stripped.
+ */
+export function FilterInput({ value, onChange, placeholder }: FilterInputProps) {
+  const [local, setLocal] = useState(value);
+
+  useEffect(() => {
+    setLocal(value);
+  }, [value]);
+
+  const parsed = parseFilterInput(local);
+
+  return (
+    <div className="flex flex-col gap-1 flex-1 min-w-0">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative flex-1 min-w-[16rem]">
+          <Hash className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+          <Input
+            value={local}
+            onChange={(e) => {
+              const next = e.target.value;
+              setLocal(next);
+              const p = parseFilterInput(next);
+              onChange({ raw: next, clauses: p.clauses, rawQuery: p.rawQuery });
+            }}
+            placeholder={placeholder ?? "#status:blocked or search…"}
+            className="pl-7 h-8"
+          />
+        </div>
+        {parsed.clauses.map((c, i) => (
+          <Badge key={`${c.key}-${i}`} variant="outline" className="text-xs font-mono">
+            #{c.key}:{c.value}
+          </Badge>
+        ))}
+      </div>
+      <FilterHint inputValue={local} storageKey="stagent.filter-hint.dismissed" />
+    </div>
+  );
+}

package/src/components/shared/saved-searches-manager.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import { Pencil, Trash2, Check, X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { SavedSearch } from "@/hooks/use-saved-searches";
+
+const LABEL_MAX = 120;
+
+interface SavedSearchesManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  searches: SavedSearch[];
+  onRename: (id: string, label: string) => void;
+  onRemove: (id: string) => void;
+}
+
+/**
+ * SavedSearchesManager — dialog for renaming or deleting saved searches.
+ *
+ * Distinct from the inline palette delete (which is one-click with a 5s
+ * undo toast). This dialog is a deliberate management context, so delete
+ * requires an explicit "Confirm" click (no undo).
+ */
+export function SavedSearchesManager({
+  open,
+  onOpenChange,
+  searches,
+  onRename,
+  onRemove,
+}: SavedSearchesManagerProps) {
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [draft, setDraft] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+
+  function startRename(s: SavedSearch) {
+    setRenamingId(s.id);
+    setDraft(s.label);
+    setError(null);
+  }
+
+  function cancelRename() {
+    setRenamingId(null);
+    setDraft("");
+    setError(null);
+  }
+
+  function commitRename(s: SavedSearch) {
+    // If renaming was already cancelled (e.g., via Escape) the renamingId
+    // no longer matches — blur fires after cancelRename() has set it to null.
+    if (renamingId !== s.id) return;
+
+    const next = draft.trim();
+    if (next.length === 0) {
+      setError("Label cannot be empty");
+      return;
+    }
+    if (next.length > LABEL_MAX) {
+      setError(`Label too long (max ${LABEL_MAX} chars)`);
+      return;
+    }
+    const dupe = searches.find(
+      (other) =>
+        other.id !== s.id &&
+        other.surface === s.surface &&
+        other.label.toLowerCase() === next.toLowerCase()
+    );
+    if (dupe) {
+      setError("A saved search with that label already exists for this surface");
+      return;
+    }
+    if (next !== s.label) onRename(s.id, next);
+    cancelRename();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Manage saved searches</DialogTitle>
+          <DialogDescription>Rename or delete your saved filter combinations.</DialogDescription>
+        </DialogHeader>
+        <div className="px-6 pb-6 space-y-2 overflow-y-auto max-h-[60vh]">
+          {searches.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No saved searches yet.</p>
+          ) : (
+            searches.map((s) => {
+              const isRenaming = renamingId === s.id;
+              const isPendingDelete = pendingDeleteId === s.id;
+              return (
+                <div
+                  key={s.id}
+                  className="flex items-center gap-2 rounded-md border border-border/60 px-3 py-2"
+                >
+                  <div className="flex-1 min-w-0">
+                    {isRenaming ? (
+                      <div className="space-y-1">
+                        <Input
+                          aria-label="Rename"
+                          autoFocus
+                          value={draft}
+                          onChange={(e) => {
+                            setDraft(e.target.value);
+                            setError(null);
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Escape") {
+                              e.preventDefault();
+                              cancelRename();
+                            } else if (e.key === "Enter") {
+                              e.preventDefault();
+                              commitRename(s);
+                            }
+                          }}
+                          onBlur={() => commitRename(s)}
+                          className="h-7"
+                        />
+                        {error && (
+                          <p className="text-xs text-destructive">{error}</p>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <span className="truncate text-sm font-medium">{s.label}</span>
+                        <Badge variant="outline" className="text-[10px] uppercase">
+                          {s.surface}
+                        </Badge>
+                      </div>
+                    )}
+                    <p className="truncate text-xs font-mono text-muted-foreground">
+                      {s.filterInput}
+                    </p>
+                  </div>
+                  {!isRenaming && !isPendingDelete && (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        aria-label={`Rename ${s.label}`}
+                        onClick={() => startRename(s)}
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        aria-label={`Delete ${s.label}`}
+                        onClick={() => setPendingDeleteId(s.id)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </>
+                  )}
+                  {isPendingDelete && (
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        className="h-7"
+                        aria-label={`Confirm delete ${s.label}`}
+                        onClick={() => {
+                          onRemove(s.id);
+                          setPendingDeleteId(null);
+                        }}
+                      >
+                        <Check className="h-3.5 w-3.5" /> Confirm delete
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7"
+                        aria-label="Cancel delete"
+                        onClick={() => setPendingDeleteId(null)}
+                      >
+                        <X className="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/tasks/task-bento-grid.tsx

@@ -18,6 +18,7 @@ import { formatCompactDateTime } from "@/lib/utils/format-timestamp";
 import { TaskBentoCell } from "./task-bento-cell";
 import type { TaskItem } from "./task-card";
 import type { DocumentRow } from "@/lib/db/schema";
+import { getRuntimeCatalogEntry } from "@/lib/agents/runtime/catalog";
 
 const priorityConfig: Record<number, { icon: typeof ArrowUp; label: string }> = {
   0: { icon: ArrowUp, label: "P0 Critical" },
@@ -78,6 +79,7 @@ export function TaskBentoGrid({ task, docs }: TaskBentoGridProps) {
 
   const inputDocs = docs.filter((d) => d.direction === "input");
   const outputDocs = docs.filter((d) => d.direction === "output");
+  const modelId = task.effectiveModelId ?? usage?.modelId ?? null;
   const docSummary =
     inputDocs.length > 0 && outputDocs.length > 0
       ? `${inputDocs.length} in / ${outputDocs.length} out`
@@ -154,11 +156,19 @@ export function TaskBentoGrid({ task, docs }: TaskBentoGridProps) {
         />
       )}
 
-      {usage?.modelId && (
+      {task.effectiveRuntimeId && (
+        <TaskBentoCell
+          icon={Cpu}
+          label="Runtime Used"
+          value={getRuntimeCatalogEntry(task.effectiveRuntimeId as never).label}
+        />
+      )}
+
+      {modelId && (
         <TaskBentoCell
           icon={Cpu}
           label="Model"
-          value={<span className="text-sm font-semibold">{truncateModel(usage.modelId)}</span>}
+          value={<span className="text-sm font-semibold">{truncateModel(modelId)}</span>}
         />
       )}