ai-design-system 0.1.24 → 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.stories.tsx

@@ -1,6 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { SectionLayout } from './SectionLayout'
 
+function ScrollablePanelContent({
+  description,
+  items,
+  title,
+}: {
+  description: string
+  items: string[]
+  title: string
+}) {
+  return (
+    <div className="flex min-h-0 flex-col gap-3 rounded-lg border bg-muted p-4">
+      <div>
+        <h3 className="mb-1 font-medium">{title}</h3>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      <div className="grid gap-2">
+        {items.map((item, index) => (
+          <div key={`${title}-${index}`} className="rounded-md border bg-background px-3 py-2 text-sm">
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 /**
  * SectionLayout Block Stories
  *
@@ -274,3 +300,83 @@ export const AccentDragHandles: Story = {
     )
   },
 }
+
+/**
+ * Independent Panel Scrolling
+ *
+ * Demonstrates that each panel owns its own vertical scroll region.
+ */
+export const IndependentPanelScrolling: Story = {
+  render: () => {
+    const leftItems = Array.from({ length: 24 }, (_, index) => `Run record ${index + 1}`)
+    const centerItems = Array.from({ length: 18 }, (_, index) => `Trace span ${index + 1}`)
+    const rightItems = Array.from({ length: 20 }, (_, index) => `Details block ${index + 1}`)
+
+    const sections = [
+      {
+        id: 'left-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Left Panel"
+            description="Scroll this panel independently. The center and right panels should keep their own scroll positions."
+            items={leftItems}
+          />
+        ),
+        defaultSize: 25,
+        minSize: 20,
+        header: {
+          tabs: [{ value: 'runs', label: 'runs' }],
+          defaultTab: 'runs',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'center-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Center Panel"
+            description="This panel should keep a separate scrollbar from the left list and the right details column."
+            items={centerItems}
+          />
+        ),
+        defaultSize: 50,
+        minSize: 35,
+        header: {
+          tabs: [{ value: 'trace', label: 'trace' }],
+          defaultTab: 'trace',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'right-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Right Panel"
+            description="Use this to confirm the details panel can overflow and scroll without affecting the other panels."
+            items={rightItems}
+          />
+        ),
+        defaultSize: 25,
+        minSize: 20,
+        header: {
+          tabs: [{ value: 'details', label: 'details' }],
+          defaultTab: 'details',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          storageKey="section-layout-independent-scroll"
+          dragHandleColor="primary"
+        />
+      </div>
+    )
+  },
+}

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,12 +26,13 @@ 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 && (
             <AppHeader {...section.header} />
           )}
-          <div className="min-h-0 flex-1 overflow-auto">
+          <div className="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
             {section.content}
           </div>
         </div>

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

@@ -454,7 +454,7 @@ export function EnhancedDataTable({
   }, [handlers, table])
 
   return (
-    <div className={`flex w-full flex-col justify-start gap-6 ${className ?? ""}`}>
+    <div className={`flex min-h-0 w-full flex-1 flex-col justify-start gap-6 overflow-hidden ${className ?? ""}`}>
       <div className="flex items-center justify-between gap-2 px-4 lg:px-6">
         <div className="flex items-center gap-2 [&>button]:h-8">
           <Input
@@ -503,8 +503,8 @@ export function EnhancedDataTable({
         </div>
       </div>
 
-      <div className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
-        <div className="overflow-hidden rounded-lg border">
+      <div className="relative flex min-h-0 flex-1 flex-col gap-4 overflow-hidden px-4 lg:px-6">
+        <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/WorkflowRunObservabilityPanel/WorkflowRunObservabilityPanel.tsx

@@ -282,7 +282,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
                 </div>
               </div>
 
-              <div className="min-h-0 flex-1 overflow-auto p-2">
+              <div className="min-h-0 flex-1 overflow-auto p-2 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
                 {spans.length === 0 ? (
                   <div className="text-[#8a8c96] text-sm">No spans yet.</div>
                 ) : (
@@ -325,7 +325,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
           </TabsContent>
 
           <TabsContent className="min-h-0 flex-1 overflow-hidden" value="events">
-            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3">
+            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
               {events.length === 0 ? (
                 <div className="text-[#8a8c96] text-sm">No events yet.</div>
               ) : (
@@ -345,7 +345,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
           </TabsContent>
 
           <TabsContent className="min-h-0 flex-1 overflow-hidden" value="streams">
-            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3">
+            <div className="h-full min-h-0 space-y-2 overflow-auto rounded-lg border border-[#2a2a2f] bg-[#07080b] p-3 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
               {streams.length === 0 ? (
                 <div className="text-[#8a8c96] text-sm">No streams yet.</div>
               ) : (
@@ -355,7 +355,7 @@ export const WorkflowRunObservabilityTracePanel = React.memo<WorkflowRunObservab
                       <div className="font-medium">{stream.channel}</div>
                       <div className="text-[#8a8c96]">{stream.timestamp ?? ""}</div>
                     </div>
-                    <pre className="mt-1 overflow-auto font-mono text-xs text-[#cfd1d9]">{stream.payload}</pre>
+                    <pre className="mt-1 overflow-auto font-mono text-xs text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{stream.payload}</pre>
                   </div>
                 ))
               )}
@@ -413,7 +413,7 @@ export const WorkflowRunObservabilityDetailsPanel = React.memo<WorkflowRunObserv
           </div>
         </div>
 
-        <div className="mt-3 min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
+        <div className="mt-3 min-h-0 flex-1 space-y-3 overflow-y-auto pr-1 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
 
         <div className="space-y-3 text-xs">
           <div>
@@ -467,23 +467,23 @@ export const WorkflowRunObservabilityDetailsPanel = React.memo<WorkflowRunObserv
 
           <div className="space-y-2 pt-2">
             <div className="text-[#8a8c96] text-xs uppercase tracking-wide">Arguments</div>
-            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]">{formatPayload(selectedSpan.argumentsPayload ?? run.argumentsPayload)}</pre>
+            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{formatPayload(selectedSpan.argumentsPayload ?? run.argumentsPayload)}</pre>
           </div>
 
           <div className="space-y-2">
             <div className="text-[#8a8c96] text-xs uppercase tracking-wide">Input</div>
-            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]">{formatPayload(selectedSpan.inputPayload ?? run.inputPayload)}</pre>
+            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{formatPayload(selectedSpan.inputPayload ?? run.inputPayload)}</pre>
           </div>
 
           <div className="space-y-2">
             <div className="text-[#8a8c96] text-xs uppercase tracking-wide">Output</div>
-            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9]">{formatPayload(selectedSpan.outputPayload ?? run.outputPayload)}</pre>
+            <pre className="max-h-24 overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] p-2 font-mono text-[11px] text-[#cfd1d9] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">{formatPayload(selectedSpan.outputPayload ?? run.outputPayload)}</pre>
           </div>
         </div>
 
         <div className="space-y-2 border-t border-[#23242a] pt-3">
           <div className="font-medium text-sm">Events ({events.length})</div>
-          <div className="max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f]">
+          <div className="max-h-32 divide-y divide-[#23242a] overflow-auto rounded border border-[#2a2a2f] bg-[#090a0f] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
             {events.slice(0, 3).map((event) => (
               <div className="px-2 py-1 text-xs" key={event.id}>
                 <div>{event.title}</div>

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'