@dxos/plugin-github 0.7.4 → 0.14.0

package/src/components/PullRequestOverview/RelatedCards.tsx

@@ -0,0 +1,147 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Masonry } from '@dxos/react-ui-masonry';
+import * as Button from '@dxos/react-ui/Button';
+import * as Card from '@dxos/react-ui/Card';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as Layout from '@dxos/react-ui/Layout';
+
+import { meta } from '#meta';
+
+import { type ArtifactLink, type PullRequestBody } from '../../pull-request-body.ts';
+import { ArtifactMedia, artifactIcon } from './ArtifactPill.tsx';
+
+/** One tile of the related grid: a demo artifact, or a link out of the pull request. */
+export type RelatedItem =
+  | { kind: 'artifact'; id: string; artifact: ArtifactLink }
+  | { kind: 'link'; id: string; icon: string; iconClassNames?: string; title: string; href?: string; detail?: string };
+
+export type RelatedCardsProps = Pick<PullRequestBody, 'artifacts' | 'claudeCode' | 'previewUrl'>;
+
+/** What {@link RelatedCards} would show; empty when the pull request links to nothing beyond its diff. */
+export const useRelatedItems = ({ artifacts, claudeCode, previewUrl }: RelatedCardsProps): RelatedItem[] => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  return useMemo(() => {
+    const items: RelatedItem[] = artifacts.map((artifact) => ({ kind: 'artifact', id: artifact.url, artifact }));
+    if (previewUrl) {
+      items.push({
+        kind: 'link',
+        id: 'preview',
+        icon: 'ph--rocket-launch--regular',
+        iconClassNames: 'text-success-text',
+        title: t('preview-deployment.label'),
+        href: previewUrl,
+        detail: hostOf(previewUrl),
+      });
+    }
+    if (claudeCode) {
+      items.push({
+        kind: 'link',
+        id: 'claude',
+        icon: 'px--anthropic--regular',
+        iconClassNames: 'text-warning-text',
+        title: claudeCode.sessionUrl ? t('claude-session.label') : t('claude-generated.label'),
+        href: claudeCode.sessionUrl,
+        detail: claudeCode.sessionUrl?.split('/').at(-1),
+      });
+    }
+    return items;
+  }, [artifacts, claudeCode, previewUrl, t]);
+};
+
+/**
+ * What the pull request points at beyond its diff, one card each — its demo media, the preview
+ * deployment built from it, and the session that wrote it — in the masonry grid related objects
+ * use everywhere else. Renders inside its host's scroller rather than owning one.
+ */
+export const RelatedCards = ({ items }: { items: readonly RelatedItem[] }) => (
+  <Masonry.Root Tile={RelatedCard} centered={false}>
+    <Masonry.Viewport items={items} getId={(item: RelatedItem) => item.id} scroll={false} />
+  </Masonry.Root>
+);
+
+const RelatedCard = ({ data: item }: { data: RelatedItem }) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  if (item.kind === 'link') {
+    return (
+      <Card.Root data-testid={`pull-request.related.${item.id}`}>
+        <CardHeading icon={item.icon} iconClassNames={item.iconClassNames} title={item.title} href={item.href} />
+        {item.detail && (
+          <Card.Row>
+            <Card.Text variant='muted' truncate>
+              {item.detail}
+            </Card.Text>
+          </Card.Row>
+        )}
+      </Card.Root>
+    );
+  }
+
+  const { artifact } = item;
+  return (
+    <Card.Root data-testid='pull-request.related.artifact'>
+      <CardHeading
+        icon={artifactIcon[artifact.kind]}
+        title={artifact.label ?? t(`artifact-${artifact.kind}.label`)}
+        href={artifact.url}
+      />
+      <Card.Row>
+        <Card.Text variant='muted' truncate>
+          {artifact.name}
+        </Card.Text>
+      </Card.Row>
+      {artifact.kind !== 'file' && (
+        <Card.Body>
+          {/* `col-span-3` spans the card's gutters, as `Card.Poster` does; the body is `display: contents`. */}
+          <ArtifactMedia artifact={artifact} classNames='col-span-3 aspect-video max-h-[200px] object-cover' />
+        </Card.Body>
+      )}
+    </Card.Root>
+  );
+};
+
+const CardHeading = ({
+  icon,
+  iconClassNames,
+  title,
+  href,
+}: {
+  icon: string;
+  iconClassNames?: string;
+  title: string;
+  href?: string;
+}) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  return (
+    <Card.Header>
+      <Layout.Block>
+        <Icon.Icon icon={icon} classNames={iconClassNames} />
+      </Layout.Block>
+      <Card.Title>{title}</Card.Title>
+      {href && (
+        <Layout.Block rail='end'>
+          <Button.Root
+            iconOnly
+            variant='ghost'
+            icon='ph--arrow-square-out--regular'
+            label={t('open-link.label')}
+            onClick={() => window.open(href, '_blank', 'noopener,noreferrer')}
+          />
+        </Layout.Block>
+      )}
+    </Card.Header>
+  );
+};
+
+const hostOf = (url: string): string => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+};

