@dxos/plugin-github 0.7.4 → 0.14.0

package/src/services/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * as GitHubApi from './github-api.ts';

package/src/skills/GitHubSkill.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Operation from '@dxos/compute/Operation';
+import * as Skill from '@dxos/compute/Skill';
+import * as Template from '@dxos/compute/Template';
+import { trim } from '@dxos/util';
+
+import { GitHubOperation } from '#types';
+
+export const key = 'org.dxos.skill.github';
+
+/**
+ * Imported rather than named as strings: an unresolvable tool id is dropped from the toolkit with
+ * only a log line. Verbs that write to GitHub (approvals, comments) are left out so an agent cannot
+ * post under the user's account without a skill that asks for it.
+ */
+export const operations: readonly Operation.Definition.Any[] = [
+  GitHubOperation.ImportPullRequest,
+  GitHubOperation.GetPullRequestStatus,
+  GitHubOperation.GenerateWalkthrough,
+];
+
+/** GitHub pull requests: import them into a space by URL, read their live state, and walk through them. */
+export const make = (): Skill.Skill =>
+  Skill.make({
+    key,
+    name: 'GitHub',
+    description:
+      'Import GitHub pull requests into a space by URL or owner/repo#number, read their state and CI ' +
+      'status, and generate walkthroughs. Use when a task, message or the user names a pull request.',
+    agentCanEnable: true,
+    mcpPrompt: true,
+    tools: Skill.toolDefinitions({ operations }),
+    instructions: Template.make({
+      source: trim`
+        Pull requests live in the space as org.dxos.type.pullRequest objects, fetched from GitHub through the space's GitHub connection.
+        Whenever you have a pull request -- one you just opened, or one a task, message or the user names -- import it with ${Operation.toolName(GitHubOperation.ImportPullRequest)}, passing its github.com URL or owner/repo#number.
+        Never create the object by hand, since only an import fills its title, state and diff.
+        Importing is idempotent: a pull request the space already holds is returned unchanged, so import before referencing one rather than searching first.
+        Pass the returned pullRequest reference to the other tools, and use it wherever the pull request must be attached to another object, such as a task's artifacts.
+        Read the state and CI status with ${Operation.toolName(GitHubOperation.GetPullRequestStatus)} before reporting whether a pull request is open, merged or green; the stored object may be stale.
+      `,
+    }),
+  });

package/src/skills/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * as GitHubSkill from './GitHubSkill.ts';

