@agent-native/core 0.132.1 → 0.133.0

package/corpus/templates/factory/app/components/factory/FactoryInspector.tsx

@@ -0,0 +1,388 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconArrowRight,
+  IconMessagePlus,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+import type {
+  FactoryCanvasEdge,
+  FactoryCanvasGraph,
+  FactoryCanvasNode,
+} from "./FactoryCanvas";
+
+export type FactoryComment = {
+  id: string;
+  targetType: string;
+  targetId?: string | null;
+  body: string;
+  createdAt: string;
+  ownerEmail: string;
+};
+
+interface FactoryInspectorProps {
+  graph: FactoryCanvasGraph;
+  selectedNode?: FactoryCanvasNode;
+  selectedEdge?: FactoryCanvasEdge;
+  comments: FactoryComment[];
+  dirty: boolean;
+  saving: boolean;
+  onGraphChange: (graph: FactoryCanvasGraph) => void;
+  onSave: () => void;
+  onAddComment: (
+    targetType: "canvas" | "node" | "edge",
+    targetId?: string,
+    body?: string,
+  ) => void;
+  onAddNode: () => void;
+  onDeleteNode: (nodeId: string) => void;
+  onConnect: (sourceId: string, targetId: string) => void;
+}
+
+export function FactoryInspector({
+  graph,
+  selectedNode,
+  selectedEdge,
+  comments,
+  dirty,
+  saving,
+  onGraphChange,
+  onSave,
+  onAddComment,
+  onAddNode,
+  onDeleteNode,
+  onConnect,
+}: FactoryInspectorProps) {
+  const t = useT();
+  const [commentDraft, setCommentDraft] = useState("");
+  const [connectTarget, setConnectTarget] = useState("");
+  const targetType = selectedNode ? "node" : selectedEdge ? "edge" : "canvas";
+  const targetId = selectedNode?.id ?? selectedEdge?.id;
+  const targetComments = useMemo(
+    () =>
+      comments.filter(
+        (comment) =>
+          comment.targetType === targetType &&
+          (targetType === "canvas" || comment.targetId === targetId),
+      ),
+    [comments, targetId, targetType],
+  );
+  const outgoingTargets = graph.nodes.filter(
+    (node) => node.id !== selectedNode?.id,
+  );
+
+  function updateNode(patch: Partial<FactoryCanvasNode>) {
+    if (!selectedNode) return;
+    onGraphChange({
+      ...graph,
+      nodes: graph.nodes.map((node) =>
+        node.id === selectedNode.id ? { ...node, ...patch } : node,
+      ),
+    });
+  }
+
+  function updateEdge(patch: Partial<FactoryCanvasEdge>) {
+    if (!selectedEdge) return;
+    onGraphChange({
+      ...graph,
+      edges: graph.edges.map((edge) =>
+        edge.id === selectedEdge.id ? { ...edge, ...patch } : edge,
+      ),
+    });
+  }
+
+  function submitComment() {
+    const body = commentDraft.trim();
+    if (!body) return;
+    onAddComment(targetType, targetId, body);
+    setCommentDraft("");
+  }
+
+  return (
+    <aside className="flex min-h-0 flex-col border-l bg-background">
+      <div className="flex items-start justify-between gap-3 border-b px-4 py-4">
+        <div className="min-w-0">
+          <p className="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+            {t("factoryInspector.title")}
+          </p>
+          <h2 className="mt-1 truncate text-base font-semibold">
+            {selectedNode?.label ?? selectedEdge?.label ?? graph.name}
+          </h2>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            {selectedNode?.description ??
+              selectedEdge?.condition ??
+              graph.description}
+          </p>
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
+        {!selectedNode && !selectedEdge ? (
+          <CanvasInspector
+            graph={graph}
+            onGraphChange={onGraphChange}
+            onAddNode={onAddNode}
+          />
+        ) : selectedNode ? (
+          <>
+            <div className="grid gap-1.5">
+              <Label htmlFor="factory-node-label">
+                {t("factoryInspector.stepName")}
+              </Label>
+              <Input
+                id="factory-node-label"
+                value={selectedNode.label}
+                onChange={(event) => updateNode({ label: event.target.value })}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="factory-node-description">
+                {t("factoryInspector.stepDescription")}
+              </Label>
+              <Textarea
+                id="factory-node-description"
+                value={selectedNode.description}
+                onChange={(event) =>
+                  updateNode({ description: event.target.value })
+                }
+                rows={3}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="factory-node-provider">Provider</Label>
+              <select
+                id="factory-node-provider"
+                value={selectedNode.provider ?? "factory"}
+                onChange={(event) =>
+                  updateNode({
+                    provider: event.target
+                      .value as FactoryCanvasNode["provider"],
+                  })
+                }
+                className="h-9 rounded-md border bg-background px-3 text-sm"
+              >
+                <option value="factory">Factory</option>
+                <option value="slack">Slack</option>
+                <option value="github">GitHub</option>
+                <option value="builder">Builder</option>
+                <option value="claude">Claude</option>
+                <option value="codex">Codex</option>
+                <option value="human">Human</option>
+              </select>
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="factory-node-agent">
+                {t("factoryInspector.agentOwner")}
+              </Label>
+              <Input
+                id="factory-node-agent"
+                value={selectedNode.agent ?? ""}
+                onChange={(event) => updateNode({ agent: event.target.value })}
+                placeholder={t("factoryInspector.optional")}
+              />
+            </div>
+            <div className="rounded-lg border bg-muted/25 p-3">
+              <p className="text-xs font-medium">
+                {t("factoryInspector.connectStep")}
+              </p>
+              <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                {t("factoryInspector.connectDescription")}
+              </p>
+              <div className="mt-3 flex gap-2">
+                <select
+                  aria-label={t("factoryInspector.targetStep")}
+                  value={connectTarget}
+                  onChange={(event) => setConnectTarget(event.target.value)}
+                  className="h-9 min-w-0 flex-1 rounded-md border bg-background px-3 text-sm"
+                >
+                  <option value="">{t("factoryInspector.chooseTarget")}</option>
+                  {outgoingTargets.map((node) => (
+                    <option key={node.id} value={node.id}>
+                      {node.label}
+                    </option>
+                  ))}
+                </select>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  aria-label={t("factoryInspector.connectSteps")}
+                  disabled={!connectTarget}
+                  onClick={() => {
+                    onConnect(selectedNode.id, connectTarget);
+                    setConnectTarget("");
+                  }}
+                >
+                  <IconArrowRight className="size-4" />
+                </Button>
+              </div>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full text-destructive hover:text-destructive"
+              onClick={() => onDeleteNode(selectedNode.id)}
+            >
+              <IconTrash className="size-4" />
+              {t("factoryInspector.removeStep")}
+            </Button>
+          </>
+        ) : (
+          <>
+            <div className="grid gap-1.5">
+              <Label htmlFor="factory-edge-label">
+                {t("factoryInspector.routeLabel")}
+              </Label>
+              <Input
+                id="factory-edge-label"
+                value={selectedEdge?.label ?? ""}
+                onChange={(event) => updateEdge({ label: event.target.value })}
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label htmlFor="factory-edge-condition">
+                {t("factoryInspector.routeCondition")}
+              </Label>
+              <Textarea
+                id="factory-edge-condition"
+                value={selectedEdge?.condition ?? ""}
+                onChange={(event) =>
+                  updateEdge({ condition: event.target.value })
+                }
+                rows={4}
+                placeholder={t("factoryInspector.routePlaceholder")}
+              />
+            </div>
+          </>
+        )}
+
+        <div className="border-t pt-4">
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-xs font-medium">
+              {targetType === "canvas"
+                ? t("factoryInspector.factoryComments")
+                : t("factoryInspector.selectionComments")}
+            </p>
+            <span className="text-xs text-muted-foreground">
+              v{graph.version}
+            </span>
+          </div>
+          <div className="mt-3 space-y-3">
+            {targetComments.length === 0 ? (
+              <p className="text-xs leading-5 text-muted-foreground">
+                {t("factoryInspector.commentEmpty")}
+              </p>
+            ) : (
+              targetComments.map((comment) => (
+                <div key={comment.id} className="rounded-lg border p-3">
+                  <p className="text-sm leading-5">{comment.body}</p>
+                  <p className="mt-2 text-[11px] text-muted-foreground">
+                    {comment.ownerEmail} ·{" "}
+                    {formatCommentDate(comment.createdAt)}
+                  </p>
+                </div>
+              ))
+            )}
+            <Textarea
+              value={commentDraft}
+              onChange={(event) => setCommentDraft(event.target.value)}
+              placeholder={t("factoryInspector.leaveComment")}
+              rows={3}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              disabled={!commentDraft.trim()}
+              onClick={submitComment}
+            >
+              <IconMessagePlus className="size-4" />
+              {t("factoryInspector.addComment")}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t bg-muted/15 p-4">
+        <Button
+          type="button"
+          className="w-full"
+          disabled={!dirty || saving}
+          onClick={onSave}
+        >
+          {saving
+            ? t("factoryInspector.savingGraph")
+            : dirty
+              ? t("factoryInspector.saveGraph")
+              : t("factoryInspector.savedGraph")}
+        </Button>
+        <p className="mt-2 text-center text-[11px] text-muted-foreground">
+          {t("factoryInspector.saveNote")}
+        </p>
+      </div>
+    </aside>
+  );
+}
+
+function CanvasInspector({
+  graph,
+  onGraphChange,
+  onAddNode,
+}: {
+  graph: FactoryCanvasGraph;
+  onGraphChange: (graph: FactoryCanvasGraph) => void;
+  onAddNode: () => void;
+}) {
+  const t = useT();
+  return (
+    <>
+      <div className="grid gap-1.5">
+        <Label htmlFor="factory-name">
+          {t("factoryInspector.factoryName")}
+        </Label>
+        <Input
+          id="factory-name"
+          value={graph.name}
+          onChange={(event) =>
+            onGraphChange({ ...graph, name: event.target.value })
+          }
+        />
+      </div>
+      <div className="grid gap-1.5">
+        <Label htmlFor="factory-description">
+          {t("factoryInspector.factoryDescription")}
+        </Label>
+        <Textarea
+          id="factory-description"
+          value={graph.description}
+          onChange={(event) =>
+            onGraphChange({ ...graph, description: event.target.value })
+          }
+          rows={4}
+        />
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        className="w-full"
+        onClick={onAddNode}
+      >
+        <IconPlus className="size-4" />
+        {t("factoryInspector.addStep")}
+      </Button>
+    </>
+  );
+}
+
+function formatCommentDate(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString([], { month: "short", day: "numeric" });
+}

