@agent-native/core 0.152.1 → 0.153.0

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

@@ -1,11 +1,7 @@
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconArrowRight,
-  IconMessagePlus,
-  IconPlus,
-  IconTrash,
-} from "@tabler/icons-react";
+import { IconArrowRight, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
+import { useSearchParams } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -18,29 +14,15 @@ import type {
   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[];
+  factoryId?: string;
   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;
@@ -50,33 +32,37 @@ export function FactoryInspector({
   graph,
   selectedNode,
   selectedEdge,
-  comments,
+  factoryId,
   dirty,
   saving,
   onGraphChange,
   onSave,
-  onAddComment,
   onAddNode,
   onDeleteNode,
   onConnect,
 }: FactoryInspectorProps) {
   const t = useT();
-  const [commentDraft, setCommentDraft] = useState("");
+  const [searchParams] = useSearchParams();
   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,
   );
+  const auditHref = useMemo(() => {
+    const next = new URLSearchParams(searchParams);
+    next.set("tab", "audit");
+    next.delete("node");
+    next.delete("edge");
+    if (factoryId) next.set("factoryId", factoryId);
+    return `/factory?${next.toString()}`;
+  }, [factoryId, searchParams]);
+  const reviewHref = useMemo(() => {
+    const next = new URLSearchParams(searchParams);
+    next.set("tab", "inbox");
+    next.delete("node");
+    next.delete("edge");
+    if (factoryId) next.set("factoryId", factoryId);
+    return `/factory?${next.toString()}`;
+  }, [factoryId, searchParams]);
 
   function updateNode(patch: Partial<FactoryCanvasNode>) {
     if (!selectedNode) return;
@@ -98,31 +84,8 @@ export function FactoryInspector({
     });
   }
 
-  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>
-
+    <aside className="flex min-h-0 flex-col rounded-xl bg-card shadow-sm">
       <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
         {!selectedNode && !selectedEdge ? (
           <CanvasInspector
@@ -166,7 +129,7 @@ export function FactoryInspector({
                       .value as FactoryCanvasNode["provider"],
                   })
                 }
-                className="h-9 rounded-md border bg-background px-3 text-sm"
+                className="h-9 rounded-md border bg-card px-3 text-sm"
               >
                 <option value="factory">Factory</option>
                 <option value="slack">Slack</option>
@@ -188,7 +151,7 @@ export function FactoryInspector({
                 placeholder={t("factoryInspector.optional")}
               />
             </div>
-            <div className="rounded-lg border bg-muted/25 p-3">
+            <div className="rounded-lg bg-muted/25 p-3 shadow-sm">
               <p className="text-xs font-medium">
                 {t("factoryInspector.connectStep")}
               </p>
@@ -200,7 +163,7 @@ export function FactoryInspector({
                   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"
+                  className="h-9 min-w-0 flex-1 rounded-md border bg-card px-3 text-sm"
                 >
                   <option value="">{t("factoryInspector.chooseTarget")}</option>
                   {outgoingTargets.map((node) => (
@@ -263,70 +226,54 @@ export function FactoryInspector({
           </>
         )}
 
-        <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}
-            />
+        <section className="rounded-lg bg-muted/20 px-3 py-3 shadow-sm">
+          <p className="text-xs font-medium">{t("factoryRoute.auditTitle")}</p>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            {t("factoryRoute.auditDescription")}
+          </p>
+          <div className="mt-3 flex flex-wrap gap-2">
             <Button
+              asChild
               type="button"
-              variant="outline"
-              className="w-full"
-              disabled={!commentDraft.trim()}
-              onClick={submitComment}
+              variant="ghost"
+              size="sm"
+              className="h-8 px-2 text-xs"
+            >
+              <a href={auditHref} aria-label={t("factoryRoute.auditTitle")}>
+                Activity
+                <IconArrowRight className="size-3.5" />
+              </a>
+            </Button>
+            <Button
+              asChild
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-8 px-2 text-xs"
             >
-              <IconMessagePlus className="size-4" />
-              {t("factoryInspector.addComment")}
+              <a href={reviewHref} aria-label={t("factoryRoute.inboxTitle")}>
+                Review
+                <IconArrowRight className="size-3.5" />
+              </a>
             </Button>
           </div>
-        </div>
+        </section>
       </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>
+      {(dirty || saving) && (
+        <div className="bg-muted/15 p-4">
+          <Button
+            type="button"
+            className="w-full"
+            disabled={saving}
+            onClick={onSave}
+          >
+            {saving
+              ? t("factoryInspector.savingGraph")
+              : t("factoryInspector.saveGraph")}
+          </Button>
+        </div>
+      )}
     </aside>
   );
 }
@@ -380,9 +327,3 @@ function CanvasInspector({
     </>
   );
 }
-
-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

@@ -11,6 +11,7 @@ import { APP_TITLE } from "@/lib/app-config";
 
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.chat",
+  "/chat": "navigation.chat",
   "/observability": "navigation.observability",
   "/agent": "settings.agentTitle",
   "/settings": "navigation.settings",

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

@@ -39,7 +39,9 @@ const SIDEBAR_COLLAPSE_KEY = "chat.sidebar.collapsed";
 function routeOwnsToolbar(pathname: string): boolean {
   return (
     pathname === "/" ||
+    pathname === "/chat" ||
     pathname.startsWith("/chat/") ||
+    pathname === "/factory" ||
     pathname === "/database" ||
     pathname.startsWith("/extensions")
   );
@@ -52,7 +54,9 @@ export function Layout({ children }: LayoutProps) {
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const isChatRoute =
-    location.pathname === "/" || location.pathname.startsWith("/chat/");
+    location.pathname === "/" ||
+    location.pathname === "/chat" ||
+    location.pathname.startsWith("/chat/");
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
     storageKey: "chat",
     activePath: location.pathname,
@@ -61,7 +65,8 @@ export function Layout({ children }: LayoutProps) {
   const chatHomeHandoffPending = isAgentChatHomeHandoffActive("chat");
   useAgentChatHomeHandoffLinks({
     storageKey: "chat",
-    isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
+    isChatPath: (pathname) =>
+      pathname === "/" || pathname === "/chat" || pathname.startsWith("/chat/"),
     requireActiveHandoff: true,
   });
 
@@ -102,7 +107,7 @@ export function Layout({ children }: LayoutProps) {
   const ownsToolbar = routeOwnsToolbar(location.pathname);
   function openAskAgentFullscreen() {
     focusAgentChat();
-    navigateWithAgentChatViewTransition(navigate, "/");
+    navigateWithAgentChatViewTransition(navigate, "/chat");
   }
 
   const contentFrame = (

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

@@ -37,7 +37,7 @@ const navItems = [
   {
     icon: IconMessageCircle,
     labelKey: "navigation.chat",
-    href: "/",
+    href: "/chat",
     view: "chat",
   },
   {
@@ -160,7 +160,9 @@ function ChatThreadsSection({ open }: { open: boolean }) {
   );
   const displayedActiveThreadId =
     threadIdFromPath(location.pathname) ??
-    (location.pathname === "/" ? null : activeThreadId);
+    (location.pathname === "/" || location.pathname === "/chat"
+      ? null
+      : activeThreadId);
   const chatItems = useMemo<ChatHistoryItem[]>(
     () =>
       visibleThreads.map((thread) => ({
@@ -200,7 +202,7 @@ function ChatThreadsSection({ open }: { open: boolean }) {
     persistActiveThreadId(threadId);
     navigateWithAgentChatViewTransition(
       navigate,
-      options?.isNew ? "/" : chatThreadPath(threadId),
+      options?.isNew ? "/chat" : chatThreadPath(threadId),
     );
     window.requestAnimationFrame(() => {
       window.dispatchEvent(
@@ -285,7 +287,9 @@ export function Sidebar({
   const navigate = useNavigate();
   const t = useT();
   const isChatRoute =
-    location.pathname === "/" || location.pathname.startsWith("/chat/");
+    location.pathname === "/" ||
+    location.pathname === "/chat" ||
+    location.pathname.startsWith("/chat/");
   const ToggleIcon = collapsed
     ? IconLayoutSidebarLeftExpand
     : IconLayoutSidebarLeftCollapse;
@@ -447,7 +451,7 @@ export function Sidebar({
                     !event.altKey
                   ) {
                     event.preventDefault();
-                    navigateWithAgentChatViewTransition(navigate, "/");
+                    navigateWithAgentChatViewTransition(navigate, "/chat");
                   }
                 }}
                 className={navClass({ isActive })}

package/corpus/templates/factory/app/components/ui/input.tsx

@@ -1 +1,15 @@
-export * from "@agent-native/toolkit/ui/input";
+import { Input as ToolkitInput } from "@agent-native/toolkit/ui/input";
+import { cn } from "@agent-native/toolkit/utils";
+import * as React from "react";
+
+type InputProps = React.ComponentProps<typeof ToolkitInput>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => (
+    <ToolkitInput ref={ref} className={cn("bg-card", className)} {...props} />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };
+export type { InputProps };

package/corpus/templates/factory/app/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/templates/factory/app/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/switch";

package/corpus/templates/factory/app/components/ui/textarea.tsx

@@ -1 +1,20 @@
-export * from "@agent-native/toolkit/ui/textarea";
+import {
+  Textarea as ToolkitTextarea,
+  type TextareaProps as ToolkitTextareaProps,
+} from "@agent-native/toolkit/ui/textarea";
+import { cn } from "@agent-native/toolkit/utils";
+import * as React from "react";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, ToolkitTextareaProps>(
+  ({ className, ...props }, ref) => (
+    <ToolkitTextarea
+      ref={ref}
+      className={cn("bg-card", className)}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+export type { ToolkitTextareaProps as TextareaProps };

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

@@ -86,7 +86,7 @@ function pathForView(view?: string): string {
     case "chat":
     case "home":
     case "ask":
-      return "/";
+      return "/chat";
     case "database":
       return "/database";
     case "extensions":
@@ -111,7 +111,7 @@ function pathForCommand(command: any): string {
   if (path !== "/") return path;
   const threadId =
     typeof command?.threadId === "string" ? command.threadId.trim() : "";
-  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/";
+  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/chat";
 }
 
 function routerPath(path: string): string {
@@ -125,5 +125,7 @@ function routerPath(path: string): string {
 }
 
 function isChatPath(pathname: string): boolean {
-  return pathname === "/" || pathname.startsWith("/chat/");
+  return (
+    pathname === "/" || pathname === "/chat" || pathname.startsWith("/chat/")
+  );
 }

package/corpus/templates/factory/app/i18n/en-US.ts

@@ -130,6 +130,11 @@ const messages = {
     newFactoryDescription:
       "Describe the work this factory turns into shipped outcomes.",
     selectFactory: "Select factory",
+    backToFactories: "Back to factories",
+    workspaceIntegrations: "Workspace integrations",
+    sourceRouting: "Source routing",
+    sourceRoutingProviders: "Slack, GitHub, and Sentry",
+    agentAccess: "Agent access",
     askAI: "Ask Factory AI",
     factoryViews: "Factory views",
     observeFirst: "Observe-first · shadow mode",
@@ -137,6 +142,8 @@ const messages = {
     mapTitle: "From signal to shipped outcome",
     mapHint: "Select a step or route to edit.",
     unsavedChanges: "Unsaved visual changes",
+    factoryListDescription:
+      "Choose a factory to review its purpose, flow, automations, and recent activity. Start a new one from a minimal blank graph when you want to define a fresh review path.",
     inboxTitle: "Observation inbox",
     inboxDescription: "Evidence entering the factory, before autonomous work.",
     selectObservation:
@@ -144,6 +151,7 @@ const messages = {
     approveAndStart: "Approve and start",
     rulesDescription: "Every rule is shadow-only until deliberately promoted.",
     editRule: "Edit triage rule",
+    editFlow: "Edit flow",
     settingsDescription:
       "Connect Slack, GitHub, and Sentry sources. Automations can dispatch governed work and expose their prompts and runs below.",
     blueprintTitle: "Blueprint mode.",
@@ -179,6 +187,7 @@ const messages = {
     auditClearBug: "Clear bug",
     auditUxImpact: "UX impact",
     auditOwnerArea: "Owner area",
+    auditGuardsLabel: "Guards",
     automationsTitle: "Automations",
     automationsDescription: "Schedule and run Factory prompts.",
     automationsLoading: "Loading automations...",
@@ -230,6 +239,14 @@ const messages = {
       "Could not load Factory diagnostics. Check access, deployment, and database migrations, then try again.",
     automationEmailReadinessHint:
       "Email uses the organization Dispatch vault. Configure a provider there if this is not ready.",
+    rulesTitle: "Rules",
+    shadowLabel: "Shadow",
+    rulesGuidance:
+      "Use prompts for classification; keep safety in structured guards.",
+    ruleNameLabel: "Name",
+    defaultFactoryLabel: "Default factory",
+    savedFactoryLabel: "Saved factory",
+    saveRule: "Save rule",
   },
   factoryCanvas: {
     dragHint: "Drag to arrange",

package/corpus/templates/factory/app/routes/_index.tsx

@@ -1,94 +1,12 @@
-import {
-  AgentChatSurface,
-  markAgentChatHomeHandoff,
-} from "@agent-native/core/client/agent-chat";
-import { useT } from "@agent-native/core/client/i18n";
-import { useEffect } from "react";
-import { useNavigate, useParams } from "react-router";
-
-import { APP_TITLE } from "@/lib/app-config";
-import { TAB_ID } from "@/lib/tab-id";
-
-const SEO_TITLE = `${APP_TITLE} - Your agent product team`;
-const SEO_DESCRIPTION =
-  "Review product signals, agent decisions, and human feedback before autonomous work proceeds.";
+import { Navigate } from "react-router";
 
 export function meta() {
   return [
-    { title: SEO_TITLE },
-    {
-      name: "description",
-      content: SEO_DESCRIPTION,
-    },
-    { property: "og:title", content: SEO_TITLE },
-    { property: "og:description", content: SEO_DESCRIPTION },
-    { name: "twitter:card", content: "summary" },
-    { name: "twitter:title", content: SEO_TITLE },
-    { name: "twitter:description", content: SEO_DESCRIPTION },
+    { title: "Factories" },
+    { name: "description", content: "Review and manage your agent factories." },
   ];
 }
 
-function chatThreadPath(threadId: string | null) {
-  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/";
-}
-
-export default function ChatRoute() {
-  const { threadId } = useParams();
-  const navigate = useNavigate();
-  const t = useT();
-  const threadUrlSync = threadId
-    ? {
-        routeThreadId: threadId,
-        getPath: chatThreadPath,
-        navigate,
-      }
-    : undefined;
-
-  useEffect(() => {
-    function handleChatRunning(event: Event) {
-      const detail = (event as CustomEvent).detail;
-      if (detail?.isRunning === true) markAgentChatHomeHandoff("chat");
-    }
-
-    window.addEventListener("agentNative.chatRunning", handleChatRunning);
-    return () =>
-      window.removeEventListener("agentNative.chatRunning", handleChatRunning);
-  }, []);
-
-  return (
-    <div className="flex h-full min-h-0 flex-col bg-background">
-      <AgentChatSurface
-        mode="page"
-        chatViewTransition
-        className="h-full"
-        defaultMode="chat"
-        storageKey="chat"
-        threadUrlSync={threadUrlSync}
-        browserTabId={TAB_ID}
-        showHeader={false}
-        showTabBar={false}
-        dynamicSuggestions={false}
-        suggestions={[
-          t("chat.suggestionCapabilities"),
-          t("chat.suggestionCustomize"),
-          t("chat.suggestionActions"),
-        ]}
-        emptyStateText={t("chat.emptyState")}
-        emptyStateDisplay="hidden"
-        centerComposerWhenEmpty
-        composerLayoutVariant="hero"
-        composerPlaceholder={t("chat.composerPlaceholder")}
-        composerSlot={
-          <div className="mx-auto mb-5 max-w-xl px-4 text-center">
-            <h1 className="text-2xl font-semibold tracking-normal text-foreground sm:text-3xl">
-              {t("chat.heroTitle")}
-            </h1>
-            <p className="mt-2 text-sm leading-6 text-muted-foreground">
-              {t("chat.heroDescription")}
-            </p>
-          </div>
-        }
-      />
-    </div>
-  );
+export default function IndexRoute() {
+  return <Navigate to="/factory" replace />;
 }

package/corpus/templates/factory/app/routes/chat.$threadId.tsx

@@ -1 +1 @@
-export { default, meta } from "./_index";
+export { default, meta } from "./chat";