stagent 0.9.6 → 0.11.0

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

@@ -6,10 +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;
@@ -21,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({
@@ -33,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);
@@ -59,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
@@ -66,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();
@@ -74,7 +165,7 @@ export function ChatInput({
         textareaRef.current?.blur();
       }
     },
-    [handleSend, autocomplete.handleKeyDown]
+    [handleSend, autocomplete.handleKeyDown, autocomplete.handleChange, executeSessionCommand, isStreaming]
   );
 
   // Auto-resize textarea
@@ -111,14 +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") {
-            const isDark = document.documentElement.classList.contains("dark");
-            document.documentElement.classList.toggle("dark");
-            localStorage.setItem("stagent-theme", isDark ? "light" : "dark");
-          } else if (entry.name === "mark_all_read") {
-            fetch("/api/notifications/mark-all-read", { method: "PATCH" });
-          }
           setValue("");
+          executeSessionCommand(entry.name);
           return;
         }
       }
@@ -134,7 +219,7 @@ export function ChatInput({
         });
       }
     },
-    [autocomplete, handleInput]
+    [autocomplete, handleInput, executeSessionCommand]
   );
 
   // Show preview text in placeholder when hovering a suggestion
@@ -202,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}
@@ -211,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>
   );