package/corpus/templates/factory/app/components/layout/Header.tsx

@@ -0,0 +1,60 @@
+import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  useHeaderTitle,
+  useHeaderActions,
+} from "@agent-native/toolkit/app-shell";
+import { IconMenu2 } from "@tabler/icons-react";
+import { useLocation } from "react-router";
+
+import { APP_TITLE } from "@/lib/app-config";
+
+const pageTitleKeys: Record<string, string> = {
+  "/": "navigation.chat",
+  "/observability": "navigation.observability",
+  "/agent": "settings.agentTitle",
+  "/settings": "navigation.settings",
+};
+
+function resolveTitle(pathname: string, t: (key: string) => string): string {
+  if (pageTitleKeys[pathname]) return t(pageTitleKeys[pathname]);
+  if (pathname.startsWith("/extensions")) return t("navigation.extensions");
+  return APP_TITLE;
+}
+
+interface HeaderProps {
+  onOpenMobileSidebar?: () => void;
+}
+
+export function Header({ onOpenMobileSidebar }: HeaderProps) {
+  const location = useLocation();
+  const t = useT();
+  const title = useHeaderTitle();
+  const actions = useHeaderActions();
+
+  return (
+    <header className="flex h-12 items-center gap-3 border-b border-border bg-background px-4 lg:px-6 shrink-0">
+      {onOpenMobileSidebar && (
+        <button
+          type="button"
+          onClick={onOpenMobileSidebar}
+          aria-label={t("navigation.openNavigation")}
+          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent md:hidden"
+        >
+          <IconMenu2 className="h-4 w-4" />
+        </button>
+      )}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        {title ?? (
+          <h1 className="text-lg font-semibold tracking-tight truncate">
+            {resolveTitle(location.pathname, t)}
+          </h1>
+        )}
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {actions}
+        <AgentToggleButton />
+      </div>
+    </header>
+  );
+}

