@mndrk/agx 2.0.25 → 2.0.32

package/cloud-runtime/standalone/components/chat-ui/ThreadView.tsx

@@ -8,6 +8,8 @@ import type { TaskDraftMessage } from "@/types/tasks";
 import type { AgentProcessEntry } from "@/lib/agent-process-registry";
 import { Markdown } from "./Markdown";
 import { Copy, Trash2, User, Link, MessageSquareText, Sparkles } from "lucide-react";
+import { ActionToolbar, ActionToolbarDivider } from "../ActionToolbar";
+import { IconButton } from "../IconButton";
 import { MessageAttachments } from "./MessageAttachments";
 import { agentAvatarUrl } from "./ParticipantBar";
 import { MessageReactionsBar } from "./MessageReactionsBar";
@@ -18,6 +20,7 @@ interface Props {
     streaming: Record<string, StreamingEntry>;
     participants: Participant[];
     rootMessageId: string;
+    queued?: boolean;
     onClose: () => void;
     onCopyThread?: (rootMessageId: string) => void;
     onSummarize?: (rootMessageId: string) => void;
@@ -25,6 +28,7 @@ interface Props {
     onCreateTasks?: (rootMessageId: string) => void;
     onUpdateTaskDraft?: (rootMessageId: string, draft: TaskDraftMessage) => void;
     onDeleteThreadRoot?: (messageId: string) => void;
+    onDeleteMessage?: (messageId: string) => void;
     highlightedMessageId?: string;
     renderReplyComposer: (rootMessageId: string) => React.ReactNode;
     activeProcesses?: AgentProcessEntry[];
@@ -35,10 +39,12 @@ export function ThreadView({
     streaming,
     participants,
     rootMessageId,
+    queued = false,
     onClose,
     onCopyThread,
     onAddToChat,
     onDeleteThreadRoot,
+    onDeleteMessage,
     highlightedMessageId,
     renderReplyComposer,
     activeProcesses = [],
@@ -175,10 +181,7 @@ export function ThreadView({
                                     </div>
 
                                     <div
-                                        className={`rounded-2xl p-4 text-[15px] leading-relaxed transition-all shadow-sm border ${isUser
-                                            ? "bg-[var(--app-shell-subtle)] text-[var(--foreground)] border-[var(--app-shell-border)]"
-                                            : "bg-[var(--app-shell-surface)] text-[var(--foreground)] border-[var(--app-shell-border)] hover:shadow-md hover:border-[var(--app-shell-border-strong)]"
-                                            } ${msg.id === highlightedMessageId ? "ring-2 ring-[var(--ring)]" : ""}`}
+                                        className={`surface-card rounded-2xl p-5 text-[15px] leading-relaxed ${msg.id === highlightedMessageId ? "ring-2 ring-[var(--ring)]" : ""}`}
                                     >
                                         <Markdown content={stripMarkers(msg.content)} isUser={isUser} />
                                         {msg.attachments && msg.attachments.length > 0 && (
@@ -193,51 +196,87 @@ export function ThreadView({
                                     </div>
 
                                     {/* Actions on hover */}
-                                    <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] rounded-xl shadow-sm p-1 z-10 backdrop-blur-sm">
+                                    <ActionToolbar>
                                         {msg.id === rootMessageId && (
-                                            <button
-                                                onClick={() => {
-                                                    navigator.clipboard.writeText(msg.id);
-                                                }}
-                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--primary)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
+                                            <IconButton
+                                                variant="primary"
+                                                size="sm"
+                                                onClick={() => navigator.clipboard.writeText(msg.id)}
                                                 title="Copy message ID"
                                             >
-                                                <Link size={14} />
-                                            </button>
+                                                <Link className="w-3.5 h-3.5" />
+                                            </IconButton>
                                         )}
                                         {msg.id === rootMessageId && onCopyThread && (
-                                            <button
+                                            <IconButton
+                                                variant="neutral"
+                                                size="sm"
                                                 onClick={() => onCopyThread(msg.id)}
-                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
                                                 title="Copy Thread"
                                             >
-                                                <MessageSquareText size={14} />
-                                            </button>
+                                                <MessageSquareText className="w-3.5 h-3.5" />
+                                            </IconButton>
                                         )}
-                                        <button
-                                            onClick={() => {
-                                                navigator.clipboard.writeText(msg.content);
-                                            }}
-                                            className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)] rounded transition-colors"
+                                        <IconButton
+                                            variant="neutral"
+                                            size="sm"
+                                            onClick={() => navigator.clipboard.writeText(msg.content)}
                                             title="Copy as Markdown"
                                         >
-                                            <Copy size={14} />
-                                        </button>
+                                            <Copy className="w-3.5 h-3.5" />
+                                        </IconButton>
                                         {msg.id === rootMessageId && onDeleteThreadRoot && (
-                                            <button
-                                                onClick={() => onDeleteThreadRoot(msg.id)}
-                                                className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive-muted)] rounded transition-colors"
-                                                title="Delete Thread"
-                                            >
-                                                <Trash2 size={14} />
-                                            </button>
+                                            <>
+                                                <ActionToolbarDivider />
+                                                <IconButton
+                                                    variant="destructive"
+                                                    size="sm"
+                                                    onClick={() => onDeleteThreadRoot(msg.id)}
+                                                    title="Delete Thread"
+                                                >
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </IconButton>
+                                            </>
                                         )}
-                                    </div>
+                                        {msg.id !== rootMessageId && onDeleteMessage && (
+                                            <>
+                                                <ActionToolbarDivider />
+                                                <IconButton
+                                                    variant="destructive"
+                                                    size="sm"
+                                                    onClick={() => onDeleteMessage(msg.id)}
+                                                    title="Delete Message"
+                                                >
+                                                    <Trash2 className="w-3.5 h-3.5" />
+                                                </IconButton>
+                                            </>
+                                        )}
+                                    </ActionToolbar>
                                 </div>
                             </div>
                         );
                     })}
 
