@dxos/react-ui-trace 0.11.1

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@dxos/react-ui-trace",
+  "version": "0.11.1",
+  "description": "Runtime observability: process tree, trace timeline, session gantt.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
+  "author": "DXOS.org",
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/lib/index.mjs"
+    },
+    "./testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "import": "./dist/lib/testing.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "import": "./dist/lib/translations.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@effect/atom-react": "4.0.0-rc.115",
+    "date-fns": "^3.6.0",
+    "effect": "4.0.0-rc.115",
+    "@dxos/async": "0.11.1",
+    "@dxos/compute": "0.11.1",
+    "@dxos/compute-runtime": "0.11.1",
+    "@dxos/echo": "0.11.1",
+    "@dxos/keys": "0.11.1",
+    "@dxos/log": "0.11.1",
+    "@dxos/react-hooks": "0.11.1",
+    "@dxos/react-ui-components": "0.11.1",
+    "@dxos/react-client": "0.11.1",
+    "@dxos/react-ui-list": "0.11.1",
+    "@dxos/react-ui-menu": "0.11.1",
+    "@dxos/types": "0.11.1",
+    "@dxos/react-ui-syntax-highlighter": "0.11.1",
+    "@dxos/util": "0.11.1"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.5.8",
+    "@types/react": "~19.2.17",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "vite": "^8.2.1",
+    "@dxos/random": "0.11.1",
+    "@dxos/react-ui": "0.11.1",
+    "@dxos/storybook-utils": "0.11.1",
+    "@dxos/ui-theme": "0.11.1"
+  },
+  "peerDependencies": {
+    "effect": "4.0.0-rc.115",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "^0.11.1",
+    "@dxos/ui-theme": "^0.11.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Gantt/Gantt.stories.tsx

@@ -0,0 +1,241 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type ReactNode, useEffect, useState } from 'react';
+
+import { random } from '@dxos/random';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Gantt, type GanttData, type GanttLane, type GanttMarker } from './Gantt.tsx';
+
+random.seed(1);
+
+const T0 = Date.UTC(2026, 8, 11, 10, 0, 0);
+const MINUTE = 60_000;
+
+/**
+ * Process A works two tasks itself and spawns process B for a third, which in turn works two subtasks
+ * in-session; process C is a second spawn from A. Two runs have terminated (one failed), the rest are
+ * still going, and the last task waits on C.
+ */
+const lanes: GanttLane[] = [
+  {
+    id: 'a',
+    kind: 'session',
+    label: 'Process A — Plan the release',
+    status: 'running',
+    start: T0,
+    tokens: { input: 12_400, output: 3_100, total: 15_500 },
+    toolCalls: 6,
+  },
+  {
+    id: 'a:triage',
+    kind: 'task',
+    taskId: 'task:triage',
+    label: 'Triage open issues',
+    status: 'done',
+    parentId: 'a',
+    start: T0 + 0.5 * MINUTE,
+    end: T0 + 1.8 * MINUTE,
+  },
+  {
+    id: 'a:docs',
+    kind: 'task',
+    taskId: 'task:docs',
+    label: 'Update docs',
+    status: 'failed',
+    parentId: 'a',
+    start: T0 + 2.4 * MINUTE,
+    end: T0 + 3.6 * MINUTE,
+  },
+  {
+    id: 'b',
+    kind: 'session',
+    taskId: 'task:changelog',
+    label: 'Process B — Draft changelog',
+    status: 'done',
+    parentId: 'a',
+    start: T0 + 4.1 * MINUTE,
+    end: T0 + 7.2 * MINUTE,
+    delegatedFrom: { laneId: 'a', markerId: 'm:a-spawn-b' },
+    tokens: { input: 40_200, output: 8_900, total: 49_100 },
+    toolCalls: 4,
+  },
+  {
+    id: 'b:titles',
+    kind: 'task',
+    taskId: 'task:titles',
+    label: 'Collect PR titles',
+    status: 'done',
+    parentId: 'b',
+    start: T0 + 4.6 * MINUTE,
+    end: T0 + 5.7 * MINUTE,
+  },
+  {
+    id: 'b:highlights',
+    kind: 'task',
+    taskId: 'task:highlights',
+    label: 'Write highlights',
+    status: 'done',
+    parentId: 'b',
+    start: T0 + 6 * MINUTE,
+    end: T0 + 6.9 * MINUTE,
+  },
+  {
+    id: 'c',
+    kind: 'session',
+    taskId: 'task:notes',
+    label: 'Process C — Write release notes',
+    status: 'running',
+    parentId: 'a',
+    start: T0 + 5.1 * MINUTE,
+    delegatedFrom: { laneId: 'a', markerId: 'm:a-spawn-c' },
+    tokens: { input: 8_000, output: 900, total: 8_900 },
+    toolCalls: 2,
+  },
+  {
+    id: 'a:announce',
+    kind: 'task',
+    taskId: 'task:announce',
+    label: 'Publish announcement',
+    status: 'blocked',
+    parentId: 'a',
+    blockedOn: ['c'],
+  },
+];
+
+const markers: GanttMarker[] = [
+  { id: 'm:a-begin', laneId: 'a', kind: 'request', timestamp: T0, label: 'Request started' },
+  { id: 'm:a-user', laneId: 'a', kind: 'message', timestamp: T0 + 0.2 * MINUTE, label: 'Plan the release' },
+  { id: 'm:a-spawn-b', laneId: 'a', kind: 'delegation', timestamp: T0 + 4 * MINUTE, label: 'Spawned process B' },
+  { id: 'm:a-spawn-c', laneId: 'a', kind: 'delegation', timestamp: T0 + 5 * MINUTE, label: 'Spawned process C' },
+  { id: 'm:a-end', laneId: 'a', kind: 'request', timestamp: T0 + 5.4 * MINUTE, label: 'Request success' },
+
+  { id: 'm:triage-start', laneId: 'a:triage', kind: 'operation', timestamp: T0 + 0.5 * MINUTE, label: 'Started' },
+  { id: 'm:triage-tool', laneId: 'a:triage', kind: 'tool', timestamp: T0 + 1.1 * MINUTE, label: 'list-issues' },
+  { id: 'm:triage-end', laneId: 'a:triage', kind: 'operation', timestamp: T0 + 1.8 * MINUTE, label: 'Done' },
+
+  { id: 'm:docs-start', laneId: 'a:docs', kind: 'operation', timestamp: T0 + 2.4 * MINUTE, label: 'Started' },
+  { id: 'm:docs-tool', laneId: 'a:docs', kind: 'tool', timestamp: T0 + 3 * MINUTE, label: 'search' },
+  {
+    id: 'm:docs-fail',
+    laneId: 'a:docs',
+    kind: 'error',
+    timestamp: T0 + 3.6 * MINUTE,
+    label: 'Add artifact',
+    level: 'error',
+  },
+
+  { id: 'm:b-start', laneId: 'b', kind: 'operation', timestamp: T0 + 4.1 * MINUTE, label: 'Run Instructions' },
+  { id: 'm:b-tool', laneId: 'b', kind: 'tool', timestamp: T0 + 4.3 * MINUTE, label: 'read-project' },
+  { id: 'm:b-end', laneId: 'b', kind: 'operation', timestamp: T0 + 7.2 * MINUTE, label: 'Run Instructions' },
+
+  { id: 'm:titles-start', laneId: 'b:titles', kind: 'operation', timestamp: T0 + 4.6 * MINUTE, label: 'Started' },
+  { id: 'm:titles-tool', laneId: 'b:titles', kind: 'tool', timestamp: T0 + 5.2 * MINUTE, label: 'list-pull-requests' },
+  { id: 'm:titles-end', laneId: 'b:titles', kind: 'operation', timestamp: T0 + 5.7 * MINUTE, label: 'Done' },
+
+  { id: 'm:highlights-start', laneId: 'b:highlights', kind: 'operation', timestamp: T0 + 6 * MINUTE, label: 'Started' },
+  {
+    id: 'm:highlights-tool',
+    laneId: 'b:highlights',
+    kind: 'tool',
+    timestamp: T0 + 6.4 * MINUTE,
+    label: 'create-document',
+  },
+  { id: 'm:highlights-end', laneId: 'b:highlights', kind: 'operation', timestamp: T0 + 6.9 * MINUTE, label: 'Done' },
+
+  { id: 'm:c-start', laneId: 'c', kind: 'operation', timestamp: T0 + 5.1 * MINUTE, label: 'Run Instructions' },
+  { id: 'm:c-tool-1', laneId: 'c', kind: 'tool', timestamp: T0 + 6.6 * MINUTE, label: 'search' },
+  { id: 'm:c-tool-2', laneId: 'c', kind: 'tool', timestamp: T0 + 8.3 * MINUTE, label: 'create-document' },
+];
+
+/** The chart over the data it was drawn from, so a reader can match a bar to its lane. */
+const Layout = ({ chart, data }: { chart: ReactNode; data: unknown }) => (
+  <div className='flex flex-col dx-fill overflow-hidden'>
+    {chart}
+    <JsonHighlighter data={data} classNames='dx-grow border-t border-separator text-xs' />
+  </div>
+);
+
+type StoryArgs = GanttData & {
+  /** Render the drawing alone, as a host that already lists the lanes does. */
+  chartOnly?: boolean;
+};
+
+const Chart = ({ chartOnly, ...data }: StoryArgs) => (
+  <Gantt.Root {...data} classNames='p-4'>
+    {!chartOnly && <Gantt.Legend />}
+    <Gantt.Chart />
+    {!chartOnly && <Gantt.Meta />}
+  </Gantt.Root>
+);
+
+const DefaultStory = (props: StoryArgs) => (
+  <Layout
+    chart={<Chart {...props} />}
+    data={{ lanes: props.lanes, markers: props.markers, range: props.range, now: props.now }}
+  />
+);
+
+/** Appends a tool marker to the running sub-agent every tick, so its box grows with `now`. */
+const LiveStory = (props: StoryArgs) => {
+  const [now, setNow] = useState(T0 + 10 * MINUTE);
+  const [live, setLive] = useState<GanttMarker[]>([...(props.markers ?? [])]);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow((now) => {
+        const next = now + 0.5 * MINUTE;
+        setLive((markers) => [
+          ...markers,
+          {
+            id: `m:live-${markers.length}`,
+            laneId: 'c',
+            kind: 'tool',
+            timestamp: next,
+            label: random.lorem.word(),
+          },
+        ]);
+        return next;
+      });
+    }, 1_000);
+    return () => clearInterval(interval);
+  }, []);
+  const range = { start: T0, end: now + MINUTE };
+  return (
+    <Layout
+      chart={<Chart {...props} markers={live} now={now} range={range} />}
+      data={{ lanes: props.lanes, markers: live, range, now }}
+    />
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-components/Gantt',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  args: {
+    lanes,
+    markers,
+    now: T0 + 10 * MINUTE,
+    range: { start: T0, end: T0 + 11 * MINUTE },
+    onLaneSelect: (lane: GanttLane) => console.log('lane', lane),
+    onMarkerSelect: (marker: GanttMarker) => console.log('marker', marker),
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const ChartOnly: Story = {
+  args: { chartOnly: true },
+};
+
+export const Live: Story = {
+  render: LiveStory,
+};