@agent-native/core 0.111.4 → 0.113.0

package/corpus/templates/brain/app/components/layout/Sidebar.tsx

@@ -10,25 +10,18 @@ import { useT } from "@agent-native/core/client/i18n";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
 import {
-  IconArchive,
-  IconDots,
-  IconEdit,
+  ChatHistoryList,
+  type ChatHistoryItem,
+} from "@agent-native/toolkit/chat-history";
+import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconPin,
   IconPlus,
 } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
+import { useEffect, useMemo } from "react";
 import { Link, NavLink, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
 import {
   Tooltip,
   TooltipContent,
@@ -104,10 +97,6 @@ function BrainChatsSection() {
     autoCreate: false,
     restoreActiveThread: false,
   });
-  const [renamingThreadId, setRenamingThreadId] = useState<string | null>(null);
-  const [renameDraft, setRenameDraft] = useState("");
-  const renameInputRef = useRef<HTMLInputElement | null>(null);
-  const committingRenameRef = useRef(false);
 
   const visibleThreads = useMemo(
     () =>
@@ -117,6 +106,20 @@ function BrainChatsSection() {
         .slice(0, 8),
     [threads],
   );
+  const chatItems = useMemo<ChatHistoryItem[]>(
+    () =>
+      visibleThreads.map((thread) => ({
+        id: thread.id,
+        title: threadTitle(thread),
+        titleText: threadTitle(thread),
+        timestamp:
+          thread.id === activeThreadId
+            ? undefined
+            : formatThreadAge(threadUpdatedAt(thread)),
+        pinned: Boolean(thread.pinnedAt),
+      })),
+    [activeThreadId, visibleThreads],
+  );
 
   useEffect(() => {
     const refresh = () => refreshThreads();
@@ -137,14 +140,6 @@ function BrainChatsSection() {
     };
   }, [refreshThreads]);
 
-  useEffect(() => {
-    if (!renamingThreadId) return;
-    requestAnimationFrame(() => {
-      renameInputRef.current?.focus();
-      renameInputRef.current?.select();
-    });
-  }, [renamingThreadId]);
-
   function openThread(threadId: string, options?: { isNew?: boolean }) {
     switchThread(threadId);
     navigateWithAgentChatViewTransition(navigate, "/");
@@ -175,36 +170,10 @@ function BrainChatsSection() {
     }
   }
 
-  function startRenameThread(thread: ChatThreadSummary) {
-    committingRenameRef.current = false;
-    setRenameDraft(threadTitle(thread));
-    setRenamingThreadId(thread.id);
-  }
-
-  function cancelRenameThread() {
-    committingRenameRef.current = true;
-    setRenamingThreadId(null);
-    setRenameDraft("");
-  }
-
-  async function commitRenameThread() {
-    if (committingRenameRef.current) return;
-    const threadId = renamingThreadId;
-    const title = renameDraft.trim();
-    if (!threadId) return;
-    committingRenameRef.current = true;
-    setRenamingThreadId(null);
-    setRenameDraft("");
-    if (title) {
-      const renamed = await renameThread(threadId, title);
+  function handleRenameThread(threadId: string, title: string) {
+    void renameThread(threadId, title).then((renamed) => {
       if (!renamed) toast.error(t("chat.renameFailed"));
-    }
-    committingRenameRef.current = false;
-  }
-
-  function handleRenameSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    void commitRenameThread();
+    });
   }
 
   return (
@@ -227,107 +196,32 @@ function BrainChatsSection() {
           <TooltipContent>{t("chat.newChat")}</TooltipContent>
         </Tooltip>
       </div>
-      <div className="grid gap-0.5">
-        {visibleThreads.map((thread) => {
-          const isActive = thread.id === activeThreadId;
-          const isRenaming = thread.id === renamingThreadId;
-          return (
-            <div
-              key={thread.id}
-              className={cn(
-                "group flex h-8 min-w-0 items-center rounded-md text-sm transition-colors",
-                isActive
-                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                  : "text-sidebar-foreground/80 hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
-              )}
-            >
-              {isRenaming ? (
-                <form
-                  onSubmit={handleRenameSubmit}
-                  className="flex h-full min-w-0 flex-1 items-center px-1.5"
-                >
-                  <Input
-                    ref={renameInputRef}
-                    value={renameDraft}
-                    onChange={(event) => setRenameDraft(event.target.value)}
-                    onBlur={() => void commitRenameThread()}
-                    onKeyDown={(event) => {
-                      if (event.key === "Escape") {
-                        event.preventDefault();
-                        cancelRenameThread();
-                      }
-                    }}
-                    maxLength={160}
-                    aria-label={t("chat.renameThread", {
-                      title: threadTitle(thread),
-                    })}
-                    className="h-6 min-w-0 rounded-sm border-sidebar-border bg-background px-1.5 text-xs"
-                  />
-                </form>
-              ) : (
-                <>
-                  <button
-                    type="button"
-                    onClick={() => openThread(thread.id)}
-                    className="flex h-full min-w-0 flex-1 items-center px-2 text-start outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <span className="min-w-0 flex-1 truncate">
-                      {threadTitle(thread)}
-                    </span>
-                  </button>
-                  <div className="relative flex size-7 shrink-0 items-center justify-end pe-1">
-                    <span className="text-[11px] text-sidebar-foreground/50 transition-opacity group-hover:opacity-0 group-focus-within:opacity-0">
-                      {isActive ? "" : formatThreadAge(threadUpdatedAt(thread))}
-                    </span>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          aria-label={t("chat.optionsFor", {
-                            title: threadTitle(thread),
-                          })}
-                          className="absolute end-1 flex size-6 items-center justify-center rounded-md text-sidebar-foreground/65 opacity-0 transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
-                        >
-                          <IconDots className="size-4" />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="end"
-                        side="right"
-                        sideOffset={6}
-                      >
-                        <DropdownMenuItem
-                          onSelect={() => startRenameThread(thread)}
-                        >
-                          <IconEdit className="size-4" />
-                          {t("chat.renameChat")}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onSelect={() =>
-                            void pinThread(thread.id, !thread.pinnedAt)
-                          }
-                        >
-                          <IconPin className="size-4" />
-                          {thread.pinnedAt
-                            ? t("chat.unpinChat")
-                            : t("chat.pinChat")}
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          variant="destructive"
-                          onSelect={() => void handleArchiveThread(thread.id)}
-                        >
-                          <IconArchive className="size-4" />
-                          {t("chat.archiveChat")}
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
+      {visibleThreads.length > 0 && (
+        <ChatHistoryList
+          items={chatItems}
+          activeId={activeThreadId}
+          onSelect={openThread}
+          onTogglePin={(threadId) => {
+            const thread = visibleThreads.find((item) => item.id === threadId);
+            if (thread) void pinThread(threadId, !thread.pinnedAt);
+          }}
+          onRename={handleRenameThread}
+          renameMaxLength={160}
+          onDelete={(threadId) => void handleArchiveThread(threadId)}
+          labels={{
+            options: (item) =>
+              t("chat.optionsFor", { title: item.titleText ?? "" }),
+            renameInput: (item) =>
+              t("chat.renameThread", { title: item.titleText ?? "" }),
+            rename: t("chat.renameChat"),
+            pin: t("chat.pinChat"),
+            unpin: t("chat.unpinChat"),
+            delete: t("chat.archiveChat"),
+          }}
+          variant="rail"
+          className="min-w-0"
+        />
+      )}
     </div>
   );
 }

package/corpus/templates/brain/app/hooks/use-distillation-bridge.ts

@@ -12,6 +12,7 @@ interface DistillationRequest {
   captureId?: string;
   queueId?: string;
   sourceId?: string;
+  claimToken?: string;
   requestedAt?: string;
   instructions?: string | null;
   guidance?: Record<string, unknown>;
@@ -52,15 +53,17 @@ async function clearRequest(captureId: string): Promise<void> {
 async function claimDistillation(
   captureId: string,
   queueId?: string,
-): Promise<boolean> {
+): Promise<string | null> {
   try {
     const payload = await callAction(
       "claim-distillation" as any,
       { captureId, queueId } as any,
     );
-    return Boolean(payload?.claimed);
+    return payload?.claimed && typeof payload.claimToken === "string"
+      ? payload.claimToken
+      : null;
   } catch {
-    return false;
+    return null;
   }
 }
 
@@ -121,18 +124,19 @@ export function useDistillationBridge(): void {
             request.requestedAt ?? "0"
           }`;
           if (dispatched.current.has(dispatchKey)) continue;
-          const claimed = await claimDistillation(capture.id, queueId);
-          if (!claimed) continue;
+          const claimToken = await claimDistillation(capture.id, queueId);
+          if (!claimToken || !queueId) continue;
           dispatched.current.add(dispatchKey);
 
           sendToAgentChat({
-            message: request.message ?? buildMessage(capture),
+            message: buildMessage(capture, queueId, claimToken),
             context: JSON.stringify(
               {
-                request,
+                request: { ...request, claimToken },
                 capture: summarizeCapture(capture),
                 instructions: request.instructions ?? undefined,
                 guidance: request.guidance,
+                claim: { queueId, claimToken },
               },
               null,
               2,
@@ -164,12 +168,17 @@ export function useDistillationBridge(): void {
   }, [capturesKey, dispatchableCaptures, capturesQuery.dataUpdatedAt]);
 }
 
-function buildMessage(capture: BrainCaptureReviewItem) {
+function buildMessage(
+  capture: BrainCaptureReviewItem,
+  queueId: string,
+  claimToken: string,
+) {
   return (
     `Distill Brain capture ${capture.id} (${capture.title}). ` +
     `Use get-capture with includeRawContent=true before exact quote ` +
     `validation, write durable company knowledge with write-knowledge, then ` +
-    `mark the capture distilled or ignored.`
+    `mark the capture distilled or ignored with queueId ${queueId} and ` +
+    `claimToken ${claimToken}.`
   );
 }
 

package/corpus/templates/brain/app/hooks/use-navigation-state.ts

@@ -13,6 +13,7 @@ export interface NavigationState {
   view: BrainView;
   path?: string;
   query?: string;
+  projectId?: string;
   source?: string;
   sourceType?: string;
   type?: string;
@@ -45,6 +46,7 @@ export function useNavigationState() {
         view: viewFromPath(localPathname),
         path: appPath(`${localPathname}${search}`),
         query: params.get("q") || undefined,
+        projectId: params.get("projectId") || undefined,
         source: params.get("source") || undefined,
         sourceType: params.get("type") || undefined,
         type: params.get("type") || undefined,
@@ -64,6 +66,7 @@ export function useNavigationState() {
     getCommandPath: (navCommand) => {
       const params = new URLSearchParams();
       if (navCommand.query) params.set("q", navCommand.query);
+      if (navCommand.projectId) params.set("projectId", navCommand.projectId);
       if (navCommand.source) params.set("source", navCommand.source);
       if (navCommand.type || navCommand.sourceType) {
         params.set("type", navCommand.type ?? navCommand.sourceType ?? "");