ai-design-system 0.1.25 → 0.1.26

package/components/blocks/InboxPanel/InboxPanel.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { InboxPanel } from "./InboxPanel"
+
+const items = Array.from({ length: 30 }).map((_, index) => ({
+  id: `item-${index + 1}`,
+  title: `Item ${index + 1}`,
+  subtitle: "completed • 12s • retries 0",
+  preview: "Inbox-style preview text for validating panel-level vertical scrolling behavior.",
+  timestamp: `${index + 1}m ago`,
+  badge: index % 3 === 0 ? "running" : "completed",
+}))
+
+const meta = {
+  title: "Blocks/InboxPanel",
+  component: InboxPanel,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof InboxPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items,
+    selectedItemId: "item-2",
+  },
+  render: (args) => (
+    <div className="h-[720px]">
+      <InboxPanel {...args} />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    emptyMessage: "No matching items.",
+  },
+  render: (args) => (
+    <div className="h-[720px]">
+      <InboxPanel {...args} />
+    </div>
+  ),
+}

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+
+import { InboxList, type InboxListItem } from "@/components/composites/InboxList"
+import { Input } from "@/components/primitives/Input"
+
+export interface InboxPanelProps {
+  items: InboxListItem[]
+  selectedItemId?: string | null
+  onSelectItem?: (itemId: string) => void
+  searchQuery?: string
+  onSearchQueryChange?: (value: string) => void
+  searchPlaceholder?: string
+  isLoading?: boolean
+  emptyMessage?: string
+  className?: string
+}
+
+export const InboxPanel = React.memo<InboxPanelProps>(
+  ({
+    items,
+    selectedItemId,
+    onSelectItem,
+    searchQuery = "",
+    onSearchQueryChange,
+    searchPlaceholder = "Type to search...",
+    isLoading = false,
+    emptyMessage,
+    className,
+  }) => {
+    return (
+      <section className={`flex min-h-0 flex-1 flex-col overflow-hidden ${className ?? ""}`}>
+        <div className="p-4">
+          <Input
+            aria-label="Search inbox items"
+            className="h-8"
+            onChange={(event) => onSearchQueryChange?.(event.target.value)}
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+          />
+        </div>
+
+        <InboxList
+          className="min-h-0 flex-1"
+          emptyMessage={emptyMessage}
+          isLoading={isLoading}
+          items={items}
+          onSelectItem={onSelectItem}
+          selectedItemId={selectedItemId}
+        />
+      </section>
+    )
+  }
+)
+
+InboxPanel.displayName = "InboxPanel"

package/components/blocks/InboxPanel/index.ts

@@ -0,0 +1,2 @@
+export { InboxPanel } from "./InboxPanel"
+export type { InboxPanelProps } from "./InboxPanel"

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -18,6 +18,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     orientation = "horizontal",
     storageKey,
     onSectionResize,
+    resizable = true,
     dragHandleColor = "border",
     className,
     ...props 
