@dxos/plugin-assistant 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/TaskList/TaskList.tsx

@@ -2,44 +2,138 @@
 // Copyright 2026 DXOS.org
 //
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { Plan } from '@dxos/assistant-toolkit';
+import { type Process, type Trace } from '@dxos/compute';
 import { useObject } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { Icon, Tag, type ThemedClassName } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
-import { Row, RowList } from '@dxos/react-ui-list';
+import { TextCrawl } from '@dxos/react-ui-components';
+import { Listbox } from '@dxos/react-ui-list';
+
+import { collectProcessActivityLines, deriveInFlightActivityLine } from '#execution-graph';
+import { isTerminalActivityLine, useProcessEphemeralStatus } from '#hooks';
 
 export type TaskListProps = ThemedClassName<{
   plan: Plan.Plan;
+  space?: Space;
+  /**
+   * Supervisor conversation feed id; trace messages without a conversation id still match by pid.
+   */
+  conversationId?: string;
+  traceMessages?: readonly Trace.Message[];
 }>;
 
-export const TaskList = composable<HTMLDivElement, TaskListProps>(({ plan, ...props }, forwardedRef) => {
-  const [snapshot] = useObject(plan);
-  const tasks = snapshot?.tasks ?? [];
+export const TaskList = composable<HTMLDivElement, TaskListProps>(
+  ({ plan, space, conversationId, traceMessages, ...props }, forwardedRef) => {
+    const [snapshot] = useObject(plan);
+    const tasks = snapshot?.tasks ?? [];
+
+    return (
+      <Listbox.Root>
+        <Listbox.Viewport {...composableProps(props, { classNames: 'dx-container' })} ref={forwardedRef}>
+          <Listbox.Content aria-label='Tasks'>
+            {tasks.map((task) => (
+              <TaskListItem
+                key={task.id}
+                task={task}
+                space={space}
+                traceMessages={traceMessages}
+                conversationId={conversationId}
+              />
+            ))}
+          </Listbox.Content>
+        </Listbox.Viewport>
+      </Listbox.Root>
+    );
+  },
+);
+
+type TaskListItemProps = {
+  task: Plan.Task;
+  space?: Space;
+  traceMessages?: readonly Trace.Message[];
+  conversationId?: string;
+};
+
+const TaskListItem = ({ task, space, traceMessages, conversationId }: TaskListItemProps) => {
+  const durableLines = useMemo(() => {
+    if (!task.agentPid || !traceMessages?.length) {
+      return [];
+    }
+    const lines = collectProcessActivityLines(traceMessages, String(task.agentPid), { conversationId });
+    if (task.status !== 'in-progress') {
+      return lines;
+    }
+    return lines.filter((line) => !isTerminalActivityLine(line));
+  }, [task.agentPid, task.status, traceMessages, conversationId]);
+
+  const ephemeralLine = useProcessEphemeralStatus(
+    task.delegated === true && task.status === 'in-progress' ? task.agentPid : undefined,
+    space,
+  );
+
+  const inFlightLine = useMemo(() => {
+    if (ephemeralLine || task.status !== 'in-progress' || !task.agentPid || !traceMessages?.length) {
+      return undefined;
+    }
+    return deriveInFlightActivityLine(traceMessages, String(task.agentPid), { conversationId });
+  }, [ephemeralLine, task.status, task.agentPid, traceMessages, conversationId]);
+
+  const activityLines = useMemo(() => {
+    if (ephemeralLine) {
+      return [ephemeralLine];
+    }
+    if (inFlightLine) {
+      return [inFlightLine];
+    }
+    return durableLines;
+  }, [durableLines, ephemeralLine, inFlightLine]);
+
+  const agentPid = task.agentPid;
+  const showActivity = task.delegated === true && agentPid != null && activityLines.length > 0;
+
+  return (
+    <Listbox.Item id={task.id} classNames='py-0'>
+      <div className='flex flex-col gap-0.5 min-w-0'>
+        <div className='flex items-center gap-2 min-w-0'>
+          <Icon
+            icon={task.status === 'done' ? 'ph--check--regular' : 'ph--circle--regular'}
+            classNames={task.status === 'done' ? 'text-success-text' : undefined}
+            size={4}
+          />
+          <span className='sr-only'>
+            {task.status === 'done' ? 'done' : task.status === 'in-progress' ? 'in progress' : 'to do'}
+          </span>
+          <span className='truncate flex-1'>{task.title}</span>
+          {task.status === 'in-progress' && <Tag hue='info'>pending</Tag>}
+          {task.agentPid && <Tag hue='info'>{Plan.formatAgentPidTag(task.agentPid)}</Tag>}
+        </div>
+        {showActivity && agentPid != null && <DelegatedTaskActivity agentPid={agentPid} lines={activityLines} />}
+      </div>
+    </Listbox.Item>
+  );
+};
+
+type DelegatedTaskActivityProps = {
+  agentPid: Process.ID;
+  lines: string[];
+};
 
+const DelegatedTaskActivity = ({ agentPid, lines }: DelegatedTaskActivityProps) => {
   return (
-    <RowList.Root>
-      <RowList.Viewport {...composableProps(props, { classNames: 'dx-container' })} ref={forwardedRef}>
-        <RowList.Content aria-label='Tasks'>
-          {tasks.map((task) => (
-            <Row key={task.id} id={task.id} classNames='py-0'>
-              <div className='flex items-center gap-2'>
-                <Icon
-                  icon={task.status === 'done' ? 'ph--check--regular' : 'ph--circle--regular'}
-                  classNames={task.status === 'done' ? 'text-success-text' : undefined}
-                  size={4}
-                />
-                <span className='sr-only'>
-                  {task.status === 'done' ? 'done' : task.status === 'in-progress' ? 'in progress' : 'to do'}
-                </span>
-                <span className='truncate flex-1'>{task.title}</span>
-                {task.status === 'in-progress' && <Tag palette='info'>pending</Tag>}
-              </div>
-            </Row>
-          ))}
-        </RowList.Content>
-      </RowList.Viewport>
-    </RowList.Root>
+    <div className='flex items-center gap-2 ps-6 min-w-0 text-placeholder'>
+      <Icon icon='ph--brain--regular' size={3} classNames='shrink-0 opacity-70' />
+      <TextCrawl
+        key={`${String(agentPid)}:${lines.length}:${lines[lines.length - 1]}`}
+        lines={lines}
+        autoAdvance
+        greedy
+        size='sm'
+        classNames='text-xs text-subdued min-w-0 flex-1'
+      />
+    </div>
   );
-});
+};

