stagent 0.4.0 → 0.5.0

package/src/components/chat/chat-command-popover.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  FolderKanban,
+  ListTodo,
+  GitBranch,
+  FileText,
+  Bot,
+  Clock,
+  Loader2,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import {
+  getToolCatalog,
+  groupToolCatalog,
+  TOOL_GROUP_ICONS,
+  TOOL_GROUP_ORDER,
+  type ToolCatalogEntry,
+} from "@/lib/chat/tool-catalog";
+import type { AutocompleteMode, EntitySearchResult } from "@/hooks/use-chat-autocomplete";
+
+interface ChatCommandPopoverProps {
+  open: boolean;
+  mode: AutocompleteMode;
+  query: string;
+  anchorRect: { top: number; left: number; height: number } | null;
+  entityResults: EntitySearchResult[];
+  entityLoading: boolean;
+  onSelect: (item: {
+    type: "slash" | "mention";
+    id: string;
+    label: string;
+    text?: string;
+    entityType?: string;
+    entityId?: string;
+  }) => void;
+  onClose: () => void;
+}
+
+const ENTITY_ICONS: Record<string, LucideIcon> = {
+  project: FolderKanban,
+  task: ListTodo,
+  workflow: GitBranch,
+  document: FileText,
+  profile: Bot,
+  schedule: Clock,
+};
+
+const ENTITY_LABELS: Record<string, string> = {
+  project: "Projects",
+  task: "Tasks",
+  workflow: "Workflows",
+  document: "Documents",
+  profile: "Profiles",
+  schedule: "Schedules",
+};
+
+function groupByType(results: EntitySearchResult[]): Record<string, EntitySearchResult[]> {
+  const groups: Record<string, EntitySearchResult[]> = {};
+  for (const r of results) {
+    if (!groups[r.entityType]) groups[r.entityType] = [];
+    groups[r.entityType].push(r);
+  }
+  return groups;
+}
+
+export function ChatCommandPopover({
+  open,
+  mode,
+  query,
+  anchorRect,
+  entityResults,
+  entityLoading,
+  onSelect,
+  onClose,
+}: ChatCommandPopoverProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open, onClose]);
+
+  if (!open || !anchorRect || !mode) return null;
+
+  // Position above the caret
+  const style: React.CSSProperties = {
+    position: "fixed",
+    left: Math.max(8, anchorRect.left),
+    bottom: window.innerHeight - anchorRect.top + 4,
+    zIndex: 50,
+    width: 360,
+  };
+
+  const content = (
+    <div
+      ref={containerRef}
+      style={style}
+      data-chat-autocomplete=""
+      className="rounded-lg border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2"
+    >
+      <Command shouldFilter={mode === "slash"} loop>
+        {/* Hidden input for cmdk filtering — synced to query */}
+        <div className="sr-only">
+          <CommandInput value={query} />
+        </div>
+
+        <CommandList className="max-h-[320px]">
+          <CommandEmpty>
+            {mode === "slash" ? "No matching tools" : "No matching entities"}
+          </CommandEmpty>
+
+          {mode === "slash" && <ToolCatalogItems onSelect={onSelect} />}
+
+          {mode === "mention" && (
+            <MentionItems
+              results={entityResults}
+              loading={entityLoading}
+              query={query}
+              onSelect={onSelect}
+            />
+          )}
+        </CommandList>
+      </Command>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}
+
+function ToolCatalogItems({
+  onSelect,
+}: {
+  onSelect: ChatCommandPopoverProps["onSelect"];
+}) {
+  const catalog = getToolCatalog({ includeBrowser: true });
+  const groups = groupToolCatalog(catalog);
+
+  return (
+    <>
+      {TOOL_GROUP_ORDER.map((groupName) => {
+        const items = groups[groupName];
+        if (!items?.length) return null;
+        const GroupIcon = TOOL_GROUP_ICONS[groupName];
+        return (
+          <CommandGroup key={groupName} heading={groupName}>
+            {items.map((entry) => (
+              <CommandItem
+                key={entry.name}
+                value={`${entry.name} ${entry.description} ${entry.group}`}
+                onSelect={() =>
+                  onSelect({
+                    type: "slash",
+                    id: entry.name,
+                    label: entry.name,
+                    text: entry.behavior === "execute_immediately"
+                      ? entry.name
+                      : `Use ${entry.name} to `,
+                  })
+                }
+              >
+                <GroupIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <div className="flex flex-col min-w-0">
+                  <span className="truncate text-sm font-medium">{entry.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {entry.description}
+                  </span>
+                </div>
+                {entry.paramHint && (
+                  <span className="ml-auto shrink-0 text-[10px] text-muted-foreground/60 font-mono">
+                    {entry.paramHint}
+                  </span>
+                )}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        );
+      })}
+    </>
+  );
+}
+
+function MentionItems({
+  results,
+  loading,
+  query,
+  onSelect,
+}: {
+  results: EntitySearchResult[];
+  loading: boolean;
+  query: string;
+  onSelect: ChatCommandPopoverProps["onSelect"];
+}) {
+  if (loading && results.length === 0) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-4 text-sm text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        Searching...
+      </div>
+    );
+  }
+
+  if (!query) {
+    return (
+      <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+        Type to search entities...
+      </div>
+    );
+  }
+
+  const grouped = groupByType(results);
+  const entityTypes = Object.keys(grouped);
+
+  if (entityTypes.length === 0 && !loading) {
+    return null; // CommandEmpty will show
+  }
+
+  return (
+    <>
+      {entityTypes.map((type) => {
+        const Icon = ENTITY_ICONS[type] ?? FileText;
+        const groupLabel = ENTITY_LABELS[type] ?? type;
+        return (
+          <CommandGroup key={type} heading={groupLabel}>
+            {grouped[type].map((entity) => (
+              <CommandItem
+                key={`${entity.entityType}-${entity.entityId}`}
+                value={`${entity.entityType} ${entity.label}`}
+                onSelect={() =>
+                  onSelect({
+                    type: "mention",
+                    id: entity.entityType,
+                    label: entity.label,
+                    entityType: entity.entityType,
+                    entityId: entity.entityId,
+                  })
+                }
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                <div className="flex flex-col min-w-0">
+                  <span className="flex-1 truncate">{entity.label}</span>
+                  {entity.description && (
+                    <span className="truncate text-xs text-muted-foreground">
+                      {entity.description}
+                    </span>
+                  )}
+                </div>
+                {entity.status && (
+                  <span className="ml-auto shrink-0 text-xs text-muted-foreground">
+                    {entity.status}
+                  </span>
+                )}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        );
+      })}
+    </>
+  );
+}

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

@@ -5,10 +5,13 @@ import { Button } from "@/components/ui/button";
 import { Square } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ChatModelSelector } from "./chat-model-selector";
+import { ChatCommandPopover } from "./chat-command-popover";
+import { useChatAutocomplete, type MentionReference } from "@/hooks/use-chat-autocomplete";
+import { getToolCatalog } from "@/lib/chat/tool-catalog";
 import type { ChatModelOption } from "@/lib/chat/types";
 
 interface ChatInputProps {
-  onSend: (content: string) => void;
+  onSend: (content: string, mentions?: MentionReference[]) => void;
   onStop: () => void;
   isStreaming: boolean;
   isHeroMode: boolean;
@@ -30,6 +33,12 @@ export function ChatInput({
 }: ChatInputProps) {
   const [value, setValue] = useState("");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const autocomplete = useChatAutocomplete();
+
+  // Sync textarea ref with autocomplete hook
+  useEffect(() => {
+    autocomplete.setTextareaRef(textareaRef.current);
+  }, [autocomplete.setTextareaRef]);
 
   // Auto-focus on mount and after sending
   useEffect(() => {
@@ -39,15 +48,20 @@ export function ChatInput({
   const handleSend = useCallback(() => {
     const trimmed = value.trim();
     if (!trimmed || isStreaming) return;
-    onSend(trimmed);
+    onSend(trimmed, autocomplete.mentions.length > 0 ? autocomplete.mentions : undefined);
     setValue("");
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
     }
-  }, [value, isStreaming, onSend]);
+  }, [value, isStreaming, onSend, autocomplete.mentions]);
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Let autocomplete handle keys first when popover is open
+      if (autocomplete.handleKeyDown(e)) {
+        return;
+      }
+
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         handleSend();
@@ -56,7 +70,7 @@ export function ChatInput({
         textareaRef.current?.blur();
       }
     },
-    [handleSend]
+    [handleSend, autocomplete.handleKeyDown]
   );
 
   // Auto-resize textarea
@@ -67,8 +81,60 @@ export function ChatInput({
     textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
   }, []);
 
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      handleInput();
+      // Notify autocomplete of text changes (must happen after setValue so selectionStart is current)
+      requestAnimationFrame(() => {
+        autocomplete.handleChange(newValue, textareaRef.current);
+      });
+    },
+    [handleInput, autocomplete.handleChange]
+  );
+
+  const handlePopoverSelect = useCallback(
+    (item: {
+      type: "slash" | "mention";
+      id: string;
+      label: string;
+      text?: string;
+      entityType?: string;
+      entityId?: string;
+    }) => {
+      if (item.type === "slash") {
+        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("");
+          return;
+        }
+      }
+
+      // For insert_template slash commands and mentions, update textarea value
+      const newValue = autocomplete.handleSelect(item);
+      if (newValue !== undefined) {
+        setValue(newValue);
+        handleInput();
+        // Refocus textarea
+        requestAnimationFrame(() => {
+          textareaRef.current?.focus();
+        });
+      }
+    },
+    [autocomplete, handleInput]
+  );
+
   // Show preview text in placeholder when hovering a suggestion
-  const placeholder = previewText || "Ask anything about your projects...";
+  const placeholder = previewText || "Ask anything... (/ for tools, @ for mentions)";
 
   return (
     <div
@@ -94,10 +160,7 @@ export function ChatInput({
           <textarea
             ref={textareaRef}
             value={value}
-            onChange={(e) => {
-              setValue(e.target.value);
-              handleInput();
-            }}
+            onChange={handleChange}
             onKeyDown={handleKeyDown}
             placeholder={placeholder}
             className={cn(
@@ -134,6 +197,18 @@ export function ChatInput({
           </div>
         </div>
       </div>
+
+      {/* Autocomplete popover — rendered via portal */}
+      <ChatCommandPopover
+        open={autocomplete.state.open}
+        mode={autocomplete.state.mode}
+        query={autocomplete.state.query}
+        anchorRect={autocomplete.state.anchorRect}
+        entityResults={autocomplete.entityResults}
+        entityLoading={autocomplete.entityLoading}
+        onSelect={handlePopoverSelect}
+        onClose={autocomplete.close}
+      />
     </div>
   );
 }

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

@@ -6,8 +6,9 @@ import { ChatMessageMarkdown } from "./chat-message-markdown";
 import { ChatPermissionRequest } from "./chat-permission-request";
 import { ChatQuestionInline } from "./chat-question";
 import { ChatQuickAccess } from "./chat-quick-access";
+import { ScreenshotGallery } from "./screenshot-gallery";
 import { AlertCircle } from "lucide-react";
-import { resolveModelLabel, type ChatQuestion, type QuickAccessItem } from "@/lib/chat/types";
+import { resolveModelLabel, type ChatQuestion, type QuickAccessItem, type ScreenshotAttachment } from "@/lib/chat/types";
 
 interface ChatMessageProps {
   message: ChatMessageRow;
@@ -75,13 +76,15 @@ export function ChatMessage({ message, isStreaming, conversationId, onStatusChan
   // Skip rendering system messages without valid metadata
   if (isSystem) return null;
 
-  // Extract Quick Access pills and model label from completed assistant messages
+  // Extract Quick Access pills, model label, and screenshot attachments from assistant messages
   let quickAccess: QuickAccessItem[] = [];
+  let attachments: ScreenshotAttachment[] = [];
   let modelLabel: string | null = null;
-  if (!isUser && message.status === "complete" && message.metadata) {
+  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);
     } catch {
       // Invalid metadata
@@ -125,6 +128,9 @@ export function ChatMessage({ message, isStreaming, conversationId, onStatusChan
                 })()}
               </span>
             ) : null}
+            {attachments.length > 0 && (
+              <ScreenshotGallery attachments={attachments} />
+            )}
             {isStreaming && message.content && (
               <span className="inline-block w-0.5 h-4 bg-foreground animate-pulse ml-0.5 align-text-bottom" />
             )}

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

@@ -9,6 +9,7 @@ import { usePersistedState } from "@/hooks/use-persisted-state";
 import { ConversationList } from "./conversation-list";
 import { ChatMessageList } from "./chat-message-list";
 import { ChatInput } from "./chat-input";
+import type { MentionReference } from "@/hooks/use-chat-autocomplete";
 import { ChatEmptyState } from "./chat-empty-state";
 import { ChatActivityIndicator } from "./chat-activity-indicator";
 import { Button } from "@/components/ui/button";
@@ -206,7 +207,7 @@ export function ChatShell({
   // ── Message Sending ──────────────────────────────────────────────────
 
   const handleSend = useCallback(
-    async (content: string) => {
+    async (content: string, mentions?: MentionReference[]) => {
       let conversationId = activeId;
 
       // Create conversation on first message if none active
@@ -262,7 +263,7 @@ export function ChatShell({
           {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ content }),
+            body: JSON.stringify({ content, mentions }),
             signal: controller.signal,
           }
         );
@@ -312,9 +313,15 @@ export function ChatShell({
                           ...m,
                           id: event.messageId,
                           status: "complete",
-                          metadata: event.quickAccess?.length
-                            ? JSON.stringify({ quickAccess: event.quickAccess })
-                            : m.metadata,
+                          metadata: (() => {
+                            const existing = m.metadata
+                              ? (() => { try { return JSON.parse(m.metadata!); } catch { return {}; } })()
+                              : {};
+                            if (event.quickAccess?.length) {
+                              existing.quickAccess = event.quickAccess;
+                            }
+                            return JSON.stringify(existing);
+                          })(),
                         }
                       : m
                   )
@@ -351,6 +358,23 @@ export function ChatShell({
                   createdAt: new Date(),
                 };
                 setMessages((prev) => [...prev, systemMsg]);
+              } else if (event.type === "screenshot") {
+                // Append screenshot attachment to assistant message metadata
+                setMessages((prev) =>
+                  prev.map((m) => {
+                    if (m.id !== assistantMsgId) return m;
+                    const meta = m.metadata ? (() => { try { return JSON.parse(m.metadata!); } catch { return {}; } })() : {};
+                    const attachments = Array.isArray(meta.attachments) ? meta.attachments : [];
+                    attachments.push({
+                      documentId: event.documentId,
+                      thumbnailUrl: event.thumbnailUrl,
+                      originalUrl: event.originalUrl,
+                      width: event.width,
+                      height: event.height,
+                    });
+                    return { ...m, metadata: JSON.stringify({ ...meta, attachments }) };
+                  })
+                );
               } else if (event.type === "error") {
                 setMessages((prev) =>
                   prev.map((m) =>

package/src/components/chat/screenshot-gallery.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+import type { ScreenshotAttachment } from "@/lib/chat/types";
+import { ScreenshotLightbox } from "@/components/shared/screenshot-lightbox";
+import { ImageIcon, ChevronDown, ChevronUp } from "lucide-react";
+
+interface ScreenshotGalleryProps {
+  attachments: ScreenshotAttachment[];
+}
+
+const COLLAPSED_LIMIT = 2;
+
+export function ScreenshotGallery({ attachments }: ScreenshotGalleryProps) {
+  const [lightbox, setLightbox] = useState<ScreenshotAttachment | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  if (attachments.length === 0) return null;
+
+  const visible = expanded ? attachments : attachments.slice(0, COLLAPSED_LIMIT);
+  const hiddenCount = attachments.length - COLLAPSED_LIMIT;
+
+  return (
+    <>
+      <div className="flex flex-col gap-3 mt-2">
+        {visible.map((att) => (
+          <button
+            key={att.documentId}
+            type="button"
+            className="relative rounded-lg overflow-hidden border border-border hover:border-primary transition-colors cursor-pointer group w-full"
+            onClick={() => setLightbox(att)}
+          >
+            <img
+              src={att.thumbnailUrl}
+              alt={`Screenshot ${att.width}×${att.height}`}
+              className="object-contain w-full"
+              style={{ maxHeight: 400 }}
+              loading="lazy"
+              onError={(e) => {
+                // Fallback to original if thumbnail fails
+                const img = e.currentTarget;
+                if (!img.src.includes(att.originalUrl)) {
+                  img.src = att.originalUrl;
+                } else {
+                  // Both failed — show placeholder
+                  img.style.display = "none";
+                  img.parentElement?.classList.add("bg-muted");
+                }
+              }}
+            />
+            {/* Hover overlay */}
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+              <ImageIcon className="h-5 w-5 text-white opacity-0 group-hover:opacity-70 transition-opacity" />
+            </div>
+            {/* Dimensions badge */}
+            <span className="absolute bottom-1 right-1 text-[9px] bg-black/50 text-white px-1.5 py-0.5 rounded">
+              {att.width}×{att.height}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Expand/collapse toggle for 4+ screenshots */}
+      {hiddenCount > 0 && (
+        <button
+          type="button"
+          className="text-xs text-muted-foreground hover:text-foreground mt-1 flex items-center gap-1"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? (
+            <>
+              <ChevronUp className="h-3 w-3" />
+              Show fewer
+            </>
+          ) : (
+            <>
+              <ChevronDown className="h-3 w-3" />
+              Show {hiddenCount} more screenshot{hiddenCount > 1 ? "s" : ""}
+            </>
+          )}
+        </button>
+      )}
+
+      {/* Lightbox overlay */}
+      {lightbox && (
+        <ScreenshotLightbox
+          open={!!lightbox}
+          onClose={() => setLightbox(null)}
+          imageUrl={lightbox.originalUrl}
+          width={lightbox.width}
+          height={lightbox.height}
+        />
+      )}
+    </>
+  );
+}