package/src/stories/Generate.stories.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as LanguageModel from 'effect/ai/LanguageModel';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import React, { useCallback, useState } from 'react';
+
+import { AiService } from '@dxos/ai';
+import { AiServiceTestingPreset } from '@dxos/ai/testing';
+import * as EffectEx from '@dxos/effect/EffectEx';
+import * as Button from '@dxos/react-ui/Button';
+import * as Field from '@dxos/react-ui/Field';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Input from '@dxos/react-ui/Input';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { WalkthroughView } from '../components/WalkthroughView/index.ts';
+// Imported directly rather than through the barrel: that also exports the generation logic, which
+// pulls ECHO into a bundle that only needs the pure parsing.
+import { fillWalkthrough } from '../walkthrough/fill.ts';
+import { SYSTEM_PROMPT, buildPrompt } from '../walkthrough/prompt.ts';
+import { fetchPullRequest, parsePullRequestUrl } from './github.ts';
+
+const MODEL = 'com.anthropic.model.claude-sonnet-5.default';
+
+type Phase = 'idle' | 'fetching' | 'generating' | 'filling' | 'done';
+
+type Result = {
+  body: string;
+  covered: number;
+  total: number;
+};
+
+/**
+ * The generation path end to end, against a real pull request: fetch its diff from GitHub, have the
+ * model narrate it as placeholder fences, splice the real hunks in, and render the result.
+ *
+ * The model runs against the live edge service (the `edge-remote` testing preset), so this story
+ * needs network but no credentials.
+ */
+const DefaultStory = ({ url: initialUrl }: { url: string }) => {
+  const [url, setUrl] = useState(initialUrl);
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [error, setError] = useState<string>();
+  const [result, setResult] = useState<Result>();
+
+  const handleGenerate = useCallback(async () => {
+    const ref = parsePullRequestUrl(url);
+    if (!ref) {
+      setError('Not a pull request URL: expected https://github.com/owner/repo/pull/123.');
+      return;
+    }
+
+    setError(undefined);
+    setResult(undefined);
+    try {
+      setPhase('fetching');
+      const pullRequest = await fetchPullRequest(ref);
+
+      setPhase('generating');
+      // Named rather than spread: `RemotePullRequest.body` is the prompt's `description`, and a
+      // spread would drop it without a type error.
+      const prompt = buildPrompt({
+        ...ref,
+        title: pullRequest.title,
+        description: pullRequest.body,
+        baseBranch: pullRequest.baseBranch,
+        headBranch: pullRequest.headBranch,
+        diff: pullRequest.diff,
+      });
+      const { text } = await EffectEx.runPromise(
+        LanguageModel.generateText({ prompt: `${SYSTEM_PROMPT}\n\n---\n\n${prompt}` }).pipe(
+          Effect.provide(
+            Layer.provideMerge(
+              AiService.languageModel(MODEL).pipe(Layer.orDie),
+              AiServiceTestingPreset('edge-remote').pipe(Layer.orDie),
+            ),
+          ),
+        ),
+      );
+
+      // The model names the chunks; the bytes come from the patch it was shown.
+      setPhase('filling');
+      const filled = fillWalkthrough(text, pullRequest.diff);
+      setResult({ body: filled.body, covered: filled.covered, total: filled.total });
+      setPhase('done');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setPhase('idle');
+    }
+  }, [url]);
+
+  const busy = phase !== 'idle' && phase !== 'done';
+
+  return (
+    <div className='dx-fill grid grid-rows-[auto_1fr]'>
+      <div className='flex items-center gap-2 p-2 border-be border-separator'>
+        <Field.Root classNames='flex-1'>
+          <Input.Root
+            placeholder='https://github.com/owner/repo/pull/123'
+            value={url}
+            disabled={busy}
+            onChange={(event) => setUrl(event.target.value)}
+          />
+        </Field.Root>
+        <Button.Root disabled={busy} onClick={handleGenerate}>
+          <Icon.Icon
+            icon={busy ? 'ph--circle-notch--regular' : 'ph--path--regular'}
+            classNames={busy ? 'animate-spin' : ''}
+          />
+          <span className='ms-2'>{busy ? PHASE_LABEL[phase] : 'Generate'}</span>
+        </Button.Root>
+        {result && (
+          <span className='text-sm text-fg-muted whitespace-nowrap'>
+            {result.covered} of {result.total} hunks narrated
+          </span>
+        )}
+      </div>
+      {error ? (
+        <div className='p-4 text-sm text-error-text'>{error}</div>
+      ) : (
+        <WalkthroughView value={result?.body ?? ''} sidebar='full' />
+      )}
+    </div>
+  );
+};
+
+const PHASE_LABEL: Record<Phase, string> = {
+  idle: 'Generate',
+  fetching: 'Fetching the diff',
+  generating: 'Writing',
+  filling: 'Filling chunks',
+  done: 'Generate',
+};
+
+const meta = {
+  title: 'plugins/plugin-github/stories/Generate',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', controls: { disable: true } },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { url: 'https://github.com/dxos/dxos/pull/13082' },
+};