@@ -25,6 +26,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     // Transform sections to include headers
     const transformedSections = sections.map(section => ({
       ...section,
+      resizable,
       content: (
         <div className="h-full min-h-0 flex flex-col overflow-hidden">
           {section.header && (

package/components/blocks/SectionLayout/interfaces.ts

@@ -4,6 +4,7 @@ import type { AppHeaderProps } from "@/components/composites/AppHeader/interface
 export interface SectionLayoutSection {
   id: string;
   content: React.ReactNode;
+  fixedSize?: string;
   defaultSize?: number;
   minSize?: number;
   maxSize?: number;
@@ -17,5 +18,6 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   orientation?: "horizontal" | "vertical";
   storageKey?: string;
   onSectionResize?: (sectionId: string, newSize: number) => void;
+  resizable?: boolean;
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
 }

package/components/blocks/index.ts

@@ -32,3 +32,6 @@ export type { DataTableProps } from './DataTable'
 
 export { FormReportsSection } from './FormReportsSection'
 export type { FormReportsSectionProps } from './FormReportsSection'
+
+export { InboxPanel } from './InboxPanel'
+export type { InboxPanelProps } from './InboxPanel'

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"
 export interface AdjustableLayoutSection {
   id: string
   content: React.ReactNode
+  fixedSize?: string // CSS size value, e.g. "16rem"
   defaultSize?: number // percentage (0-100)
   minSize?: number // minimum percentage
   maxSize?: number // maximum percentage
@@ -168,8 +169,20 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     }, [draggingIndex, handleMouseMove, handleMouseUp])
 
     const renderPanel = (section: AdjustableLayoutSection, size: number, index: number) => {
+      const nextSection = sections[index + 1]
       // Drag handles should be between panels, so only show for panels that aren't the last one
-      const isResizable = section.resizable !== false && sections.length > 1 && index < sections.length - 1
+      const isResizable =
+        section.resizable !== false &&
+        sections.length > 1 &&
+        index < sections.length - 1 &&
+        !section.fixedSize &&
+        !nextSection?.fixedSize
+
+      const fixedStyle = section.fixedSize
+        ? orientation === "horizontal"
+          ? { flex: `0 0 ${section.fixedSize}`, width: section.fixedSize, minWidth: section.fixedSize }
+          : { flex: `0 0 ${section.fixedSize}`, height: section.fixedSize, minHeight: section.fixedSize }
+        : null
       
       return (
         <React.Fragment key={section.id}>
@@ -179,7 +192,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
               section.className
             )}
             style={{
-              flex: `${size} 1 0%`,
+              ...(fixedStyle ?? { flex: `${size} 1 0%` }),
               minHeight: 0,
               minWidth: 0,
             }}

package/components/composites/DataTable/EnhancedDataTable.behaviors.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 import { expect, userEvent, within } from "@storybook/test"
 import { Toaster } from "sonner"
+import { DYNAMIC_TABLE_SCHEMA_VERSION, dynamicTableSchema } from "ui-schema-contracts"
 
 import { EnhancedDataTable } from "./EnhancedDataTable"
 import type { DashboardRow } from "./table-types"
@@ -11,6 +12,22 @@ const rows: DashboardRow[] = [
   { id: 3, header: "Executive summary", type: "Narrative", status: "Done", target: "10", limit: "13", reviewer: "Assign reviewer" },
 ]
 
+const tableSchema = dynamicTableSchema.parse({
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
+  rowKey: "id",
+  enableFiltering: true,
+  enablePagination: true,
+  enableRowSelection: true,
+  columns: [
+    { key: "header", label: "Header", sortable: true, hideable: false },
+    { key: "type", label: "Type", sortable: true },
+    { key: "status", label: "Status", renderType: "badge", sortable: true },
+    { key: "target", label: "Target", align: "right", sortable: true },
+    { key: "limit", label: "Limit", align: "right", sortable: true },
+    { key: "reviewer", label: "Reviewer", sortable: true },
+  ],
+})
+
 const meta = {
   title: "Composites/EnhancedDataTable/Behaviors",
   component: EnhancedDataTable,
@@ -30,7 +47,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const SelectAllWorks: Story = {
-  args: { data: rows },
+  args: { data: rows, tableSchema },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const selectAll = canvas.getByLabelText("Select all")
@@ -40,7 +57,7 @@ export const SelectAllWorks: Story = {
 }
 
 export const DrawerOpensFromHeader: Story = {
-  args: { data: rows },
+  args: { data: rows, tableSchema },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const trigger = canvas.getByRole("button", { name: "Cover page" })
@@ -50,7 +67,7 @@ export const DrawerOpensFromHeader: Story = {
 }
 
 export const SwitchesViewTab: Story = {
-  args: { data: rows },
+  args: { data: rows, tableSchema },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const tab = canvas.getByRole("tab", { name: /Past Performance/i })

package/components/composites/DataTable/EnhancedDataTable.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 import { Toaster } from "sonner"
+import { DYNAMIC_TABLE_SCHEMA_VERSION, dynamicTableSchema } from "ui-schema-contracts"
 
 import { EnhancedDataTable } from "./EnhancedDataTable"
 import type { DashboardRow } from "./table-types"
@@ -19,6 +20,22 @@ const data: DashboardRow[] = [
   { id: 12, header: "Advantages Over Current Technologies", type: "Narrative", status: "Not Started", target: "12", limit: "0", reviewer: "Assign reviewer" },
 ]
 
+const tableSchema = dynamicTableSchema.parse({
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
+  rowKey: "id",
+  enableFiltering: true,
+  enablePagination: true,
+  enableRowSelection: true,
+  columns: [
+    { key: "header", label: "Header", sortable: true, hideable: false },
+    { key: "type", label: "Type", sortable: true },
+    { key: "status", label: "Status", renderType: "badge", sortable: true },
+    { key: "target", label: "Target", align: "right", sortable: true },
+    { key: "limit", label: "Limit", align: "right", sortable: true },
+    { key: "reviewer", label: "Reviewer", sortable: true },
+  ],
+})
+
 const meta = {
   title: "Composites/EnhancedDataTable",
   component: EnhancedDataTable,
@@ -38,5 +55,6 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     data,
+    tableSchema,
   },
 }

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -504,7 +504,7 @@ export function EnhancedDataTable({
       </div>
 
       <div className="relative flex min-h-0 flex-1 flex-col gap-4 overflow-hidden px-4 lg:px-6">
-        <div className="overflow-x-auto overflow-y-hidden rounded-lg border [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+        <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto rounded-lg border [scrollbar-width:thin] [scrollbar-color:hsl(var(--border))_transparent] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70">
           <DndContext
             collisionDetection={closestCenter}
             modifiers={[restrictToVerticalAxis]}
@@ -565,7 +565,7 @@ export function EnhancedDataTable({
                   <SelectValue placeholder={currentPageSize} />
                 </SelectTrigger>
                 <SelectContent side="top">
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                  {[10, 20, 25, 30, 40, 50].map((pageSize) => (
                     <SelectItem key={pageSize} value={`${pageSize}`}>
                       {pageSize}
                     </SelectItem>

package/components/composites/InboxList/InboxList.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { InboxList } from "./InboxList"
+
+const items = Array.from({ length: 18 }).map((_, index) => ({
+  id: `item-${index + 1}`,
+  title: `Run ${index + 1}`,
+  subtitle: index % 2 === 0 ? "completed • 5s • retries 0" : "running • 23s • retries 1",
+  preview: "This is an email-style preview row for validating list readability and vertical scrolling.",
+  timestamp: `${index + 1}m ago`,
+  badge: index % 2 === 0 ? "completed" : "running",
+}))
+
+const meta = {
+  title: "Composites/InboxList",
+  component: InboxList,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof InboxList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items,
+    selectedItemId: "item-2",
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    emptyMessage: "No messages yet.",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    items: [],
+    isLoading: true,
+  },
+}

package/components/composites/InboxList/InboxList.tsx

@@ -0,0 +1,99 @@
+import * as React from "react"
+
+import { Badge } from "@/components/primitives/Badge"
+
+export interface InboxListItem {
+  id: string
+  title: string
+  subtitle?: string
+  preview?: string
+  timestamp?: string
+  badge?: string
+}
+
+export interface InboxListProps {
+  items: InboxListItem[]
+  selectedItemId?: string | null
+  onSelectItem?: (itemId: string) => void
+  isLoading?: boolean
+  emptyMessage?: string
+  className?: string
+}
+
+function LoadingRows() {
+  return (
+    <div className="space-y-2 p-2">
+      {Array.from({ length: 8 }).map((_, index) => (
+        <div key={index} className="space-y-2 rounded-md border p-3">
+          <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+          <div className="h-3 w-full animate-pulse rounded bg-muted" />
+          <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export const InboxList = React.memo<InboxListProps>(
+  ({
+    items,
+    selectedItemId,
+    onSelectItem,
+    isLoading = false,
+    emptyMessage = "No items found.",
+    className,
+  }) => {
+    if (isLoading) {
+      return (
+        <div className={`min-h-0 flex-1 overflow-auto ${className ?? ""}`}>
+          <LoadingRows />
+        </div>
+      )
+    }
+
+    if (!items.length) {
+      return (
+        <div className={`flex min-h-0 flex-1 items-center justify-center p-4 text-sm text-muted-foreground ${className ?? ""}`}>
+          {emptyMessage}
+        </div>
+      )
+    }
+
+    return (
+      <div className={`min-h-0 flex-1 overflow-auto ${className ?? ""}`}>
+        <div className="space-y-1 p-2">
+          {items.map((item) => {
+            const isSelected = selectedItemId === item.id
+
+            return (
+              <button
+                key={item.id}
+                type="button"
+                className={`w-full rounded-md p-3 text-left transition-colors ${
+                  isSelected
+                    ? "bg-accent ring-1 ring-inset ring-primary"
+                    : "bg-background hover:bg-accent/60"
+                }`}
+                onClick={() => onSelectItem?.(item.id)}
+              >
+                <div className="flex items-center gap-2">
+                  <div className="truncate font-medium text-sm">{item.title}</div>
+                  {item.badge ? <Badge variant="outline">{item.badge}</Badge> : null}
+                  {item.timestamp ? (
+                    <div className="ml-auto shrink-0 text-muted-foreground text-xs">{item.timestamp}</div>
+                  ) : null}
+                </div>
+                {item.subtitle ? (
+                  <div className="mt-1 truncate text-muted-foreground text-xs">{item.subtitle}</div>
+                ) : null}
+                {item.preview ? <div className="mt-2 line-clamp-2 text-sm">{item.preview}</div> : null}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+
+InboxList.displayName = "InboxList"

package/components/composites/InboxList/index.ts

@@ -0,0 +1,2 @@
+export { InboxList } from "./InboxList"
+export type { InboxListItem, InboxListProps } from "./InboxList"

package/components/composites/index.ts

@@ -141,3 +141,7 @@ export type {
 	WorkflowSpanRecord,
 	WorkflowStreamRecord,
 } from './WorkflowRunObservabilityPanel'
+
+// InboxList Composite
+export { InboxList } from './InboxList'
+export type { InboxListItem, InboxListProps } from './InboxList'

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

@@ -6,12 +6,14 @@ import { WorkflowObservabilityFeature } from "./WorkflowObservabilityFeature"
 import {
   selectedWorkflowRunMock,
   workflowEventRecordsMock,
+  workflowInboxItemsMock,
   workflowSpanRecordsMock,
   workflowStreamRecordsMock,
 } from "./WorkflowObservabilityFeature.mocks"
 
 const onSearchQueryChange = fn()
 const onSelectSpan = fn()
+const onSelectInboxItem = fn()
 const onReplayRun = fn()
 const onReenqueue = fn()
 const onCancelActiveSleeps = fn()
@@ -22,6 +24,11 @@ const meta = {
   title: "Features/WorkflowObservabilityFeature/Behaviors",
   component: WorkflowObservabilityFeature,
   tags: ["test"],
+  render: (args) => (
+    <div className="h-dvh min-h-0 p-2">
+      <WorkflowObservabilityFeature {...args} className="h-full" />
+    </div>
+  ),
   globals: {
     theme: "dark-neutral",
   },
@@ -49,17 +56,28 @@ const args: Story["args"] = {
     { id: "wake-up-sleep", label: "Wake Up Sleep", onClick: onWakeUpSleep, resourceTypes: ["sleep"], tone: "amber", surface: "details" },
     { id: "cancel-run", label: "Cancel", onClick: onCancel, resourceTypes: ["run"], tone: "danger", surface: "details" },
   ],
+  inbox: {
+    items: workflowInboxItemsMock,
+    selectedItemId: selectedWorkflowRunMock.runId,
+    onSelectItem: onSelectInboxItem,
+    searchQuery: "",
+    onSearchQueryChange: fn(),
+  },
+  className: "h-full",
 }
 
 function InteractiveStoryHarness() {
   const [selectedSpanId, setSelectedSpanId] = React.useState<string | null>(null)
 
   return (
-    <WorkflowObservabilityFeature
-      {...args}
-      onSelectSpan={setSelectedSpanId}
-      selectedSpanId={selectedSpanId}
-    />
+    <div className="h-dvh min-h-0 p-2">
+      <WorkflowObservabilityFeature
+        {...args}
+        className="h-full"
+        onSelectSpan={setSelectedSpanId}
+        selectedSpanId={selectedSpanId}
+      />
+    </div>
   )
 }
 
@@ -175,3 +193,14 @@ export const SleepBehavior: Story = {
     await expect(await canvas.findByRole("menuitem", { name: /Cancel Active Sleeps/i })).toBeInTheDocument()
   },
 }
+
+export const SelectRunFromInbox: Story = {
+  args,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    const targetRun = workflowInboxItemsMock[1]
+    await userEvent.click(canvas.getByRole("button", { name: new RegExp(targetRun.id, "i") }))
+    await expect(onSelectInboxItem).toHaveBeenCalledWith(targetRun.id)
+  },
+}

package/components/features/WorkflowObservabilityFeature/WorkflowObservabilityFeature.mocks.ts

@@ -4,6 +4,26 @@ import type {
   WorkflowSpanRecord,
   WorkflowStreamRecord,
 } from "@/components/composites/WorkflowRunObservabilityPanel"
+import type { InboxListItem } from "@/components/composites/InboxList"
+
+export const workflowInboxItemsMock: InboxListItem[] = [
+  {
+    id: "wrun_01KP45XGBHRMT7HQJXXHKBEQS4",
+    title: "wrun_01KP45XGBHRMT7HQJXXHKBEQS4",
+    subtitle: "running • 1m 43s • retries 0",
+    badge: "running",
+    timestamp: "1m ago",
+    preview: "hook_waiting",
+  },
+  {
+    id: "wrun_01KP45XGBHRMT7HQJXXHKBEQS5",
+    title: "wrun_01KP45XGBHRMT7HQJXXHKBEQS5",
+    subtitle: "completed • 43s • retries 1",
+    badge: "completed",
+    timestamp: "7m ago",
+    preview: "run_completed",
+  },
+]
 
 export const selectedWorkflowRunMock: WorkflowRunSummary = {
   runId: "wrun_01KP45XGBHRMT7HQJXXHKBEQS4",

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

@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import { useState } from "react"
 
 import { WorkflowObservabilityFeature } from "./WorkflowObservabilityFeature"
 import {
   selectedWorkflowRunMock,
   workflowEventRecordsMock,
+  workflowInboxItemsMock,
   workflowSpanRecordsMock,
   workflowStreamRecordsMock,
 } from "./WorkflowObservabilityFeature.mocks"
@@ -13,6 +15,11 @@ const meta = {
   title: "Features/WorkflowObservabilityFeature",
   component: WorkflowObservabilityFeature,
   tags: ["autodocs"],
+  render: (args) => (
+    <div className="h-dvh min-h-0 p-2">
+      <WorkflowObservabilityFeature {...args} className="h-full" />
+    </div>
+  ),
   globals: {
     theme: "dark-neutral",
   },
@@ -38,6 +45,12 @@ const baseArgs: Story["args"] = {
     { id: "wake-up-sleep", label: "Wake Up Sleep", resourceTypes: ["sleep"], tone: "amber", surface: "details" },
     { id: "cancel-run", label: "Cancel", resourceTypes: ["run"], tone: "danger", surface: "details" },
   ],
+  inbox: {
+    items: workflowInboxItemsMock,
+    selectedItemId: selectedWorkflowRunMock.runId,
+    searchQuery: "",
+  },
+  className: "h-full",
 }
 
 export const Default: Story = {
@@ -48,19 +61,31 @@ export const WithStateManagement: Story = {
   args: baseArgs,
   render: () => {
     const state = useWorkflowObservabilityFeatureMock()
+    const [searchQuery, setSearchQuery] = useState("")
+    const [selectedItemId, setSelectedItemId] = useState<string | null>(state.selectedRun.runId)
 
     return (
-      <WorkflowObservabilityFeature
-        selectedRun={state.selectedRun}
-        spans={state.spans}
-        events={state.events}
-        streams={state.streams}
-        selectedSpanId={state.selectedSpanId}
-        searchQuery={state.searchQuery}
-        runActions={state.runActions}
-        onSearchQueryChange={state.actionHandlers?.onSearchQueryChange}
-        onSelectSpan={state.actionHandlers?.onSelectSpan}
-      />
+      <div className="h-dvh min-h-0 p-2">
+        <WorkflowObservabilityFeature
+          selectedRun={state.selectedRun}
+          spans={state.spans}
+          events={state.events}
+          streams={state.streams}
+          selectedSpanId={state.selectedSpanId}
+          searchQuery={state.searchQuery}
+          runActions={state.runActions}
+          onSearchQueryChange={state.actionHandlers?.onSearchQueryChange}
+          onSelectSpan={state.actionHandlers?.onSelectSpan}
+          inbox={{
+            items: workflowInboxItemsMock,
+            selectedItemId,
+            onSelectItem: setSelectedItemId,
+            searchQuery,
+            onSearchQueryChange: setSearchQuery,
+          }}
+          className="h-full"
+        />
+      </div>
     )
   },
 }