package/src/components/PullRequestOverview/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './ArtifactPill.tsx';
+export * from './CheckRunList.tsx';
+export * from './PullRequestDetails.tsx';
+export * from './PullRequestOverview.tsx';
+export * from './RelatedCards.tsx';

package/src/components/PullRequestStatus/PullRequestStatus.tsx

@@ -0,0 +1,84 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Layout from '@dxos/react-ui/Layout';
+import { type PullRequest } from '@dxos/types';
+
+import { meta } from '#meta';
+import { type GitHubOperation } from '#types';
+
+const stateHue: Record<PullRequest.State, string> = {
+  open: 'green',
+  closed: 'red',
+  merged: 'purple',
+  draft: 'neutral',
+};
+
+const reviewHue: Record<GitHubOperation.ReviewState, string> = {
+  approved: 'green',
+  changes_requested: 'red',
+  none: 'neutral',
+};
+
+const ciHue: Record<GitHubOperation.CiState, string> = {
+  success: 'green',
+  failure: 'red',
+  pending: 'amber',
+  none: 'neutral',
+};
+
+export type PullRequestStatusProps = {
+  reference: string;
+  title?: string;
+  state?: PullRequest.State;
+  /** Absent until the live status has arrived; the review and CI tags read as unknown until then. */
+  review?: { state: GitHubOperation.ReviewState; approvals: number };
+  ci?: { state: GitHubOperation.CiState; checks: GitHubOperation.CheckCounts };
+};
+
+/** One line answering where the pull request stands: open or merged, approved or not, CI green or red. */
+export const PullRequestStatus = ({ reference, title, state, review, ci }: PullRequestStatusProps) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  return (
+    <Layout.Flex
+      align='center'
+      gap='sm'
+      role='status'
+      classNames='px-3 py-1.5 border-b border-separator-subtle text-sm min-w-0'
+      data-testid='pull-request.status'
+    >
+      <span className='dx-tag dx-tag-inline shrink-0' data-hue='neutral'>
+        {reference}
+      </span>
+      {title && <span className='truncate grow'>{title}</span>}
+      <Layout.Flex align='center' gap='sm' classNames='shrink-0 ml-auto'>
+        {state && (
+          <span className='dx-tag dx-tag-inline' data-hue={stateHue[state]} data-testid='pull-request.status.state'>
+            {t(`pull-request-state.${state}.label`)}
+          </span>
+        )}
+        <span
+          className='dx-tag dx-tag-inline'
+          data-hue={review ? reviewHue[review.state] : 'neutral'}
+          data-testid='pull-request.status.review'
+        >
+          {review
+            ? t(`review-status.${review.state}.label`, { count: review.approvals })
+            : t('review-status.unknown.label')}
+        </span>
+        <span
+          className='dx-tag dx-tag-inline'
+          data-hue={ci ? ciHue[ci.state] : 'neutral'}
+          data-testid='pull-request.status.ci'
+        >
+          {ci ? t(`ci-status.${ci.state}.label`) : t('ci-status.unknown.label')}
+          {ci && ci.checks.total > 0 && ` ${ci.checks.passed}/${ci.checks.total}`}
+        </span>
+      </Layout.Flex>
+    </Layout.Flex>
+  );
+};

