@agentiffai/design 1.3.26 → 1.3.27

package/dist/layout/index.cjs

@@ -41,7 +41,7 @@ var tokens = {
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
-      tertiary: "#9CA3AF"},
+      tertiary: "#6B7280"},
     // Teal (brand aligned)
     error: "#EF4444",
     // Sky Blue (brand aligned)
@@ -82,7 +82,7 @@ var tokens = {
   },
   typography: {
     fontFamily: {
-      primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif"},
+      primary: "'TT Interphases Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif"},
     fontSize: {
       xs: "0.875rem",
       // 14px (was 12px, increased for better readability)
@@ -2214,9 +2214,10 @@ var ICONS = {
 };
 function ItemWithLogs({
   run,
-  onRunSelect
+  onRunSelect,
+  isExpanded,
+  onToggleExpand
 }) {
-  const [isExpanded, setIsExpanded] = react.useState(false);
   const logSections = run.logs ? [
     {
       title: "Action History",
@@ -2230,12 +2231,19 @@ function ItemWithLogs({
     }
   ] : [];
   const handleClick = () => {
-    setIsExpanded(!isExpanded);
+    onToggleExpand(run.id);
     onRunSelect?.(run.id);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ItemDisclosure, { id: run.id, "data-testid": `run-item-${run.id}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ItemHeader, { slot: "trigger", onClick: handleClick, $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs(ItemContainer, { as: "div", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { src: ICONS[run.icon || "loader"], alt: "", "data-testid": `run-icon-${run.status}` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ItemIcon,
+        {
+          src: ICONS[run.icon || "loader"],
+          alt: "",
+          "data-testid": `run-icon-${run.status}`
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(ItemName, { "data-testid": "run-name", children: run.name }),
       /* @__PURE__ */ jsxRuntime.jsxs(RunStatus, { $status: run.status, "data-testid": `run-status-${run.status}`, children: [
         run.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.checkFill, alt: "", style: { width: "16px", height: "16px" } }),
@@ -2292,7 +2300,9 @@ function groupRunsByWorkflow(runs) {
 function WorkflowGroupItem({
   group,
   onRunSelect,
-  expandedKeys
+  expandedKeys,
+  expandedRunIds,
+  onToggleRunExpand
 }) {
   const groupId = `workflow-${group.workflowId}`;
   const isExpanded = expandedKeys.has(groupId);
@@ -2300,15 +2310,34 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: tokens.typography.fontSize.sm, fontWeight: 400 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
-          "(",
-          group.runs.length,
-          ")"
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            style: {
+              fontSize: tokens.typography.fontSize.xs,
+              color: tokens.colors.text.tertiary,
+              marginLeft: "8px"
+            },
+            children: [
+              "(",
+              group.runs.length,
+              ")"
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { $isExpanded: isExpanded, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: ICONS.chevronDown, alt: "" }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: group.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx(CategoryDisclosurePanel, { children: group.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(
+      ItemWithLogs,
+      {
+        run,
+        onRunSelect,
+        isExpanded: expandedRunIds.has(run.id),
+        onToggleExpand: onToggleRunExpand
+      },
+      run.id
+    )) })
   ] });
 }
 function GroupedRunsRenderer({
@@ -2316,15 +2345,26 @@ function GroupedRunsRenderer({
   onRunSelect,
   expandedKeys,
   setExpandedKeys,
+  expandedRunIds,
+  onToggleRunExpand,
   ariaLabel,
   emptyMessage
 }) {
   if (groups.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: emptyMessage }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { "data-testid": "empty-state", children: /* @__PURE__ */ jsxRuntime.jsx(ItemName, { $dimmed: true, children: emptyMessage }) });
   }
   const firstGroup = groups[0];
   if (groups.length === 1 && firstGroup && firstGroup.runs.length === 1) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: firstGroup.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(ItemWithLogs, { run, onRunSelect }, run.id)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: firstGroup.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(
+      ItemWithLogs,
+      {
+        run,
+        onRunSelect,
+        isExpanded: expandedRunIds.has(run.id),
+        onToggleExpand: onToggleRunExpand
+      },
+      run.id
+    )) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledDisclosureGroup,
@@ -2338,7 +2378,9 @@ function GroupedRunsRenderer({
         {
           group,
           onRunSelect,
-          expandedKeys
+          expandedKeys,
+          expandedRunIds,
+          onToggleRunExpand
         },
         group.workflowId
       ))
@@ -2353,6 +2395,18 @@ function RunsTabContent({
     /* @__PURE__ */ new Set(["executing", "completed", "failed"])
     // All status sections open by default
   );
+  const [expandedRunIds, setExpandedRunIds] = react.useState(/* @__PURE__ */ new Set());
+  const handleToggleRunExpand = react.useCallback((runId) => {
+    setExpandedRunIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(runId)) {
+        next.delete(runId);
+      } else {
+        next.add(runId);
+      }
+      return next;
+    });
+  }, []);
   const executingRuns = runs.filter((r) => normalizeCategory(r.category) === "executing");
   const completedRuns = runs.filter((r) => normalizeCategory(r.category) === "completed");
   const failedRuns = runs.filter((r) => normalizeCategory(r.category) === "failed");
@@ -2382,6 +2436,8 @@ function RunsTabContent({
               onRunSelect,
               expandedKeys,
               setExpandedKeys,
+              expandedRunIds,
+              onToggleRunExpand: handleToggleRunExpand,
               ariaLabel: "Executing workflows",
               emptyMessage: "No executing items"
             }
@@ -2402,6 +2458,8 @@ function RunsTabContent({
               onRunSelect,
               expandedKeys,
               setExpandedKeys,
+              expandedRunIds,
+              onToggleRunExpand: handleToggleRunExpand,
               ariaLabel: "Completed workflows",
               emptyMessage: "No completed items"
             }
@@ -2422,6 +2480,8 @@ function RunsTabContent({
               onRunSelect,
               expandedKeys,
               setExpandedKeys,
+              expandedRunIds,
+              onToggleRunExpand: handleToggleRunExpand,
               ariaLabel: "Failed workflows",
               emptyMessage: "No failed items"
             }