+                    {queued && activeProcesses.length === 0 && (
+                        <div className="flex gap-3 group relative opacity-80 animate-in fade-in slide-in-from-bottom-1 duration-300">
+                            <div className="flex-shrink-0 mt-0.5">
+                                <div className="w-7 h-7 rounded-full border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] flex items-center justify-center">
+                                    <Sparkles className="w-3.5 h-3.5 text-[var(--app-shell-soft-text)]" strokeWidth={1.5} />
+                                </div>
+                            </div>
+                            <div className="flex-1 max-w-full overflow-hidden">
+                                <div className="flex items-center gap-2 py-1">
+                                    <span className="text-xs tracking-wide text-[var(--app-shell-soft-text)]">Processing</span>
+                                    <span className="inline-flex items-center gap-[3px]">
+                                        <span className="w-1 h-1 rounded-full bg-[var(--app-shell-soft-text)]/50 animate-[pulse-dot_1.4s_ease-in-out_infinite]" />
+                                        <span className="w-1 h-1 rounded-full bg-[var(--app-shell-soft-text)]/50 animate-[pulse-dot_1.4s_ease-in-out_0.2s_infinite]" />
+                                        <span className="w-1 h-1 rounded-full bg-[var(--app-shell-soft-text)]/50 animate-[pulse-dot_1.4s_ease-in-out_0.4s_infinite]" />
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
                     {/* Typing indicators */}
                     {Object.entries(streaming)
                         .filter(([, entry]) => entry.rootMessageId === rootMessageId)
@@ -245,7 +284,7 @@ export function ThreadView({
                             const sp = participantMap[pid];
                             const hasContent = entry.content.trim().length > 0;
                             return (
-                                <div key={`streaming-${pid}`} className="flex gap-4 group relative">
+                                <div key={`streaming-${pid}`} className="flex gap-4 group relative animate-in fade-in slide-in-from-bottom-2 duration-300">
                                     <div className="flex-shrink-0 mt-1">
                                         <NextLink href={`/agents/${sp?.id || pid}`} className="hover:ring-2 hover:ring-[var(--ring)] rounded-full transition-shadow">
                                             <img
@@ -273,7 +312,7 @@ export function ThreadView({
                                             )}
                                         </div>
                                         {hasContent && (
-                                            <div className="rounded-2xl p-4 text-[15px] leading-relaxed shadow-sm border bg-[var(--app-shell-surface)] text-[var(--foreground)] border-[var(--app-shell-border)]">
+                                            <div className="surface-card rounded-2xl p-5 text-[15px] leading-relaxed">
                                                 <Markdown content={stripMarkers(entry.content)} isUser={false} />
                                             </div>
                                         )}
@@ -286,7 +325,7 @@ export function ThreadView({
             </div>
 
             {/* Composer Area */}
-            <div className="z-20">
+            <div className="z-20 transition-colors duration-200">
                 {renderReplyComposer(rootMessageId)}
             </div>
         </div>

package/cloud-runtime/standalone/components/thread/WorkspaceSidebar.tsx

@@ -10,6 +10,7 @@ import {
   FolderGit2,
   PanelLeftClose,
   Pencil,
+  BrainCircuit,
   LayoutDashboard,
   Plus,
   Search,
@@ -53,6 +54,9 @@ interface WorkspaceSidebarProps {
   onReorderProjectAgents?: (projectId: string, orderedAgentIds: string[]) => Promise<unknown>;
   onUpdateParticipant?: (participant: Participant) => Promise<unknown>;
   onSelectProject?: (projectId: string) => void;
+  getProjectBoardHref?: (project: ProjectWithAgents) => string;
+  activeProjectId?: string | null;
+  activeProjectView?: "board" | "thread" | "knowledge" | null;
 }
 
 export function WorkspaceSidebar({
@@ -83,6 +87,9 @@ export function WorkspaceSidebar({
   onReorderProjectAgents,
   onUpdateParticipant,
   onSelectProject,
+  getProjectBoardHref,
+  activeProjectId = null,
+  activeProjectView = null,
 }: WorkspaceSidebarProps) {
   const emptyCtaRef = useRef<HTMLButtonElement | null>(null);
   const [expandedProjects, setExpandedProjects] = useState<Set<string>>(new Set());
@@ -250,6 +257,10 @@ export function WorkspaceSidebar({
   const sortedWorkspaces = [...threads].sort((a, b) => (a.title ?? "").localeCompare(b.title ?? ""));
   const nonDefaultProjects = projectsProp.filter((project) => !project.is_default);
   const unassignedThreads = sortedWorkspaces.filter((thread) => !nonDefaultProjects.some((project) => project.thread_ids?.includes(thread.id)));
+  const resolveProjectBoardHref = useCallback(
+    (project: ProjectWithAgents) => getProjectBoardHref?.(project) ?? `/projects/${project.slug}`,
+    [getProjectBoardHref]
+  );
 
   useFocusManagement({
     focusTarget: emptyCtaRef,
@@ -391,26 +402,32 @@ export function WorkspaceSidebar({
           {nonDefaultProjects.map((project) => {
             const projectIsExpanded = expandedProjects.has(project.id);
             const projectThreads = sortedWorkspaces.filter((thread) => project.thread_ids?.includes(thread.id));
+            const isActiveProject = project.id === activeProjectId;
+            const primaryProjectThreadId = projectThreads[0]?.id ?? project.thread_ids?.[0] ?? null;
+            const isActiveProjectThread = isActiveProject && activeProjectView === "thread" && primaryProjectThreadId === activeThreadId;
+            const isActiveProjectBoard = isActiveProject && activeProjectView === "board";
+            const isActiveProjectKnowledge = isActiveProject && activeProjectView === "knowledge";
 
             return (
               <div key={project.id}>
                 <div className="workspace-sidebar__workspace-item group">
-                  <button
-                    type="button"
-                    className="workspace-sidebar__nav-item workspace-sidebar__workspace-nav-item"
-                    onClick={() => {
-                      onSelectProject?.(project.id);
-                      toggleProjectExpanded(project.id);
-                    }}
-                  >
-                    {projectIsExpanded ? (
-                      <ChevronDown size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" onClick={(e) => { e.stopPropagation(); toggleProjectExpanded(project.id); }} />
-                    ) : (
-                      <ChevronRight size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" onClick={(e) => { e.stopPropagation(); toggleProjectExpanded(project.id); }} />
-                    )}
+                  <div className="workspace-sidebar__nav-item workspace-sidebar__workspace-nav-item">
+                    <button
+                      type="button"
+                      className="inline-flex items-center justify-center rounded-sm text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
+                      onClick={() => toggleProjectExpanded(project.id)}
+                      aria-label={projectIsExpanded ? `Collapse ${project.name}` : `Expand ${project.name}`}
+                      title={projectIsExpanded ? "Collapse project" : "Expand project"}
+                    >
+                      {projectIsExpanded ? (
+                        <ChevronDown size={14} className="flex-shrink-0" />
+                      ) : (
+                        <ChevronRight size={14} className="flex-shrink-0" />
+                      )}
+                    </button>
                     <Folder size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                     <span className="workspace-sidebar__workspace-title">{project.name}</span>
-                  </button>
+                  </div>
                   <div className="workspace-sidebar__workspace-actions">
                     <button
                       type="button"
@@ -435,12 +452,12 @@ export function WorkspaceSidebar({
                 {projectIsExpanded && (
                   <div className="ml-4 my-1 flex flex-col gap-0.5 border-l border-[var(--app-shell-border)] pl-3">
                     <div className="workspace-sidebar__workspace-item">
-                      {projectThreads[0] ? (
+                      {primaryProjectThreadId ? (
                         <button
                           type="button"
-                          className={`workspace-sidebar__nav-item ${projectThreads[0].id === activeThreadId ? "workspace-sidebar__nav-item--active" : ""}`}
-                          onClick={() => onSelectThread(projectThreads[0].id)}
-                          aria-current={projectThreads[0].id === activeThreadId ? "page" : undefined}
+                          className={`workspace-sidebar__nav-item ${isActiveProjectThread ? "workspace-sidebar__nav-item--active" : ""}`}
+                          onClick={() => onSelectThread(primaryProjectThreadId)}
+                          aria-current={isActiveProjectThread ? "page" : undefined}
                         >
                           <Hash size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                           <span className="workspace-sidebar__workspace-title text-xs">Thread</span>
@@ -458,13 +475,24 @@ export function WorkspaceSidebar({
                     </div>
                     <div className="workspace-sidebar__workspace-item">
                       <Link
-                        href={`/projects/${project.slug}`}
-                        className="workspace-sidebar__nav-item"
+                        href={resolveProjectBoardHref(project)}
+                        className={`workspace-sidebar__nav-item ${isActiveProjectBoard ? "workspace-sidebar__nav-item--active" : ""}`}
+                        aria-current={isActiveProjectBoard ? "page" : undefined}
                       >
                         <LayoutDashboard size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                         <span className="workspace-sidebar__workspace-title text-xs">Board</span>
                       </Link>
                     </div>
+                    <div className="workspace-sidebar__workspace-item">
+                      <Link
+                        href={`/projects/${project.slug}/knowledge`}
+                        className={`workspace-sidebar__nav-item ${isActiveProjectKnowledge ? "workspace-sidebar__nav-item--active" : ""}`}
+                        aria-current={isActiveProjectKnowledge ? "page" : undefined}
+                      >
+                        <BrainCircuit size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
+                        <span className="workspace-sidebar__workspace-title text-xs">Knowledge</span>
+                      </Link>
+                    </div>
                     <div className="pt-1">
                       <div className="group/repos-header flex items-center justify-between px-3 py-1">
                         <p className="text-[10px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">Repos</p>
@@ -739,9 +767,9 @@ export function WorkspaceSidebar({
               </div>
               {repoDetail.repoId ? (
                 <div>
-                  <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">System-Generated Repo Knowledge</p>
+                  <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">Living Repo Note</p>
                   {repoDetail.isLoadingKnowledge ? (
-                    <p className="text-sm text-[var(--muted-foreground)]">Loading generated knowledge…</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">Loading repo note…</p>
                   ) : repoDetail.generatedKnowledge.length > 0 ? (
                     <div className="space-y-2">
                       {repoDetail.generatedKnowledge.slice(0, 5).map((item) => (
@@ -754,7 +782,7 @@ export function WorkspaceSidebar({
                       ))}
                     </div>
                   ) : (
-                    <p className="text-sm text-[var(--muted-foreground)]">No generated repo knowledge yet.</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">No repo note yet.</p>
                   )}
                 </div>
               ) : null}

package/cloud-runtime/standalone/hooks/useComposerHistory.ts

@@ -0,0 +1,130 @@
+import { useState, useCallback, useRef } from "react";
+
+const STORAGE_KEY = "agx-composer-history";
+const MAX_HISTORY = 100;
+
+/**
+ * Shell-style input history for the composer.
+ * - ArrowUp/Down navigates through previously sent messages.
+ * - While typing, ArrowUp shows the most recent entry that starts with the current text (partial match).
+ * - History is persisted in localStorage across sessions.
+ */
+export function useComposerHistory() {
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  // Stores the "live" text the user was typing before they started navigating
+  const draftRef = useRef("");
+
+  const getHistory = useCallback((): string[] => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  }, []);
+
+  const pushEntry = useCallback((text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    const history = getHistory();
+    // Deduplicate: remove if already exists at top
+    const filtered = history.filter((h) => h !== trimmed);
+    filtered.unshift(trimmed);
+    // Cap size
+    if (filtered.length > MAX_HISTORY) filtered.length = MAX_HISTORY;
+
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered));
+    } catch {
+      // localStorage full — ignore
+    }
+    setHistoryIndex(-1);
+    draftRef.current = "";
+  }, [getHistory]);
+
+  /**
+   * Handle ArrowUp/ArrowDown in the composer.
+   * Returns the text to set in the editor, or null if the event shouldn't be handled.
+   *
+   * @param direction "up" | "down"
+   * @param currentText the current editor text
+   * @param cursorAtBoundary true if cursor is at start (up) or end (down) of the editor
+   */
+  const navigate = useCallback(
+    (
+      direction: "up" | "down",
+      currentText: string,
+      cursorAtBoundary: boolean
+    ): string | null => {
+      if (!cursorAtBoundary) return null;
+
+      const history = getHistory();
+      if (history.length === 0) return null;
+
+      if (direction === "up") {
+        // Save draft when starting navigation
+        if (historyIndex === -1) {
+          draftRef.current = currentText;
+        }
+
+        // Partial match: find next entry that starts with draft
+        const draft = draftRef.current;
+        let startFrom = historyIndex + 1;
+
+        if (draft) {
+          // Find next matching entry
+          for (let i = startFrom; i < history.length; i++) {
+            if (history[i].toLowerCase().startsWith(draft.toLowerCase())) {
+              setHistoryIndex(i);
+              return history[i];
+            }
+          }
+          return null; // No more matches
+        }
+
+        // No draft — simple sequential navigation
+        const nextIndex = Math.min(historyIndex + 1, history.length - 1);
+        if (nextIndex === historyIndex && historyIndex !== -1) return null;
+        setHistoryIndex(nextIndex);
+        return history[nextIndex];
+      }
+
+      // direction === "down"
+      if (historyIndex <= 0) {
+        // Back to draft
+        if (historyIndex === 0) {
+          setHistoryIndex(-1);
+          return draftRef.current;
+        }
+        return null; // Already at draft
+      }
+
+      const draft = draftRef.current;
+      if (draft) {
+        // Find previous matching entry (going back toward recent)
+        for (let i = historyIndex - 1; i >= 0; i--) {
+          if (history[i].toLowerCase().startsWith(draft.toLowerCase())) {
+            setHistoryIndex(i);
+            return history[i];
+          }
+        }
+        // No more matches, return to draft
+        setHistoryIndex(-1);
+        return draftRef.current;
+      }
+
+      const nextIndex = historyIndex - 1;
+      setHistoryIndex(nextIndex);
+      return history[nextIndex];
+    },
+    [getHistory, historyIndex]
+  );
+
+  const resetNavigation = useCallback(() => {
+    setHistoryIndex(-1);
+    draftRef.current = "";
+  }, []);
+
+  return { pushEntry, navigate, resetNavigation, historyIndex };
+}

package/cloud-runtime/standalone/hooks/useGroupChat.ts

@@ -23,9 +23,17 @@ export interface StreamingEntry {
   rootMessageId: string | null;
 }
 
+export interface ChatRunInfo {
+  chatRunId: string;
+  threadId: string;
+  rootMessageId: string | null;
+  status: "queued" | "running" | "awaiting_user" | "blocked" | "completed" | "failed" | "cancelled";
+}
+
 export function useGroupChat(threadId: string | null) {
   const [messages, setMessages] = useState<GroupMessage[]>([]);
   const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [chatRuns, setChatRuns] = useState<ChatRunInfo[]>([]);
   const threadIdRef = useRef<string | null>(threadId);
   const prevThreadIdRef = useRef<string | null>(threadId);
 
@@ -37,6 +45,7 @@ export function useGroupChat(threadId: string | null) {
     prevThreadIdRef.current = threadId;
     setMessages([]);
     setLogs([]);
+    setChatRuns([]);
   }
 
   const loadHistory = useCallback(async (threadIdOverride?: string | null) => {
@@ -121,7 +130,7 @@ export function useGroupChat(threadId: string | null) {
       setMessages((prev) => [...prev, userMsg]);
 
       try {
-        await fetch("/api/chat", {
+        const response = await fetch("/api/chat", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -135,6 +144,18 @@ export function useGroupChat(threadId: string | null) {
             projectSlug: projectSlug?.trim() || undefined,
           }),
         });
+        const payload = await response.json().catch(() => null) as { chatRunId?: string } | null;
+        if (response.ok && payload?.chatRunId) {
+          setChatRuns((prev) => [
+            {
+              chatRunId: payload.chatRunId!,
+              threadId: activeThreadId,
+              rootMessageId: rootMessageId || userMessageId,
+              status: "queued",
+            },
+            ...prev.filter((run) => run.chatRunId !== payload.chatRunId),
+          ]);
+        }
       } catch {
         // network error — message was already added optimistically
       }
@@ -191,6 +212,8 @@ export function useGroupChat(threadId: string | null) {
     loadHistory,
     clearHistory,
     clearLogs,
+    chatRuns,
+    setChatRuns,
     stop,
     stopThread,
   };