package/src/components/PullRequestStatus/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './PullRequestStatus.tsx';

package/src/components/WalkthroughView/WalkthroughView.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { TextEditor } from '@dxos/react-ui-editor';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Layout from '@dxos/react-ui/Layout';
+import * as Status from '@dxos/react-ui/Status';
+
+import { meta } from '#meta';
+
+import { spaceHeadings } from '../../walkthrough/headings.ts';
+import { type DiffDocumentOptions, diffDocumentExtensions } from './extensions.ts';
+
+export type WalkthroughViewProps = Omit<DiffDocumentOptions, 'themeMode'> & {
+  /** The markdown document: prose, headings and ```diff fences. */
+  value: string;
+};
+
+/**
+ * A read-only diff document: a whole walkthrough with its navigation rail, or one file's change as a
+ * single fence. Either way the chunks are the walkthrough's own, so a file reads the same in both.
+ */
+export const WalkthroughView = ({ value, sidebar, layout, onLineComment }: WalkthroughViewProps) => {
+  const themeMode = Hooks.useThemeMode();
+  const extensions = useMemo(
+    () => diffDocumentExtensions({ themeMode, sidebar, layout, onLineComment }),
+    [themeMode, sidebar, layout, onLineComment],
+  );
+
+  // Walkthroughs stored before generation spaced their headings still read with a blank line above each.
+  const markdown = useMemo(() => spaceHeadings(value), [value]);
+
+  // Only CodeMirror's own scroller may scroll: it carries the editor's themed scrollbar, whereas an
+  // overflowing host would draw the browser's.
+  return (
+    <TextEditor value={markdown} extensions={extensions} focusable={false} classNames='dx-expand overflow-hidden' />
+  );
+};
+
+export type WalkthroughPlaceholderProps = {
+  generating?: boolean;
+  onGenerate: () => void;
+};
+
+/** What the walkthrough tab shows before there is a walkthrough: the offer to write one, or its progress. */
+export const WalkthroughPlaceholder = ({ generating, onGenerate }: WalkthroughPlaceholderProps) => {
+  const { t } = Hooks.useTranslation(meta.profile.key);
+  return (
+    <Layout.Flex column center gap='md' classNames='dx-expand'>
+      <Status.Empty>{t(generating ? 'walkthrough-generating.message' : 'no-walkthrough.message')}</Status.Empty>
+      {!generating && (
+        <Button.Root variant='primary' onClick={onGenerate}>
+          {t('generate-walkthrough.label')}
+        </Button.Root>
+      )}
+    </Layout.Flex>
+  );
+};

package/src/components/WalkthroughView/extensions.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+import {
+  type DiffLayout,
+  type DiffLineTarget,
+  type ThemeExtensionsOptions,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  diffBlocks,
+  scrollbarAutohide,
+  walkthroughSidebar,
+  walkthroughTheme,
+} from '@dxos/ui-editor';
+import { type ThemeMode } from '@dxos/ui-types';
+
+/** A definite content width, which the diff chunks cap themselves against. */
+const slots: ThemeExtensionsOptions['slots'] = {
+  content: { className: 'dx-container-type-inline-size w-full mx-auto! max-w-[min(72rem,100%-3rem)] py-3!' },
+};
+
+export type DiffDocumentOptions = {
+  themeMode: ThemeMode;
+  /** The navigation rail beside the document; `none` for a document that is a single file. */
+  sidebar?: 'full' | 'stats' | 'none';
+  layout?: DiffLayout;
+  onLineComment?: (target: DiffLineTarget, anchor: HTMLElement) => void;
+};
+
+/**
+ * A read-only markdown document whose ```diff fences render as diff chunks — the one reading surface
+ * both a walkthrough and a single changed file are shown in, so the two cannot drift apart.
+ */
+export const diffDocumentExtensions = ({
+  themeMode,
+  sidebar = 'none',
+  layout,
+  onLineComment,
+}: DiffDocumentOptions): Extension => [
+  createThemeExtensions({ themeMode, slots }),
+  createBasicExtensions({ lineWrapping: true, readOnly: true }),
+  createMarkdownExtensions(),
+  decorateMarkdown(),
+  scrollbarAutohide(),
+  walkthroughTheme(),
+  diffBlocks({ layout, ...(onLineComment ? { onLineComment } : {}) }),
+  sidebar === 'none' ? [] : walkthroughSidebar({ variant: sidebar }),
+];