package/src/stories/Links.stories.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useMemo } from 'react';
+
+import * as Hooks from '@dxos/app-framework/Hooks';
+import * as Surface from '@dxos/app-framework/Surface';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
+import { Obj } from '@dxos/echo';
+import * as EffectEx from '@dxos/effect/EffectEx';
+import * as PreviewCapabilities from '@dxos/plugin-preview/PreviewCapabilities';
+import * as PreviewEvents from '@dxos/plugin-preview/PreviewEvents';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
+import {
+  EditorPreviewProvider,
+  type EditorPreviewProviderProps,
+  useEditorPreview,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import * as Card from '@dxos/react-ui/Card';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as Popover from '@dxos/react-ui/Popover';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+import { trim } from '@dxos/util';
+
+import { GitHubPlugin } from '#plugin';
+
+import { githubLinks } from '../extensions/index.ts';
+import { FixtureLinkSourcePlugin } from '../testing/index.ts';
+
+/** The popover's card is whatever `CardContent` surface the resolved object's type has — this plugin's, for a PR or issue. */
+const PreviewCard = () => {
+  const { target } = useEditorPreview('PreviewCard');
+  if (!target?.object) {
+    return null;
+  }
+  return (
+    <Popover.Content
+      classNames={[
+        'origin-(--transform-origin)',
+        'data-[state=open]:animate-popover-in',
+        'data-[state=closed]:animate-popover-out',
+      ]}
+    >
+      <Popover.Body>
+        <Card.Root border={false} classNames='dx-card-popover'>
+          <Card.Header>
+            <Layout.Block>
+              <Icon.Icon icon={Obj.getIcon(target.object)?.icon ?? 'ph--circle-dashed--regular'} />
+            </Layout.Block>
+            <Card.Title>{Obj.getLabel(target.object) ?? target.label}</Card.Title>
+            <Popover.CloseTrigger asChild>
+              <Card.Action system='close' />
+            </Popover.CloseTrigger>
+          </Card.Header>
+          <Surface.Surface type={AppSurface.CardContent} data={{ subject: target.object }} limit={1} />
+        </Card.Root>
+      </Popover.Body>
+    </Popover.Content>
+  );
+};
+
+type StoryArgs = {
+  text: string;
+};
+
+/**
+ * The whole mechanism end to end: `githubLinks()` turns the URLs into anchor chips, the chips'
+ * activation goes to the contributed `LinkResolver`s, and the resolved object's `CardContent`
+ * surface renders the card.
+ */
+const DefaultStory = ({ text }: StoryArgs) => {
+  const themeMode = UiHooks.useThemeMode();
+  const resolvers = Hooks.useCapabilities(PreviewCapabilities.LinkResolver);
+  const handleLookup = useCallback<NonNullable<EditorPreviewProviderProps['onLookup']>>(
+    async (ref) => {
+      for (const { match, resolve } of resolvers.flat()) {
+        if (!match(ref.eid)) {
+          continue;
+        }
+        const target = await EffectEx.runPromise(resolve(ref, {}));
+        if (target) {
+          return target;
+        }
+      }
+      return undefined;
+    },
+    [resolvers],
+  );
+  const extensions = useMemo(
+    () => [
+      createThemeExtensions({ themeMode }),
+      createBasicExtensions({ lineWrapping: true }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      githubLinks(),
+    ],
+    [themeMode],
+  );
+  const { parentRef } = useTextEditor({ initialValue: text, extensions }, [extensions]);
+
+  return (
+    <EditorPreviewProvider onLookup={handleLookup}>
+      <div ref={parentRef} className='dx-fill p-4 overflow-auto' />
+      <PreviewCard />
+    </EditorPreviewProvider>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-github/stories/Links',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    // No PreviewPlugin: its popover module would answer the anchors too, through the deck's layout
+    // operation, which has no handler here. The start event alone activates this plugin's resolver.
+    withPluginManager({
+      plugins: [...CorePlugins.make(), GitHubPlugin(), FixtureLinkSourcePlugin()],
+      setupEvents: [PreviewEvents.Start],
+    }),
+  ],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: trim`
+      # Repositories, pull requests and issues
+
+      The drawer landed in [#13007](https://github.com/dxos/dxos/pull/13007), the Main port in
+      [#13024](https://github.com/dxos/dxos/pull/13024) and [#13030](https://github.com/dxos/dxos/pull/13030).
+
+      Issues too: [#1](https://github.com/dxos/dxos/issues/1), and [the repository](https://github.com/dxos/dxos)
+      itself. A page below the repository is not an object: [the readme](https://github.com/dxos/dxos/blob/main/README.md).
+    `,
+  },
+};

package/src/stories/PullRequestArticle.stories.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useMemo } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+
+import * as Capabilities from '@dxos/app-framework/Capabilities';
+import * as Capability from '@dxos/app-framework/Capability';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
+import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
+import * as Operation from '@dxos/compute/Operation';
+import * as OperationHandlerSet from '@dxos/compute/OperationHandlerSet';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { PullRequest } from '@dxos/types';
+
+import { translations } from '#translations';
+import { GitHubOperation } from '#types';
+
+import { PullRequestArticle } from '../containers/PullRequestArticle/PullRequestArticle.tsx';
+import { PULL_REQUEST_13348_BODY, PULL_REQUEST_13348_RUNS } from '../testing/index.ts';
+import PULL_REQUEST_13363_PATCH from '../testing/pull-request-13363.patch?raw';
+
+/** Answers the article's GitHub reads from fixtures, so the story needs no connection or network. */
+const handlers = OperationHandlerSet.make(
+  Operation.withHandler(GitHubOperation.GetPullRequestStatus, () =>
+    Effect.succeed({
+      state: 'open' as const,
+      title: 'plugin-preview: open a card for a link no resolver can preview',
+      body: PULL_REQUEST_13348_BODY,
+      ci: 'success' as const,
+      checks: { total: PULL_REQUEST_13348_RUNS.length, passed: PULL_REQUEST_13348_RUNS.length, failed: 0, pending: 0 },
+      runs: PULL_REQUEST_13348_RUNS,
+      review: 'approved' as const,
+      approvals: 1,
+    }),
+  ),
+  Operation.withHandler(GitHubOperation.SyncPullRequest, () => Effect.succeed({ updated: [] })),
+  Operation.withHandler(GitHubOperation.GetPullRequestDiff, () => Effect.succeed({ diff: PULL_REQUEST_13363_PATCH })),
+  Operation.withHandler(LayoutOperation.AddToast, () => Effect.void),
+);
+
+// Built inside the render function so each mount gets its own object.
+const DefaultStory = () => {
+  const pullRequest = useMemo(
+    () =>
+      PullRequest.make({
+        owner: 'dxos',
+        repo: 'dxos',
+        number: 13348,
+        title: 'plugin-preview: open a card for a link no resolver can preview',
+        url: 'https://github.com/dxos/dxos/pull/13348',
+        state: 'open',
+        baseBranch: 'main',
+        headBranch: 'dm/wonderful-thompson-njcels',
+      }),
+    [],
+  );
+  return <PullRequestArticle role='article' attendableId='story' subject={pullRequest} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-github/stories/PullRequestArticle',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      capabilities: [
+        Capability.contribute(AppCapabilities.Translations, translations),
+        Capability.contribute(Capabilities.OperationHandler, handlers),
+      ],
+      plugins: [...CorePlugins.make()],
+    }),
+  ],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** The description reads at document width, inside the article's themed scroll area. */
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = await canvas.findByTestId('pull-request.body', {}, { timeout: 10_000 });
+    await expect(body.closest('[data-scope="panel"][data-width="document"]')).not.toBeNull();
+    await expect(body.closest('.dx-scroll-viewport')).not.toBeNull();
+  },
+};
+
+/** dxos/dxos#13363, one file at a time: only CodeMirror's themed scroller scrolls, never its host. */
+export const Files: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByTestId('pull-request.tab.files', {}, { timeout: 10_000 }));
+    const files = await canvas.findByTestId('pull-request.files', {}, { timeout: 10_000 });
+    await waitFor(() => expect(files.querySelector('.cm-editor')).not.toBeNull(), { timeout: 10_000 });
+    const host = files.querySelector('.cm-editor')?.parentElement;
+    await expect(host && getComputedStyle(host).overflowY).toBe('hidden');
+  },
+};

