stagent 0.10.0 → 0.11.1

package/src/components/chat/chat-input.tsx

@@ -6,11 +6,14 @@ import { Square } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ChatModelSelector } from "./chat-model-selector";
 import { ChatCommandPopover } from "./chat-command-popover";
+import { CapabilityBanner } from "./capability-banner";
 import { useChatAutocomplete, type MentionReference } from "@/hooks/use-chat-autocomplete";
 import { getToolCatalog } from "@/lib/chat/tool-catalog";
 import { useProjectSkills } from "@/hooks/use-project-skills";
 import { toggleTheme } from "@/lib/theme";
 import type { ChatModelOption } from "@/lib/chat/types";
+import { getRuntimeForModel } from "@/lib/chat/types";
+import { resolveAgentRuntime } from "@/lib/agents/runtime/catalog";
 
 interface ChatInputProps {
   onSend: (content: string, mentions?: MentionReference[]) => void;
@@ -22,6 +25,13 @@ interface ChatInputProps {
   onModelChange?: (modelId: string) => void;
   availableModels?: ChatModelOption[];
   projectId?: string | null;
+  /**
+   * Conversation id. When set, the input hydrates an initial draft from
+   * `sessionStorage["chat:prefill:<id>"]` on mount (one-shot, removed after
+   * read). Used by the conversation-template-picker to seed the composer
+   * without a schema change.
+   */
+  conversationId?: string | null;
 }
 
 export function ChatInput({
@@ -34,12 +44,45 @@ export function ChatInput({
   onModelChange,
   availableModels,
   projectId,
+  conversationId,
 }: ChatInputProps) {
   const [value, setValue] = useState("");
+
+  // One-shot hydration from sessionStorage when this input mounts for a
+  // conversation that was just created from a template. Two keys:
+  //  1. `chat:prefill:<id>` — per-id slot (survives across hero→docked mount)
+  //  2. `chat:prefill:pending` — id-less slot written by the template picker
+  //     BEFORE it awaits createConversation (race-order safe: by the time
+  //     createConversation resolves, this effect has already fired).
+  // Key is removed after read so page reload doesn't re-inject.
+  useEffect(() => {
+    if (!conversationId) return;
+    try {
+      const idKey = `chat:prefill:${conversationId}`;
+      const byId = window.sessionStorage.getItem(idKey);
+      const pending = window.sessionStorage.getItem("chat:prefill:pending");
+      const seed = byId ?? pending;
+      if (seed && seed.length > 0) {
+        setValue(seed);
+      }
+      // Always clear both slots after consumption so reload / nav doesn't
+      // re-inject. Clearing even when seed is null is safe — the keys either
+      // don't exist (noop) or belong to a stale prior flow.
+      window.sessionStorage.removeItem(idKey);
+      window.sessionStorage.removeItem("chat:prefill:pending");
+    } catch {
+      // sessionStorage access can throw in some browser modes — silently
+      // fall back to an empty composer.
+    }
+  }, [conversationId]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const autocomplete = useChatAutocomplete();
+  const autocomplete = useChatAutocomplete({ projectId });
   const { skills: projectSkills } = useProjectSkills(projectId);
 
+  const effectiveRuntime = resolveAgentRuntime(
+    modelId ? getRuntimeForModel(modelId) : null
+  );
+
   // Sync textarea ref with autocomplete hook
   useEffect(() => {
     autocomplete.setTextareaRef(textareaRef.current);
@@ -60,6 +103,35 @@ export function ChatInput({
     }
   }, [value, isStreaming, onSend, autocomplete.mentions]);
 
+  const executeSessionCommand = useCallback((name: string) => {
+    switch (name) {
+      case "toggle_theme":
+        toggleTheme();
+        return;
+      case "mark_all_read":
+        fetch("/api/notifications/mark-all-read", { method: "PATCH" });
+        return;
+      case "clear":
+        window.dispatchEvent(new CustomEvent("stagent.chat.clear"));
+        return;
+      case "compact":
+        window.dispatchEvent(new CustomEvent("stagent.chat.compact"));
+        return;
+      case "export":
+        window.dispatchEvent(new CustomEvent("stagent.chat.export"));
+        return;
+      case "help":
+        window.dispatchEvent(new CustomEvent("stagent.chat.help"));
+        return;
+      case "settings":
+        window.location.href = "/settings";
+        return;
+      case "new-from-template":
+        window.dispatchEvent(new CustomEvent("stagent.chat.openTemplatePicker"));
+        return;
+    }
+  }, []);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       // Let autocomplete handle keys first when popover is open
@@ -67,6 +139,24 @@ export function ChatInput({
         return;
       }
 
+      const cmd = e.metaKey || e.ctrlKey;
+      if (cmd && (e.key === "l" || e.key === "L")) {
+        e.preventDefault();
+        if (!isStreaming) executeSessionCommand("clear");
+        return;
+      }
+      if (cmd && e.key === "/") {
+        e.preventDefault();
+        textareaRef.current?.focus();
+        setValue((v) => (v.startsWith("/") ? v : "/" + v));
+        requestAnimationFrame(() => {
+          if (textareaRef.current) {
+            autocomplete.handleChange(textareaRef.current.value, textareaRef.current);
+          }
+        });
+        return;
+      }
+
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         handleSend();
@@ -75,7 +165,7 @@ export function ChatInput({
         textareaRef.current?.blur();
       }
     },
-    [handleSend, autocomplete.handleKeyDown]
+    [handleSend, autocomplete.handleKeyDown, autocomplete.handleChange, executeSessionCommand, isStreaming]
   );
 
   // Auto-resize textarea
@@ -112,12 +202,8 @@ export function ChatInput({
         const entry = getToolCatalog({ includeBrowser: true }).find((t) => t.name === item.id);
         if (entry?.behavior === "execute_immediately") {
           autocomplete.close();
-          if (entry.name === "toggle_theme") {
-            toggleTheme();
-          } else if (entry.name === "mark_all_read") {
-            fetch("/api/notifications/mark-all-read", { method: "PATCH" });
-          }
           setValue("");
+          executeSessionCommand(entry.name);
           return;
         }
       }
@@ -133,7 +219,7 @@ export function ChatInput({
         });
       }
     },
-    [autocomplete, handleInput]
+    [autocomplete, handleInput, executeSessionCommand]
   );
 
   // Show preview text in placeholder when hovering a suggestion
@@ -201,6 +287,12 @@ export function ChatInput({
         </div>
       </div>
 
+      {!isStreaming && (
+        <div className="mx-auto max-w-3xl">
+          <CapabilityBanner runtimeId={effectiveRuntime} />
+        </div>
+      )}
+
       {/* Autocomplete popover — rendered via portal */}
       <ChatCommandPopover
         open={autocomplete.state.open}
@@ -210,8 +302,11 @@ export function ChatInput({
         entityResults={autocomplete.entityResults}
         entityLoading={autocomplete.entityLoading}
         projectProfiles={projectSkills.length > 0 ? projectSkills : undefined}
+        activeTab={autocomplete.activeTab}
+        onTabChange={autocomplete.setActiveTab}
         onSelect={handlePopoverSelect}
         onClose={autocomplete.close}
+        conversationId={conversationId}
       />
     </div>
   );

package/src/components/chat/chat-message.tsx

@@ -80,12 +80,14 @@ export function ChatMessage({ message, isStreaming, conversationId, onStatusChan
   let quickAccess: QuickAccessItem[] = [];
   let attachments: ScreenshotAttachment[] = [];
   let modelLabel: string | null = null;
+  let fallbackReason: string | null = null;
   if (!isUser && message.metadata) {
     try {
       const meta = JSON.parse(message.metadata);
       if (Array.isArray(meta.quickAccess)) quickAccess = meta.quickAccess;
       if (Array.isArray(meta.attachments)) attachments = meta.attachments;
       if (meta.modelId) modelLabel = resolveModelLabel(meta.modelId);
+      if (meta.fallbackReason) fallbackReason = meta.fallbackReason;
     } catch {
       // Invalid metadata
     }
@@ -148,9 +150,16 @@ export function ChatMessage({ message, isStreaming, conversationId, onStatusChan
       </div>
       {/* Model label for completed assistant messages */}
       {!isUser && !isStreaming && modelLabel && (
-        <span className="text-[10px] text-muted-foreground/50 mt-0.5 ml-1">
-          {modelLabel}
-        </span>
+        <div className="mt-0.5 ml-1 space-y-0.5">
+          <span className="block text-[10px] text-muted-foreground/50">
+            {modelLabel}
+          </span>
+          {fallbackReason && (
+            <span className="block text-[10px] text-amber-700/80 dark:text-amber-300/80">
+              {fallbackReason}
+            </span>
+          )}
+        </div>
       )}
     </div>
   );

package/src/components/chat/chat-session-provider.tsx

@@ -38,6 +38,7 @@ import {
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import type { ConversationRow, ChatMessageRow } from "@/lib/db/schema";
+import { HelpDialog } from "./help-dialog";
 import {
   DEFAULT_CHAT_MODEL,
   CHAT_MODELS,
@@ -73,7 +74,7 @@ interface ChatSessionValue {
   setActiveConversation: (id: string | null, opts?: { skipLoad?: boolean }) => void;
   sendMessage: (content: string, mentions?: MentionReference[]) => Promise<void>;
   stopStreaming: () => void;
-  createConversation: () => Promise<string | null>;
+  createConversation: (opts?: { title?: string }) => Promise<string | null>;
   deleteConversation: (id: string) => Promise<void>;
   renameConversation: (id: string, title: string) => Promise<void>;
   setMessageStatus: (
@@ -111,11 +112,15 @@ export function ChatSessionProvider({ children }: { children: ReactNode }) {
     useState<ChatModelOption[]>(CHAT_MODELS);
   const [hydrated, setHydrated] = useState(false);
 
+  const [helpDialogOpen, setHelpDialogOpen] = useState(false);
+
   // Refs for values read from async callbacks that mustn't see stale state.
   const activeIdRef = useRef<string | null>(null);
   activeIdRef.current = activeId;
   const modelIdRef = useRef<string>(modelId);
   modelIdRef.current = modelId;
+  const messagesByConversationRef = useRef<Record<string, ChatMessageRow[]>>({});
+  messagesByConversationRef.current = messagesByConversation;
 
   // ── One-time model + available-models fetch ──────────────────────────
   // Runs once per page load (provider lives in root layout, not /chat page).
@@ -259,7 +264,8 @@ export function ChatSessionProvider({ children }: { children: ReactNode }) {
   );
 
   // ── Conversation CRUD ────────────────────────────────────────────────
-  const createConversation = useCallback(async (): Promise<string | null> => {
+  const createConversation = useCallback(
+    async (opts?: { title?: string }): Promise<string | null> => {
     try {
       const res = await fetch("/api/chat/conversations", {
         method: "POST",
@@ -267,6 +273,7 @@ export function ChatSessionProvider({ children }: { children: ReactNode }) {
         body: JSON.stringify({
           runtimeId: getRuntimeForModel(modelIdRef.current),
           modelId: modelIdRef.current,
+          ...(opts?.title ? { title: opts.title } : {}),
         }),
       });
       if (!res.ok) return null;
@@ -285,7 +292,69 @@ export function ChatSessionProvider({ children }: { children: ReactNode }) {
     } catch {
       return null;
     }
-  }, [setActiveConversation]);
+  },
+    [setActiveConversation]
+  );
+
+  // ── Environment rescan on conversation activation ────────────────────
+  // Fire-and-forget; endpoint self-guards with shouldRescan() (5min TTL).
+  useEffect(() => {
+    if (!activeId) return;
+    fetch("/api/environment/rescan-if-stale", { method: "POST" }).catch(() => {});
+  }, [activeId]);
+
+  // ── Chat command event listeners ─────────────────────────────────────
+  // Handles CustomEvents dispatched by chat-input.tsx (⌘L, slash commands).
+  useEffect(() => {
+    const handleClear = () => {
+      void createConversation();
+    };
+    const handleCompact = () => {
+      toast.info("Compact is not wired yet — coming soon.");
+    };
+    const handleExport = async () => {
+      const activeConversationId = activeIdRef.current;
+      const msgs = activeConversationId
+        ? messagesByConversationRef.current[activeConversationId]
+        : undefined;
+      if (!msgs || msgs.length === 0) {
+        toast.error("Nothing to export — this conversation is empty.");
+        return;
+      }
+      const title = `Chat — ${new Date().toISOString().slice(0, 10)}`;
+      const markdown = msgs
+        .map((m) => `### ${m.role === "user" ? "You" : "Assistant"}\n\n${m.content}`)
+        .join("\n\n---\n\n");
+      try {
+        const res = await fetch("/api/chat/export", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title,
+            markdown,
+            conversationId: activeConversationId,
+          }),
+        });
+        if (!res.ok) throw new Error(`Export failed: ${res.status}`);
+        toast.success("Conversation exported to documents.");
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : "Export failed");
+      }
+    };
+    const handleHelp = () => setHelpDialogOpen(true);
+
+    window.addEventListener("stagent.chat.clear", handleClear);
+    window.addEventListener("stagent.chat.compact", handleCompact);
+    window.addEventListener("stagent.chat.export", handleExport);
+    window.addEventListener("stagent.chat.help", handleHelp);
+
+    return () => {
+      window.removeEventListener("stagent.chat.clear", handleClear);
+      window.removeEventListener("stagent.chat.compact", handleCompact);
+      window.removeEventListener("stagent.chat.export", handleExport);
+      window.removeEventListener("stagent.chat.help", handleHelp);
+    };
+  }, [createConversation]);
 
   const deleteConversation = useCallback(
     async (id: string) => {
@@ -700,6 +769,7 @@ export function ChatSessionProvider({ children }: { children: ReactNode }) {
   return (
     <ChatSessionContext.Provider value={value}>
       {children}
+      <HelpDialog open={helpDialogOpen} onOpenChange={setHelpDialogOpen} />
     </ChatSessionContext.Provider>
   );
 }

package/src/components/chat/chat-shell.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import type { ConversationRow } from "@/lib/db/schema";
 import type { PromptCategory } from "@/lib/chat/types";
 import { useChatSession } from "./chat-session-provider";
@@ -9,9 +9,10 @@ import { ChatMessageList } from "./chat-message-list";
 import { ChatInput } from "./chat-input";
 import { ChatEmptyState } from "./chat-empty-state";
 import { ChatActivityIndicator } from "./chat-activity-indicator";
+import { ConversationTemplatePicker } from "./conversation-template-picker";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { PanelRightOpen } from "lucide-react";
+import { PanelRightOpen, Sparkles } from "lucide-react";
 
 interface ChatShellProps {
   initialConversations: ConversationRow[];
@@ -56,6 +57,46 @@ export function ChatShell({
   // View-local state only
   const [mobileListOpen, setMobileListOpen] = useState(false);
   const [hoverPreview, setHoverPreview] = useState<string | null>(null);
+  const [templatePickerOpen, setTemplatePickerOpen] = useState(false);
+
+  // Open the template picker from any source (empty-state button, slash
+  // command, palette). Central handler keeps the open state authoritative.
+  useEffect(() => {
+    function onOpen() {
+      setTemplatePickerOpen(true);
+    }
+    window.addEventListener("stagent.chat.openTemplatePicker", onOpen);
+    return () =>
+      window.removeEventListener("stagent.chat.openTemplatePicker", onOpen);
+  }, []);
+
+  // Track streaming state + activeId in refs so the unmount cleanup sees the
+  // values at unmount time, not at effect-setup time (closure-capture bug).
+  // If ChatShell unmounts while a stream is in flight (user navigated away),
+  // log a telemetry breadcrumb. The stream itself continues inside
+  // ChatSessionProvider — this log only exists so diagnostics can confirm
+  // the provider-hoisting fix is holding. See `src/lib/chat/stream-telemetry.ts`
+  // for the full reason code list.
+  const isStreamingRef = useRef(isStreaming);
+  const activeIdRef = useRef(activeId);
+  useEffect(() => {
+    isStreamingRef.current = isStreaming;
+  }, [isStreaming]);
+  useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+  useEffect(() => {
+    return () => {
+      if (isStreamingRef.current) {
+        // eslint-disable-next-line no-console
+        console.info("[chat-stream] client.stream.view-remount", {
+          conversationId: activeIdRef.current,
+        });
+      }
+    };
+    // Empty deps: exactly-once cleanup on unmount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // Hydrate provider once with the server-rendered conversation list.
   // Subsequent remounts are no-ops — the provider preserves its state.
@@ -184,7 +225,7 @@ export function ChatShell({
           </Sheet>
         </div>
 
-        {!activeId && messages.length === 0 ? (
+        {messages.length === 0 ? (
           /* Hero mode: vertically centered greeting + input + chips */
           <div className="flex-1 flex items-center justify-center overflow-hidden">
             <ChatEmptyState
@@ -202,7 +243,19 @@ export function ChatShell({
                 onModelChange={setModelId}
                 availableModels={availableModels}
                 projectId={activeConversation?.projectId}
+                conversationId={activeId}
               />
+              <div className="mt-3 flex justify-center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs gap-1.5"
+                  onClick={() => setTemplatePickerOpen(true)}
+                >
+                  <Sparkles className="h-3.5 w-3.5" />
+                  Start from template
+                </Button>
+              </div>
             </ChatEmptyState>
           </div>
         ) : (
@@ -232,11 +285,17 @@ export function ChatShell({
               onModelChange={setModelId}
               availableModels={availableModels}
               projectId={activeConversation?.projectId}
+              conversationId={activeId}
             />
           </>
         )}
       </div>
 
+      <ConversationTemplatePicker
+        open={templatePickerOpen}
+        onOpenChange={setTemplatePickerOpen}
+      />
+
       {/* Desktop conversation list — right side */}
       <div className="hidden lg:flex lg:w-[280px] lg:flex-col lg:border-l border-border">
         {conversationListContent}

package/src/components/chat/command-tab-bar.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { COMMAND_TABS, type CommandTabId } from "@/lib/chat/command-tabs";
+
+interface CommandTabBarProps {
+  activeTab: CommandTabId;
+  onChange: (tab: CommandTabId) => void;
+  counts?: Partial<Record<CommandTabId, number>>;
+}
+
+export function CommandTabBar({ activeTab, onChange, counts }: CommandTabBarProps) {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const idx = COMMAND_TABS.findIndex((t) => t.id === activeTab);
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const prev = COMMAND_TABS[(idx - 1 + COMMAND_TABS.length) % COMMAND_TABS.length];
+        onChange(prev.id);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        const next = COMMAND_TABS[(idx + 1) % COMMAND_TABS.length];
+        onChange(next.id);
+      }
+    },
+    [activeTab, onChange]
+  );
+
+  return (
+    <div
+      role="tablist"
+      aria-label="Command categories"
+      onKeyDown={handleKeyDown}
+      className="flex items-center gap-1 border-b border-border px-2 pt-2"
+    >
+      {COMMAND_TABS.map((tab) => {
+        const selected = tab.id === activeTab;
+        const count = counts?.[tab.id];
+        return (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={selected}
+            aria-controls={`command-tabpanel-${tab.id}`}
+            id={`command-tab-${tab.id}`}
+            tabIndex={selected ? 0 : -1}
+            onClick={() => onChange(tab.id)}
+            className={cn(
+              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              selected
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {tab.label}
+            {typeof count === "number" && count > 0 && (
+              <span className="ml-1.5 text-[10px] text-muted-foreground/70">
+                {count}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}