ai-design-system 0.1.26 → 0.1.28

package/components/composites/AppHeader/AppHeader.tsx

@@ -16,12 +16,17 @@ export const AppHeader = React.memo<AppHeaderProps>(({
 }) => {
   return (
     <header className={`flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-        {showSidebarToggle && title && <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />}
-        {showTitle && title && <h1 className="text-base font-medium">{title}</h1>}
-        {tabs && tabs.length > 0 && (
-          <div className="flex-1 flex justify-center">
+      <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
+        <div className="min-w-0 flex items-center gap-1 lg:gap-2">
+          {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
+          {showSidebarToggle && showTitle && title && (
+            <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+          )}
+          {showTitle && title && <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>}
+        </div>
+
+        <div className="justify-self-center">
+          {tabs && tabs.length > 0 && (
             <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
               <TabsList>
                 {tabs.map((tab) => (
@@ -31,9 +36,10 @@ export const AppHeader = React.memo<AppHeaderProps>(({
                 ))}
               </TabsList>
             </Tabs>
-          </div>
-        )}
-        <div className="ml-auto flex items-center gap-2">{actions}</div>
+          )}
+        </div>
+
+        <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
       </div>
     </header>
   )

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
-import { useState } from "react"
 
 import { WorkflowObservabilityFeature } from "./WorkflowObservabilityFeature"
 import {
@@ -61,8 +60,6 @@ export const WithStateManagement: Story = {
   args: baseArgs,
   render: () => {
     const state = useWorkflowObservabilityFeatureMock()
-    const [searchQuery, setSearchQuery] = useState("")
-    const [selectedItemId, setSelectedItemId] = useState<string | null>(state.selectedRun.runId)
 
     return (
       <div className="h-dvh min-h-0 p-2">
@@ -76,13 +73,11 @@ export const WithStateManagement: Story = {
           runActions={state.runActions}
           onSearchQueryChange={state.actionHandlers?.onSearchQueryChange}
           onSelectSpan={state.actionHandlers?.onSelectSpan}
-          inbox={{
-            items: workflowInboxItemsMock,
-            selectedItemId,
-            onSelectItem: setSelectedItemId,
-            searchQuery,
-            onSearchQueryChange: setSearchQuery,
-          }}
+          inbox={state.inbox ? {
+            ...state.inbox,
+            onSelectItem: state.actionHandlers?.onSelectInboxItem,
+            onSearchQueryChange: state.actionHandlers?.onInboxSearchQueryChange,
+          } : undefined}
           className="h-full"
         />
       </div>

package/components/features/WorkflowObservabilityFeature/useWorkflowObservabilityFeature.d.ts

@@ -5,10 +5,21 @@ import type {
   WorkflowSpanRecord,
   WorkflowStreamRecord,
 } from "@/components/composites/WorkflowRunObservabilityPanel"
+import type { InboxListItem } from "@/components/composites/InboxList"
 
 export interface WorkflowObservabilityFeatureActionHandlers {
   onSearchQueryChange?: (value: string) => void
   onSelectSpan?: (spanId: string | null) => void
+  onInboxSearchQueryChange?: (value: string) => void
+  onSelectInboxItem?: (itemId: string) => void
+}
+
+export interface WorkflowObservabilityFeatureInboxState {
+  items: InboxListItem[]
+  selectedItemId?: string | null
+  searchQuery?: string
+  isLoading?: boolean
+  emptyMessage?: string
 }
 
 export interface UseWorkflowObservabilityFeatureReturn {
@@ -19,6 +30,7 @@ export interface UseWorkflowObservabilityFeatureReturn {
   searchQuery?: string
   selectedSpanId?: string | null
   runActions?: WorkflowRunAction[]
+  inbox?: WorkflowObservabilityFeatureInboxState
   actionHandlers?: WorkflowObservabilityFeatureActionHandlers
 }
 

package/components/features/WorkflowObservabilityFeature/useWorkflowObservabilityFeature.mock.ts

@@ -4,18 +4,46 @@ import type { UseWorkflowObservabilityFeatureReturn } from "./useWorkflowObserva
 import {
   selectedWorkflowRunMock,
   workflowEventRecordsMock,
+  workflowInboxItemsMock,
   workflowSpanRecordsMock,
   workflowStreamRecordsMock,
 } from "./WorkflowObservabilityFeature.mocks"
 
+const runByInboxId: Record<string, typeof selectedWorkflowRunMock> = {
+  [selectedWorkflowRunMock.runId]: selectedWorkflowRunMock,
+  wrun_01KP45XGBHRMT7HQJXXHKBEQS5: {
+    ...selectedWorkflowRunMock,
+    runId: "wrun_01KP45XGBHRMT7HQJXXHKBEQS5",
+    status: "completed",
+    createdAt: "7m ago",
+    completedAt: "today 12:45 PM",
+    duration: "43s",
+    suspensionReason: "-",
+  },
+}
+
 export function useWorkflowObservabilityFeatureMock(): UseWorkflowObservabilityFeatureReturn {
   const [searchQuery, setSearchQuery] = React.useState("")
   const [selectedSpanId, setSelectedSpanId] = React.useState<string | null>(null)
+  const [inboxSearchQuery, setInboxSearchQuery] = React.useState("")
+  const [selectedInboxItemId, setSelectedInboxItemId] = React.useState<string | null>(selectedWorkflowRunMock.runId)
   const [selectedRun, setSelectedRun] = React.useState(selectedWorkflowRunMock)
   const [spans, setSpans] = React.useState(workflowSpanRecordsMock)
   const [events, setEvents] = React.useState(workflowEventRecordsMock)
   const [streams, setStreams] = React.useState(workflowStreamRecordsMock)
 
+  const inboxItems = React.useMemo(() => {
+    const normalizedQuery = inboxSearchQuery.trim().toLowerCase()
+    if (!normalizedQuery) {
+      return workflowInboxItemsMock
+    }
+
+    return workflowInboxItemsMock.filter((item) => {
+      const searchText = [item.title, item.subtitle, item.preview].filter(Boolean).join(" ").toLowerCase()
+      return searchText.includes(normalizedQuery)
+    })
+  }, [inboxSearchQuery])
+
   const isRunActive = selectedRun.status === "pending" || selectedRun.status === "running"
   const hasPendingSleeps = React.useMemo(
     () => spans.some((span) => span.resource === "sleep" && span.state === "live"),
@@ -70,6 +98,7 @@ export function useWorkflowObservabilityFeatureMock(): UseWorkflowObservabilityF
       suspensionReason: "webhook",
     }))
 
+    setSelectedInboxItemId(newRunId)
     setSelectedSpanId("span_generateBirthdayCard")
 
     appendEventAndStream("run_replayed", "A new run was started from replay action.", {
@@ -177,6 +206,16 @@ export function useWorkflowObservabilityFeatureMock(): UseWorkflowObservabilityF
     })
   }, [appendEventAndStream, selectedRun.runId])
 
+  const selectInboxItem = React.useCallback((itemId: string) => {
+    setSelectedInboxItemId(itemId)
+    setSelectedSpanId(null)
+
+    const nextRun = runByInboxId[itemId]
+    if (nextRun) {
+      setSelectedRun(nextRun)
+    }
+  }, [])
+
   return {
     selectedRun,
     spans,
@@ -184,6 +223,13 @@ export function useWorkflowObservabilityFeatureMock(): UseWorkflowObservabilityF
     streams,
     searchQuery,
     selectedSpanId,
+    inbox: {
+      items: inboxItems,
+      selectedItemId: selectedInboxItemId,
+      searchQuery: inboxSearchQuery,
+      isLoading: false,
+      emptyMessage: "No runs found.",
+    },
     runActions: [
       {
         id: "replay-run",
@@ -233,6 +279,8 @@ export function useWorkflowObservabilityFeatureMock(): UseWorkflowObservabilityF
     actionHandlers: {
       onSearchQueryChange: setSearchQuery,
       onSelectSpan: setSelectedSpanId,
+      onInboxSearchQueryChange: setInboxSearchQuery,
+      onSelectInboxItem: selectInboxItem,
     },
   }
 }

package/dist/index.cjs

@@ -6897,12 +6897,14 @@ var AppHeader = React33__namespace.memo(({
   showTitle = true
 }) => {
   var _a;
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [
-    showSidebarToggle && /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger2, { className: "-ml-1" }),
-    showSidebarToggle && title && /* @__PURE__ */ jsxRuntime.jsx(Separator4, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
-    showTitle && title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-medium", children: title }),
-    tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex items-center gap-1 lg:gap-2", children: [
+      showSidebarToggle && /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger2, { className: "-ml-1" }),
+      showSidebarToggle && showTitle && title && /* @__PURE__ */ jsxRuntime.jsx(Separator4, { orientation: "vertical", className: "mx-2 data-[orientation=vertical]:h-4" }),
+      showTitle && title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "max-w-[28rem] truncate text-base font-medium", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-center", children: tabs && tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { defaultValue: defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.value), onValueChange: onTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-end gap-2", children: actions })
   ] }) });
 });
 AppHeader.displayName = "AppHeader";
@@ -10710,6 +10712,34 @@ var WorkflowObservabilityFeature = React33__namespace.memo(
 WorkflowObservabilityFeature.displayName = "WorkflowObservabilityFeature";
 
 // components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.mocks.ts
+var selectedWorkflowRunMock = {
+  runId: "wrun_01KP45XGBHRMT7HQJXXHKBEQS4",
+  workflowName: "generateBirthdayCard",
+  status: "running",
+  createdAt: "1m ago",
+  startedAt: "today 12:44 PM",
+  completedAt: "-",
+  duration: "1m 43s",
+  expiresAt: "-",
+  storage: "5 MB",
+  moduleSpecifier: "./app/api/generate/generate-birthday-card.ts",
+  resumeAt: "4/23/2026, 12:00:00 AM",
+  suspensionReason: "webhook",
+  argumentsPayload: {
+    recipientName: "Maya",
+    tone: "friendly",
+    includeEmoji: true
+  },
+  inputPayload: {
+    prompt: "Generate a birthday greeting card with confetti accents",
+    locale: "en-US"
+  },
+  outputPayload: {
+    cardId: "card_90210",
+    status: "draft",
+    revision: 3
+  }
+};
 [
   {
     id: "stream_1",
@@ -10725,6 +10755,19 @@ WorkflowObservabilityFeature.displayName = "WorkflowObservabilityFeature";
   }
 ];
 
+// components/features/WorkflowObservabilityFeature/useWorkflowObservabilityFeature.mock.ts
+({
+  [selectedWorkflowRunMock.runId]: selectedWorkflowRunMock,
+  wrun_01KP45XGBHRMT7HQJXXHKBEQS5: __spreadProps(__spreadValues({}, selectedWorkflowRunMock), {
+    runId: "wrun_01KP45XGBHRMT7HQJXXHKBEQS5",
+    status: "completed",
+    createdAt: "7m ago",
+    completedAt: "today 12:45 PM",
+    duration: "43s",
+    suspensionReason: "-"
+  })
+});
+
 exports.AIConversation = AIConversation;
 exports.AIDocEditor = AIDocEditor;
 exports.Accordion = Accordion2;