package/src/stories/PullRequestFiles.stories.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import * as Panel from '@dxos/react-ui/Panel';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { PullRequestFiles } from '../components/PullRequestFiles/index.ts';
+import { usePullRequestFiles } from '../hooks/usePullRequestFiles.ts';
+import PULL_REQUEST_13363_PATCH from '../testing/pull-request-13363.patch?raw';
+
+type StoryArgs = { diff: string };
+
+const STORAGE_KEY = 'story.reviewed.dxos/dxos#13363';
+
+const DefaultStory = ({ diff }: StoryArgs) => {
+  const files = usePullRequestFiles(diff, STORAGE_KEY);
+  return (
+    <Panel.Root>
+      <Panel.Body>
+        <PullRequestFiles
+          tree={files.tree}
+          file={files.file}
+          reviewed={files.reviewed}
+          total={files.files.length}
+          onSelect={files.select}
+          onReviewedChange={files.setReviewed}
+        />
+      </Panel.Body>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-github/stories/PullRequestFiles',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', controls: { disable: true }, translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** dxos/dxos#13363 (50 files): one file at a time beside the tree of every changed file. */
+export const Default: Story = {
+  args: { diff: PULL_REQUEST_13363_PATCH },
+};
+
+/** Checking a file off in the tree counts it as reviewed without opening it. */
+export const Reviewed: Story = {
+  args: { diff: PULL_REQUEST_13363_PATCH },
+  beforeEach: () => {
+    localStorage.removeItem(STORAGE_KEY);
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Re-queried per click: checking a file off re-renders the tree, which replaces the rows.
+    await userEvent.click((await canvas.findAllByTestId('pull-request.files.reviewed'))[0]);
+    await userEvent.click((await canvas.findAllByTestId('pull-request.files.reviewed'))[1]);
+    await expect(await canvas.findByText('2 of 50 files reviewed')).toBeInTheDocument();
+  },
+};

package/src/stories/PullRequestOverview.stories.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import * as PreviewEvents from '@dxos/plugin-preview/PreviewEvents';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
+import * as Panel from '@dxos/react-ui/Panel';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { GitHubPlugin } from '#plugin';
+import { translations } from '#translations';
+
+import { PullRequestOverview, type PullRequestOverviewProps } from '../components/PullRequestOverview/index.ts';
+import { FixtureLinkSourcePlugin, PULL_REQUEST_13348_BODY, PULL_REQUEST_13348_RUNS } from '../testing/index.ts';
+
+const meta = {
+  title: 'plugins/plugin-github/stories/PullRequestOverview',
+  component: PullRequestOverview,
+  decorators: [
+    (Story) => (
+      <Panel.Root>
+        <Panel.Body>
+          <Story />
+        </Panel.Body>
+      </Panel.Root>
+    ),
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [...CorePlugins.make(), GitHubPlugin(), FixtureLinkSourcePlugin()],
+      setupEvents: [PreviewEvents.Start],
+    }),
+  ],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof PullRequestOverview>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const REAL_PULL_REQUEST: PullRequestOverviewProps = {
+  body: PULL_REQUEST_13348_BODY,
+  details: {
+    reference: 'dxos/dxos#13348',
+    state: 'open',
+    checks: 'CI passing 22/22',
+    branches: 'dm/wonderful-thompson-njcels → main',
+  },
+  runs: PULL_REQUEST_13348_RUNS,
+};
+
+/** dxos/dxos#13348 as GitHub returned it: R2 demo media as pills, footers as cards, every check. */
+export const Default: Story = {
+  args: { ...REAL_PULL_REQUEST },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // The first story boots the plugin manager and the masonry reveals its tiles only once measured,
+    // so both waits are longer than the default second.
+    const body = await canvas.findByTestId('pull-request.body', {}, { timeout: 10_000 });
+    await expect(body).not.toHaveTextContent('Generated with');
+    await expect(body).not.toHaveTextContent('Composer preview');
+    await expect(canvas.getAllByTestId('pull-request.artifact.pill')).toHaveLength(3);
+    await expect(await canvas.findByTestId('pull-request.related.preview', {}, { timeout: 10_000 })).toHaveTextContent(
+      'pr-13348-composer-dev',
+    );
+    await expect(await canvas.findByTestId('pull-request.related.claude')).toHaveTextContent(
+      'session_016GM9fXXzbrr6JGNeeQBCmj',
+    );
+    await expect(canvas.getAllByTestId('pull-request.check')).toHaveLength(PULL_REQUEST_13348_RUNS.length);
+  },
+};
+
+/** A failing, a running and a timed-out check sort above the passing ones. */
+export const FailingChecks: Story = {
+  args: {
+    ...REAL_PULL_REQUEST,
+    runs: [
+      ...PULL_REQUEST_13348_RUNS.slice(2),
+      { ...PULL_REQUEST_13348_RUNS[0], name: 'Check / test (shard=6)', outcome: 'failure', conclusion: 'failure' },
+      { ...PULL_REQUEST_13348_RUNS[1], name: 'Check / e2e (shard=7)', outcome: 'failure', conclusion: 'timed_out' },
+      { name: 'Check / storybook', outcome: 'pending', startedAt: new Date(Date.now() - 252_000).toISOString() },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const [first, second, third] = await canvas.findAllByTestId('pull-request.check');
+    await expect(first).toHaveAttribute('data-outcome', 'failure');
+    await expect(second).toHaveAttribute('data-outcome', 'failure');
+    await expect(third).toHaveAttribute('data-outcome', 'pending');
+    await expect(third).toHaveTextContent(/Running · \d+m \d+s/);
+  },
+};
+
+/** A pill opens its demo video in place. */
+export const ArtifactPreview: Story = {
+  args: { ...REAL_PULL_REQUEST },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const [videoPill] = await canvas.findAllByTestId('pull-request.artifact.pill');
+    await userEvent.click(videoPill);
+    const popover = within(canvasElement.ownerDocument.body);
+    await expect(await popover.findAllByTestId('pull-request.artifact.video')).not.toHaveLength(0);
+  },
+};
+
+/** No description, no footers, checks still loading. */
+export const Empty: Story = {
+  args: { details: { reference: 'dxos/dxos#1' } },
+};