package/corpus/templates/factory/app/components/layout/Layout.tsx

@@ -0,0 +1,190 @@
+import {
+  AgentSidebar,
+  focusAgentChat,
+  isAgentChatHomeHandoffActive,
+  navigateWithAgentChatViewTransition,
+  useAgentChatHomeHandoff,
+  useAgentChatHomeHandoffLinks,
+} from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
+import { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
+import { IconMenu2 } from "@tabler/icons-react";
+import { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { APP_TITLE } from "@/lib/app-config";
+import { TAB_ID } from "@/lib/tab-id";
+
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const SIDEBAR_COLLAPSE_KEY = "chat.sidebar.collapsed";
+
+/**
+ * Routes whose page renders its own toolbar. Layout still wraps these with the
+ * left Sidebar and agent surfaces but skips the global Header so they don't
+ * double-stack chrome.
+ */
+function routeOwnsToolbar(pathname: string): boolean {
+  return (
+    pathname === "/" ||
+    pathname.startsWith("/chat/") ||
+    pathname === "/database" ||
+    pathname.startsWith("/extensions")
+  );
+}
+
+export function Layout({ children }: LayoutProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const t = useT();
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  const isChatRoute =
+    location.pathname === "/" || location.pathname.startsWith("/chat/");
+  const chatHomeHandoffActive = useAgentChatHomeHandoff({
+    storageKey: "chat",
+    activePath: location.pathname,
+    enabled: !isChatRoute,
+  });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive("chat");
+  useAgentChatHomeHandoffLinks({
+    storageKey: "chat",
+    isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
+    requireActiveHandoff: true,
+  });
+
+  useEffect(() => {
+    setMobileSidebarOpen(false);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    const closeMobileSidebar = () => setMobileSidebarOpen(false);
+    window.addEventListener("agent-chat:open-thread", closeMobileSidebar);
+    return () => {
+      window.removeEventListener("agent-chat:open-thread", closeMobileSidebar);
+    };
+  }, []);
+
+  useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSE_KEY);
+      if (stored !== null) setSidebarCollapsed(stored === "1");
+      // coercion-ok: browser storage may be unavailable; the default collapsed state remains usable.
+    } catch {
+      // Ignore storage access errors; the default collapsed state still works.
+    }
+  }, []);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(
+        SIDEBAR_COLLAPSE_KEY,
+        sidebarCollapsed ? "1" : "0",
+      );
+      // coercion-ok: persistence is best effort; the visible sidebar state remains authoritative.
+    } catch {
+      // Ignore storage access errors.
+    }
+  }, [sidebarCollapsed]);
+
+  const ownsToolbar = routeOwnsToolbar(location.pathname);
+  function openAskAgentFullscreen() {
+    focusAgentChat();
+    navigateWithAgentChatViewTransition(navigate, "/");
+  }
+
+  const contentFrame = (
+    <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
+      {isChatRoute ? (
+        <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border bg-card px-3 md:hidden">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => setMobileSidebarOpen(true)}
+            aria-label={t("navigation.openNavigation")}
+          >
+            <IconMenu2 className="size-4" />
+          </Button>
+          <span className="truncate text-sm font-semibold">{APP_TITLE}</span>
+        </div>
+      ) : ownsToolbar ? (
+        <div className="flex h-12 shrink-0 items-center border-b border-border px-4 md:hidden">
+          <button
+            type="button"
+            onClick={() => setMobileSidebarOpen(true)}
+            aria-label={t("navigation.openNavigation")}
+            className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <IconMenu2 className="h-4 w-4" />
+          </button>
+        </div>
+      ) : (
+        <Header onOpenMobileSidebar={() => setMobileSidebarOpen(true)} />
+      )}
+      <main className="agent-native-app-main min-w-0 flex-1 overflow-y-auto overscroll-contain">
+        {children}
+      </main>
+    </div>
+  );
+
+  return (
+    <HeaderActionsProvider>
+      <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
+        <div className="agent-layout-left-drawer hidden md:block">
+          <Sidebar
+            collapsed={sidebarCollapsed}
+            onCollapsedChange={setSidebarCollapsed}
+          />
+        </div>
+        <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
+          <SheetContent side="left" className="p-0 w-[260px]">
+            <SheetTitle className="sr-only">
+              {t("navigation.navigation")}
+            </SheetTitle>
+            <SheetDescription className="sr-only">
+              {t("navigation.navigationDescription")}
+            </SheetDescription>
+            <Sidebar collapsed={false} collapsible={false} />
+          </SheetContent>
+        </Sheet>
+        {isChatRoute ? (
+          <div className="agent-layout-main-surface flex min-w-0 flex-1 overflow-hidden">
+            {contentFrame}
+          </div>
+        ) : (
+          <AgentSidebar
+            position="right"
+            chatViewTransition
+            chatViewTransitionHandoff={chatHomeHandoffPending}
+            storageKey="chat"
+            browserTabId={TAB_ID}
+            openOnChatRunning={chatHomeHandoffActive}
+            onFullscreenRequest={openAskAgentFullscreen}
+            emptyStateText={t("chat.inspectEmptyState")}
+            agentPageHref="/agent"
+            suggestions={[
+              t("chat.inspectSuggestionCapabilities"),
+              t("chat.inspectSuggestionHello"),
+              t("chat.inspectSuggestionAction"),
+            ]}
+          >
+            {contentFrame}
+          </AgentSidebar>
+        )}
+      </div>
+    </HeaderActionsProvider>
+  );
+}