ai-design-system 0.1.26 → 0.1.27

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

@@ -10710,6 +10710,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 +10753,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;