package/src/components/WalkthroughView/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './extensions.ts';
+export * from './WalkthroughView.tsx';

package/src/components/index.ts

@@ -1,12 +1,9 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-export * from './EmbeddedMain';
-export * from './ExportDialog';
-export * from './GithubApiProviders';
-export * from './GithubEchoResolverProviders';
-export * from './ImportDialog';
-export * from './Issue';
-export * from './MarkdownActions';
-export * from './UrlDialog';
+export * from './CommentComposer/index.ts';
+export * from './PullRequestFiles/index.ts';
+export * from './PullRequestOverview/index.ts';
+export * from './PullRequestStatus/index.ts';
+export * from './WalkthroughView/index.ts';

package/src/constants.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/** Source string used in `AccessToken.source` and `Obj.Meta.keys[i].source` for GitHub. */
+export const GITHUB_SOURCE = 'github.com';
+
+/** Connector id matching the `ConnectorEntry.id` contributed by this plugin. */
+export const GITHUB_PROVIDER_ID = 'github';
+
+/** Base URL for the GitHub REST API. */
+export const GITHUB_API_BASE = 'https://api.github.com';

package/src/containers/ImportPullRequestDialog/ImportPullRequestDialog.tsx

@@ -0,0 +1,160 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback } from 'react';
+
+import * as Hooks from '@dxos/app-framework/Hooks';
+import * as ToolkitHooks from '@dxos/app-toolkit/Hooks';
+import * as LayoutOperation from '@dxos/app-toolkit/LayoutOperation';
+import { log } from '@dxos/log';
+import { Form } from '@dxos/react-ui-form';
+import * as Dialog from '@dxos/react-ui/Dialog';
+import * as UiHooks from '@dxos/react-ui/Hooks';
+import * as SystemButton from '@dxos/react-ui/SystemButton';
+
+import { meta } from '#meta';
+import { GitHubOperation } from '#types';
+
+import { GitHubRepoInaccessibleError } from '../../errors.ts';
+import { parsePullRequestReference } from '../../extensions/index.ts';
+import { useOpenObject } from '../../hooks/index.ts';
+import { GitHubApi } from '../../services/index.ts';
+
+const ImportPullRequestForm = Schema.Struct({
+  reference: Schema.String.pipe(
+    // Validated here as well as in the operation: a typo should be answered by the field the user is
+    // looking at, not by a toast after a round trip to GitHub.
+    Schema.check(
+      Schema.makeFilter(
+        (value: string) =>
+          parsePullRequestReference(value) !== undefined || 'Paste a pull request link or owner/repo#number.',
+      ),
+    ),
+    Schema.annotate({ title: 'Pull request', description: 'https://github.com/owner/repo/pull/123 or owner/repo#123' }),
+  ),
+});
+
+type ImportPullRequestForm = Schema.Schema.Type<typeof ImportPullRequestForm>;
+
+/**
+ * The status `GitHubRepoInaccessibleError` recorded, for the case the HTTP failure has already been
+ * folded into it and `GitHubApi.responseStatus` no longer sees a response.
+ */
+const readStatus = (error: unknown): number | undefined => {
+  if (!GitHubRepoInaccessibleError.is(error)) {
+    return undefined;
+  }
+  const status = error.context.status;
+  return typeof status === 'number' ? status : undefined;
+};
+
+/**
+ * Names the failure the user can act on. A rejected credential and a repository the connection
+ * cannot see both read as "not found" from the API, but only the first is fixed by reconnecting —
+ * and a space with no connection at all is fixed by making one.
+ */
+const importFailureKey = (error: unknown): string => {
+  if (!GitHubRepoInaccessibleError.is(error)) {
+    return 'import-pull-request-failed.title';
+  }
+  if (error.context.tokenStatus === 401) {
+    return 'import-pull-request-token-rejected.title';
+  }
+  return error.context.connected === true
+    ? 'import-pull-request-inaccessible.title'
+    : 'import-pull-request-not-connected.title';
+};
+
+/**
+ * Imports a pull request the user names, into the space they are working in, and opens it.
+ *
+ * The space is the active one rather than a chosen one: the command is reached from wherever the
+ * user already is, and a picker would ask a question they have already answered.
+ */
+export const ImportPullRequestDialog = () => {
+  const { t } = UiHooks.useTranslation(meta.profile.key);
+  const { invokePromise } = Hooks.useOperationInvoker();
+  const openObject = useOpenObject();
+  const space = ToolkitHooks.useActiveSpace();
+
+  const handleCancel = useCallback(async () => {
+    await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+  }, [invokePromise]);
+
+  const handleSave = useCallback(
+    async ({ reference }: ImportPullRequestForm) => {
+      if (!space) {
+        // The command is reachable from the root, which has no space of its own; saying so beats a
+        // button that appears to do nothing.
+        await invokePromise(LayoutOperation.AddToast, {
+          id: `${meta.profile.key}.import-pull-request`,
+          icon: 'ph--warning--regular',
+          title: ['import-pull-request-no-space.title', { ns: meta.profile.key }],
+        });
+        return;
+      }
+
+      const { data, error } = await invokePromise(
+        GitHubOperation.ImportPullRequest,
+        { reference: reference.trim() },
+        { spaceId: space.db.spaceId },
+      );
+
+      const pullRequest = data?.pullRequest.target;
+      if (error || !pullRequest) {
+        const status = GitHubApi.responseStatus(error) ?? readStatus(error);
+        // A minified build serialises the invoker's error as a bare, headerless stack, so the name and
+        // the HTTP status it carries are logged explicitly — without them a feedback bundle names the
+        // failure without saying what it was.
+        log.warn('pull request import failed', { reference, errorName: error?.name, status, err: error });
+        await invokePromise(LayoutOperation.AddToast, {
+          id: `${meta.profile.key}.import-pull-request`,
+          icon: 'ph--warning--regular',
+          title: [importFailureKey(error), { ns: meta.profile.key }],
+          // The status is what separates a reference the user should re-check from a connection they
+          // should repair, and it is otherwise visible only in the logs.
+          description: status ? `${reference} — HTTP ${status}` : reference,
+        });
+        return;
+      }
+
+      // Closed only on success: a failed import keeps the reference the user typed, which is the
+      // thing they would otherwise have to find again.
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      await openObject(pullRequest);
+    },
+    [invokePromise, openObject, space],
+  );
+
+  return (
+    <Dialog.Content>
+      {/* The form spans the dialog, so its actions sit in the footer while reading the form's context. */}
+      <Form.Root
+        autoFocus
+        schema={ImportPullRequestForm}
+        defaultValues={{ reference: '' }}
+        onSave={handleSave}
+        onCancel={handleCancel}
+      >
+        <Dialog.Header>
+          <Dialog.Title>{t('import-pull-request-dialog.title')}</Dialog.Title>
+          <Dialog.CloseTrigger asChild>
+            <SystemButton.Close />
+          </Dialog.CloseTrigger>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Form.Content>
+            <Form.Fields />
+          </Form.Content>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Form.Actions submitLabel={t('import-pull-request-submit.label')} />
+        </Dialog.Footer>
+      </Form.Root>
+    </Dialog.Content>
+  );
+};
+
+ImportPullRequestDialog.displayName = 'ImportPullRequestDialog';

package/src/containers/ImportPullRequestDialog/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './ImportPullRequestDialog.tsx';
+
+export { ImportPullRequestDialog as default } from './ImportPullRequestDialog.tsx';