package/src/components/ToolBlock/ToolBlock.tsx

@@ -23,7 +23,7 @@ export type ToolBlockProps = XmlWidgetProps<{
 }>;
 
 export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const items = useMemo<ToolPanelProps['items']>(() => {
     let lastToolCall: { tool: Tool.Any | undefined; block: ContentBlock.ToolCall } | undefined;

package/src/components/Toolbox/Toolbox.tsx

@@ -4,7 +4,7 @@
 
 import React, { Fragment, useEffect, useState } from 'react';
 
-import { type Blueprint } from '@dxos/compute';
+import { type Skill } from '@dxos/compute';
 import { Operation } from '@dxos/compute';
 import { type Database, Filter, type Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
@@ -21,19 +21,19 @@ export type ToolboxProps = {
   services?: { service: ServiceType }[];
   functions?: Operation.PersistentOperation[];
   // TODO(burdon): Combine into single array.
-  blueprints?: readonly Blueprint.Blueprint[];
-  activeBlueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
+  skills?: readonly Skill.Skill[];
+  activeSkills?: readonly Ref.Ref<Skill.Skill>[];
 };
 
 export const Toolbox = composable<HTMLDivElement, ToolboxProps>(
-  ({ functions, services, blueprints, activeBlueprints, ...props }, forwardedRef) => {
+  ({ functions, services, skills, activeSkills, ...props }, forwardedRef) => {
     return (
       <ScrollArea.Root {...composableProps(props)} thin orientation='vertical' ref={forwardedRef}>
         <ScrollArea.Viewport>
-          {blueprints && blueprints.length > 0 && (
+          {skills && skills.length > 0 && (
             <Section
-              title='Blueprints'
-              items={blueprints.map(({ name, description, tools }) => ({
+              title='Skills'
+              items={skills.map(({ name, description, tools }) => ({
                 name,
                 description,
                 subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
@@ -41,10 +41,10 @@ export const Toolbox = composable<HTMLDivElement, ToolboxProps>(
             />
           )}
 
-          {activeBlueprints && activeBlueprints.length > 0 && (
+          {activeSkills && activeSkills.length > 0 && (
             <Section
-              title='Blueprints'
-              items={activeBlueprints.map(({ target }) => ({
+              title='Skills'
+              items={activeSkills.map(({ target }) => ({
                 name: target?.name ?? '',
                 description: target?.description ?? '',
                 subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
@@ -136,7 +136,7 @@ export const ToolboxPanel = ({ classNames, db, processor }: ToolboxPanelProps) =
   return (
     <Toolbox
       classNames={classNames}
-      blueprints={processor?.context.getBlueprints()}
+      skills={processor?.context.getSkills()}
       services={serviceTools}
       functions={functions}
     />

package/src/components/index.ts

@@ -3,16 +3,11 @@
 //
 // TODO(wittjosiah): Factor components out of plugin-assistant into a standalone package.
 
-import { type ComponentType, lazy } from 'react';
-
 export * from './AgentProperties';
 export * from './Chat';
+export { TracePanel } from '../containers/TracePanel/TracePanel';
 export * from './ProcessTree';
 export * from './TaskList';
-export * from './TemplateEditor';
 export * from './Toolbox';
 
-export const AssistantSettings: ComponentType<any> = lazy(() => import('./AssistantSettings'));
-export const RoutineProperties: ComponentType<any> = lazy(() => import('./RoutineProperties'));
-
 export { ChatPrompt, type ChatPromptProps } from './ChatPrompt/ChatPrompt';

package/src/constants.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-/** Stable id used by `plugin-integration` to look up the Anthropic provider entry. */
+/** Stable id used by `plugin-connector` to look up the Anthropic provider entry. */
 export const ANTHROPIC_PROVIDER_ID = 'anthropic';
 
 /** Source string used in `AccessToken.source` and matched by `Header.byokLayer('anthropic.com')`. */

package/src/containers/AgentArticle/AgentArticle.stories.tsx

@@ -7,18 +7,18 @@ import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Plan, Agent } from '@dxos/assistant-toolkit';
-import { Filter, Obj, Ref } from '@dxos/echo';
-import { AutomationPlugin } from '@dxos/plugin-automation/testing';
+import { Agent, Plan } from '@dxos/assistant-toolkit';
+import { Feed, Filter, Obj, Ref } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { RoutinePlugin } from '@dxos/plugin-routine/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Loading, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
-import { createObjectFactory, TypeSpec } from '@dxos/schema/testing';
+import { TypeSpec, createObjectFactory } from '@dxos/schema/testing';
 import { Message, Organization, Person } from '@dxos/types';
 
 import { createMessage } from '#testing';
@@ -29,7 +29,7 @@ import { AgentArticle } from './AgentArticle';
 
 random.seed(1);
 
-type DefaultStoryProps = {
+type StoryArgs = {
   inputs?: boolean;
 };
 
@@ -42,7 +42,7 @@ const defaultSpec: TypeSpec[] = [
   { type: Person.Person, count: 10 },
 ];
 
-const DefaultStory = (_: DefaultStoryProps) => {
+const DefaultStory = (_: StoryArgs) => {
   const [space] = useSpaces();
   const [agent] = useQuery(space?.db, Filter.type(Agent.Agent));
   if (!agent) {
@@ -57,7 +57,7 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme(),
-    withPluginManager<DefaultStoryProps>(({ args: { inputs } }) => ({
+    withPluginManager<StoryArgs>(({ args: { inputs } }) => ({
       plugins: [
         ...corePlugins(),
         ClientPlugin({
@@ -71,10 +71,10 @@ const meta = {
               const factory = createObjectFactory(space.db, random as any);
               const artifacts = yield* Effect.promise(() => factory(defaultSpec));
 
-              const inputQueue = space.queues.create();
+              const inputFeed = space.db.add(Feed.make({}));
               if (inputs) {
                 yield* Effect.promise(() =>
-                  inputQueue.append([
+                  space.db.appendToFeed(inputFeed, [
                     createMessage('user', [{ _tag: 'text', text: 'Summarize the current artifacts.' }]),
                     createMessage('assistant', [
                       { _tag: 'text', text: 'Here is a quick overview of the organizations and contacts in context.' },
@@ -87,18 +87,17 @@ const meta = {
               space.db.add(
                 Obj.make(Agent.Agent, {
                   instructions: Ref.make(Text.make()),
-                  plan: Ref.make(Plan.makePlan({ tasks: [] })),
                   artifacts: artifacts.map((obj) => ({
                     name: Obj.getLabel(obj) ?? 'Artifact',
                     data: Ref.make(obj),
                   })),
-                  feed: Ref.fromURI(inputQueue.uri),
+                  feed: Ref.make(inputFeed),
                   subscriptions: [],
                 }),
               );
             }),
         }),
-        AutomationPlugin(),
+        RoutinePlugin(),
         AssistantPlugin(),
         PreviewPlugin(),
         StorybookPlugin({}),
@@ -109,7 +108,7 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<DefaultStoryProps>;
+} satisfies Meta<StoryArgs>;
 
 export default meta;
 

package/src/containers/AgentArticle/AgentArticle.tsx

@@ -12,7 +12,7 @@ import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Agent } from '@dxos/assistant-toolkit';
 import { Database, Feed, Filter, Obj, Query, Ref } from '@dxos/echo';
 import { useQuery } from '@dxos/react-client/echo';
-import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Card, Icon, IconButton, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { composable } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
 import { Menu } from '@dxos/react-ui-menu';
@@ -26,7 +26,7 @@ type Tab = 'artifacts' | 'inputs';
 export type AgentArticleProps = AppSurface.ObjectArticleProps<Agent.Agent>;
 
 export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [tab, setTab] = useState<Tab>('artifacts');
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
@@ -34,7 +34,7 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
   // TODO(burdon): Clear input feed also.
   const resetHistory = useSpaceCallback(
     spaceId,
-    [Feed.FeedService, Database.Service] as const,
+    [Database.Service] as const,
     Effect.fnUntraced(function* () {
       yield* Agent.resetChatHistory(agent);
       if (!agent.feed) {
@@ -146,21 +146,21 @@ const ArtifactTileCard = composable<HTMLDivElement, { data: Obj.Unknown }>(({ da
   return (
     <Card.Root {...props} ref={forwardedRef} data-testid='board-item' fullWidth>
       <Card.Header>
-        <Card.IconBlock>
-          <Card.Icon icon={icon} />
-        </Card.IconBlock>
+        <Card.Block>
+          <Icon icon={icon} />
+        </Card.Block>
         <Card.Title>{Obj.getLabel(data, { fallback: 'typename' })}</Card.Title>
         {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-        <Card.IconBlock>
+        <Card.Block end>
           <Menu.Trigger asChild disabled={!objectMenuItems?.length}>
-            <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
+            <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
           </Menu.Trigger>
           <Menu.Content items={objectMenuItems} />
-        </Card.IconBlock>
+        </Card.Block>
       </Card.Header>
       <Card.Body>
         <Surface.Surface
-          type={AppSurface.Card}
+          type={AppSurface.CardContent}
           limit={1}
           data={{ subject: data } satisfies AppSurface.ObjectCardData}
         />

package/src/{components → containers}/AssistantSettings/AssistantSettings.stories.tsx

@@ -4,6 +4,7 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { Provider } from '@dxos/ai';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
@@ -11,7 +12,7 @@ import { translations } from '#translations';
 import { AssistantSettings } from './AssistantSettings';
 
 const meta = {
-  title: 'plugins/plugin-assistant/components/AssistantSettings',
+  title: 'plugins/plugin-assistant/containers/AssistantSettings',
   tags: ['settings'],
   component: AssistantSettings,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
@@ -29,7 +30,7 @@ export const Default: Story = {
   args: {
     settings: {
       customPrompts: false,
-      modelProvider: 'edge',
+      modelProvider: Provider.edge.id,
     },
   },
 };

package/src/containers/AssistantSettings/AssistantSettings.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useMemo } from 'react';
+
+import { Provider } from '@dxos/ai';
+import { useOptionalCapability } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type DXN } from '@dxos/keys';
+import { useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldMap, createSelectField } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { Assistant, AssistantCapabilities, Ollama } from '#types';
+
+import { presetsForProvider, resolveProvider } from '../../processor';
+import { OllamaModels } from './OllamaModels';
+
+export type AssistantSettingsProps = AppSurface.SettingsProps<Assistant.Settings>;
+
+// The per-provider model-default options must match the chat picker (usePresets): the catalog models
+// served by the provider, restricted to installed models when `installed` is supplied (local sidecar).
+const presetOptions = (provider: DXN.DXN, installed?: ReadonlySet<string>) =>
+  presetsForProvider(provider)
+    .filter((preset) => !installed || installed.has(preset.backend))
+    .map((preset) => ({ value: preset.model, label: preset.label }));
+
+export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSettingsProps) => {
+  const { t } = useTranslation(meta.profile.key);
+
+  // The Ollama manager is the bundled sidecar (desktop only). Its presence selects the local
+  // provider: the managed `built-in` vs. an external `ollama` server.
+  const ollamaManager = useOptionalCapability(AssistantCapabilities.OllamaManager);
+  const localProvider = ollamaManager ? Provider.builtIn : Provider.ollama;
+  const localProviderKey = ollamaManager ? 'built-in' : 'ollama';
+
+  // Installed models reported by the bundled sidecar; restricts the local default to present models.
+  const localModels = useAtomValue(ollamaManager?.state ?? Ollama.emptyState);
+  const installed = useMemo(() => new Set(localModels.models.map((model) => model.name)), [localModels]);
+
+  // Reconcile a stored provider with the runtime (`ollama` → `built-in` on desktop) so the
+  // dropdown shows a concrete, available selection rather than blank.
+  const values = useMemo(
+    () => ({ ...settings, modelProvider: resolveProvider(settings.modelProvider, !!ollamaManager) }),
+    [settings, ollamaManager],
+  );
+
+  // Form `fieldMap` is keyed by dotted JSON path, so nested struct leaves are addressed directly.
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      // `defaultLabel: null` drops the sentinel "Default" option — a provider is always concrete.
+      'modelProvider': createSelectField({
+        defaultLabel: null,
+        options: [
+          { value: Provider.edge.id, label: t('settings.provider.edge.label') },
+          { value: localProvider.id, label: t(`settings.provider.${localProviderKey}.label`) },
+          { value: Provider.lmStudio.id, label: t('settings.provider.lmstudio.label') },
+        ],
+      }),
+      'modelDefaults.edge': createSelectField({ options: presetOptions(Provider.edge.id) }),
+      // `built-in` and `ollama` share the `ollama` default key; the managed sidecar restricts to installed.
+      'modelDefaults.ollama': createSelectField({
+        options: presetOptions(localProvider.id, ollamaManager ? installed : undefined),
+      }),
+      'modelDefaults.lmstudio': createSelectField({ options: presetOptions(Provider.lmStudio.id) }),
+    }),
+    [t, localProvider, localProviderKey, ollamaManager, installed],
+  );
+
+  return (
+    <Form.Root
+      variant='settings'
+      schema={Assistant.Settings}
+      readonly={!onSettingsChange}
+      values={values}
+      onValuesChanged={(values) => onSettingsChange?.(() => values)}
+    >
+      <Form.Viewport scroll>
+        <Form.Content>
+          <Form.Section title={meta.profile.name ?? meta.profile.key}>
+            <Form.FieldSet fieldMap={fieldMap} />
+          </Form.Section>
+          <OllamaModels />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};

package/src/containers/AssistantSettings/OllamaModels.stories.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+import React, { useMemo } from 'react';
+
+import { Form } from '@dxos/react-ui-form';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+import { type Ollama } from '#types';
+
+import { OllamaModelsSection } from './OllamaModels';
+
+// In-memory manager that bypasses the (desktop-only) capability lookup; methods are no-ops so the
+// configured state is what renders.
+const makeFakeManager = (state: Ollama.ModelsState): Ollama.Manager => ({
+  endpoint: 'http://localhost:21434',
+  state: Atom.make(state),
+  refresh: Effect.void,
+  refreshLoaded: Effect.void,
+  pull: () => Effect.void,
+  cancel: () => Effect.void,
+  load: () => Effect.void,
+  unload: () => Effect.void,
+  remove: () => Effect.void,
+});
+
+const Render = ({ state }: { state: Ollama.ModelsState }) => {
+  const manager = useMemo(() => makeFakeManager(state), [state]);
+  return (
+    <Form.Root schema={Schema.Struct({})} values={{}} variant='settings'>
+      <Form.Viewport scroll>
+        <Form.Content>
+          <OllamaModelsSection manager={manager} />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/OllamaModels',
+  render: Render,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof Render>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  args: {
+    state: { kind: 'ready', models: [], loaded: [], pulls: {}, errors: {} },
+  },
+};
+
+export const Populated: Story = {
+  args: {
+    state: {
+      kind: 'ready',
+      models: [
+        { name: 'llama3.2:1b', size: 1_321_098_329 },
+        { name: 'qwen2.5:14b', size: 9_001_234_567 },
+      ],
+      // llama3.2:1b is currently loaded into memory.
+      loaded: [{ name: 'llama3.2:1b', sizeVram: 1_400_000_000 }],
+      pulls: {},
+      // A per-model action error shows inline on its row.
+      errors: { 'qwen2.5:14b': 'error starting llama-server: not enough memory' },
+    },
+  },
+};
+
+export const Pulling: Story = {
+  args: {
+    state: {
+      kind: 'ready',
+      models: [{ name: 'llama3.2:1b', size: 1_321_098_329 }],
+      loaded: [],
+      pulls: {
+        'gpt-oss:20b': { status: 'downloading', completed: 4_200_000_000, total: 13_000_000_000 },
+      },
+      errors: {},
+    },
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    state: {
+      kind: 'failed',
+      models: [],
+      loaded: [],
+      pulls: {},
+      errors: {},
+      error: 'Connection refused',
+    },
+  },
+};