@plannotator/ui 0.22.0

package/components/PlanAIAnnouncementDialog.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import type { Origin } from '@plannotator/core/agents';
+import { AGENT_CONFIG, getAgentAIProviderTypes, getAgentName } from '@plannotator/core/agents';
+import { SparklesIcon } from './SparklesIcon';
+import { getProviderMeta } from './ProviderIcons';
+
+interface PlanAIAnnouncementProvider {
+  id: string;
+  name: string;
+}
+
+interface PlanAIAnnouncementDialogProps {
+  isOpen: boolean;
+  origin?: Origin | null;
+  providerName?: string | null;
+  /** Actually-detected providers (installed + authenticated). Cards matching one of these are selectable. */
+  providers?: PlanAIAnnouncementProvider[];
+  onSelectProvider?: (providerId: string) => void;
+  onOpenAI: () => void;
+  onDismiss: () => void;
+}
+
+const SUPPORTED_AI_PROVIDER_TYPES = Array.from(
+  new Set(
+    (Object.keys(AGENT_CONFIG) as Origin[])
+      .flatMap(agentOrigin => getAgentAIProviderTypes(agentOrigin))
+  )
+);
+
+const UNSUPPORTED_AI_ORIGINS = (Object.keys(AGENT_CONFIG) as Origin[])
+  .filter(agentOrigin => getAgentAIProviderTypes(agentOrigin).length === 0);
+
+export const PlanAIAnnouncementDialog: React.FC<PlanAIAnnouncementDialogProps> = ({
+  isOpen,
+  origin,
+  providerName,
+  providers = [],
+  onSelectProvider,
+  onOpenAI,
+  onDismiss,
+}) => {
+  if (!isOpen) return null;
+
+  const agentLabel = getAgentName(origin ?? undefined);
+  const providerLabel = providerName ? getProviderMeta(providerName).label : null;
+  const unsupportedLabels = UNSUPPORTED_AI_ORIGINS.map(getAgentName).join(', ');
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 backdrop-blur-sm p-4">
+      <div className="bg-card border border-border rounded-xl w-full max-w-xl shadow-2xl">
+        {/* Header */}
+        <div className="p-5 border-b border-border">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="p-1.5 rounded-lg bg-primary/15">
+              <SparklesIcon className="w-5 h-5 text-primary" />
+            </div>
+            <h3 className="font-semibold text-base">New: Ask AI for annotated documents</h3>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Chat with plans and annotated documents directly inside Plannotator.
+          </p>
+          {providerLabel && (
+            <p className="text-xs text-muted-foreground/70 mt-1">
+              Plannotator selected {providerLabel} for {agentLabel}.
+            </p>
+          )}
+        </div>
+
+        {/* Details */}
+        <div className="p-4 space-y-4">
+          {SUPPORTED_AI_PROVIDER_TYPES.length > 0 && (
+            <div>
+              <div className="text-xs text-muted-foreground mb-2">Supported providers</div>
+              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+                {SUPPORTED_AI_PROVIDER_TYPES.map(providerType => {
+                  const meta = getProviderMeta(providerType);
+                  const Icon = meta.icon;
+                  const isSelected = providerType === providerName;
+                  // A card is selectable only if the provider is actually detected on this machine.
+                  const detected = providers.find(p => p.name === providerType) ?? null;
+                  const isSelectable = Boolean(detected && onSelectProvider);
+
+                  const inner = (
+                    <>
+                      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-background/70 text-muted-foreground">
+                        <Icon className="h-[18px] w-[18px]" />
+                      </div>
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium">{meta.label}</div>
+                        {isSelected ? (
+                          <div className="text-[10px] uppercase tracking-wide text-primary">selected</div>
+                        ) : !detected ? (
+                          <div className="text-[10px] text-muted-foreground/60">not installed</div>
+                        ) : null}
+                      </div>
+                    </>
+                  );
+
+                  if (!isSelectable) {
+                    return (
+                      <div
+                        key={providerType}
+                        className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 ${
+                          isSelected
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border bg-muted/35 opacity-60'
+                        }`}
+                      >
+                        {inner}
+                      </div>
+                    );
+                  }
+
+                  return (
+                    <button
+                      key={providerType}
+                      type="button"
+                      onClick={() => onSelectProvider?.(detected!.id)}
+                      aria-pressed={isSelected}
+                      className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 text-left transition-colors ${
+                        isSelected
+                          ? 'border-primary bg-primary/5'
+                          : 'border-border bg-muted/35 hover:border-muted-foreground/30 hover:bg-muted/60'
+                      }`}
+                    >
+                      {inner}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="grid gap-2 sm:grid-cols-2">
+            <div className="flex items-start gap-3 p-3 rounded-lg border border-transparent bg-muted/50">
+              <SparklesIcon className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
+              <div className="flex-1">
+                <div className="text-sm font-medium">Ask from comments</div>
+                <div className="text-xs text-muted-foreground">
+                  Use Ask AI from a comment popover to chat about selected text.
+                </div>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-3 rounded-lg border border-transparent bg-muted/50">
+              <SparklesIcon className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
+              <div className="flex-1">
+                <div className="text-sm font-medium">Open the side chat</div>
+                <div className="text-xs text-muted-foreground">
+                  Use the AI button in the header for broader document questions.
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {unsupportedLabels && (
+            <p className="text-[11px] leading-relaxed text-muted-foreground/70">
+              Not supported for Ask AI yet: {unsupportedLabels}.
+            </p>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border flex justify-between items-center gap-3">
+          <p className="text-xs text-muted-foreground">
+            This notice only appears once.
+          </p>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onDismiss}
+              className="px-4 py-2 border border-border rounded-lg text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+            >
+              Dismiss
+            </button>
+            <button
+              onClick={onOpenAI}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
+            >
+              Open AI Chat
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};

package/components/PlanHeaderMenu.tsx

@@ -0,0 +1,299 @@
+import React from 'react';
+import {
+  ActionMenu,
+  ActionMenuDivider,
+  ActionMenuItem,
+  ActionMenuSectionLabel,
+} from './ActionMenu';
+import { useTheme } from './ThemeProvider';
+import { SunIcon, MoonIcon, SystemIcon } from './icons/themeIcons';
+import { ReviewAgentsIcon } from './ReviewAgentsIcon';
+import { MenuVersionSection } from './MenuVersionSection';
+import { TextShimmer } from './TextShimmer';
+import type { UpdateInfo } from '../hooks/useUpdateCheck';
+import type { Origin } from '@plannotator/core/agents';
+
+interface PlanHeaderMenuProps {
+  appVersion: string;
+  updateInfo?: UpdateInfo | null;
+  origin?: Origin | null;
+  isWSL?: boolean;
+  onOpenSettings: () => void;
+  onOpenExport: () => void;
+  onCopyAgentInstructions: () => void;
+  onDownloadAnnotations: () => void;
+  onPrint: () => void;
+  onCopyShareLink: () => void;
+  onOpenImport: () => void;
+  onSaveToObsidian: () => void;
+  onSaveToBear: () => void;
+  onSaveToOctarine: () => void;
+  sharingEnabled: boolean;
+  isApiMode: boolean;
+  agentInstructionsEnabled: boolean;
+  obsidianConfigured: boolean;
+  bearConfigured: boolean;
+  octarineConfigured: boolean;
+}
+
+export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
+  appVersion,
+  updateInfo,
+  origin,
+  isWSL = false,
+  onOpenSettings,
+  onOpenExport,
+  onCopyAgentInstructions,
+  onDownloadAnnotations,
+  onPrint,
+  onCopyShareLink,
+  onOpenImport,
+  onSaveToObsidian,
+  onSaveToBear,
+  onSaveToOctarine,
+  sharingEnabled,
+  isApiMode,
+  agentInstructionsEnabled,
+  obsidianConfigured,
+  bearConfigured,
+  octarineConfigured,
+}) => {
+  const { theme, setTheme } = useTheme();
+
+  const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
+
+  const anyNotesAppConfigured =
+    isApiMode && (obsidianConfigured || bearConfigured || octarineConfigured);
+
+  return (
+    <ActionMenu
+      renderTrigger={({ isOpen, toggleMenu }) => (
+        <button
+          onClick={() => {
+            if (!isOpen && showUpdateDot) updateInfo?.dismiss();
+            toggleMenu();
+          }}
+          className={`relative flex items-center gap-1.5 p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-colors ${
+            isOpen
+              ? 'bg-muted text-foreground'
+              : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+          }`}
+          title="Options"
+          aria-label="Options"
+          aria-expanded={isOpen}
+        >
+          {isOpen ? <CloseIcon /> : <MenuIcon />}
+          {showUpdateDot ? (
+            <TextShimmer className="hidden md:inline text-xs font-medium" duration={2.5} spread={1.5}>
+              Options
+            </TextShimmer>
+          ) : (
+            <span className="hidden md:inline">Options</span>
+          )}
+          {showUpdateDot && (
+            <span className="absolute top-0.5 right-0.5 md:-top-0.5 md:-right-0.5 w-2 h-2 rounded-full bg-primary ring-2 ring-background" />
+          )}
+        </button>
+      )}
+    >
+      {({ closeMenu }) => (
+        <>
+          <div className="px-3 py-2 space-y-1.5">
+            <ActionMenuSectionLabel>Theme</ActionMenuSectionLabel>
+            <div className="flex items-center gap-1 rounded-lg bg-muted/50 p-0.5">
+              {(['light', 'dark', 'system'] as const).map((mode) => (
+                <button
+                  key={mode}
+                  onClick={() => {
+                    closeMenu();
+                    setTheme(mode);
+                  }}
+                  className={`flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium transition-colors ${
+                    theme === mode
+                      ? 'bg-background text-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  {mode === 'light' ? <SunIcon /> : mode === 'dark' ? <MoonIcon /> : <SystemIcon />}
+                  <span className="capitalize">{mode}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <ActionMenuDivider />
+
+          <ActionMenuItem
+            onClick={() => {
+              closeMenu();
+              onOpenSettings();
+            }}
+            icon={<SettingsIcon />}
+            label="Settings"
+          />
+          <ActionMenuItem
+            onClick={() => {
+              closeMenu();
+              onOpenExport();
+            }}
+            icon={<ExportIcon />}
+            label="Export"
+          />
+          {agentInstructionsEnabled && (
+            <ActionMenuItem
+              onClick={() => {
+                closeMenu();
+                onCopyAgentInstructions();
+              }}
+              icon={<ReviewAgentsIcon />}
+              label="Agent Instructions"
+              subtitle="Copy agent instructions for external annotations"
+            />
+          )}
+
+          <ActionMenuDivider />
+
+          <ActionMenuItem
+            onClick={() => {
+              closeMenu();
+              onDownloadAnnotations();
+            }}
+            icon={<DownloadIcon />}
+            label="Download Annotations"
+          />
+          <ActionMenuItem
+            onClick={() => {
+              closeMenu();
+              onPrint();
+            }}
+            icon={<PrintIcon />}
+            label="Print / Save as PDF"
+            subtitle="Choose 'Save as PDF' in the print dialog"
+          />
+          {sharingEnabled && (
+            <ActionMenuItem
+              onClick={() => {
+                closeMenu();
+                onCopyShareLink();
+              }}
+              icon={<LinkIcon />}
+              label="Copy Share Link"
+            />
+          )}
+          {sharingEnabled && (
+            <ActionMenuItem
+              onClick={() => {
+                closeMenu();
+                onOpenImport();
+              }}
+              icon={<ImportIcon />}
+              label="Import Review"
+            />
+          )}
+
+          {anyNotesAppConfigured && (
+            <>
+              <ActionMenuDivider />
+              {obsidianConfigured && (
+                <ActionMenuItem
+                  onClick={() => {
+                    closeMenu();
+                    onSaveToObsidian();
+                  }}
+                  icon={<NoteIcon />}
+                  label="Save to Obsidian"
+                />
+              )}
+              {bearConfigured && (
+                <ActionMenuItem
+                  onClick={() => {
+                    closeMenu();
+                    onSaveToBear();
+                  }}
+                  icon={<NoteIcon />}
+                  label="Save to Bear"
+                />
+              )}
+              {octarineConfigured && (
+                <ActionMenuItem
+                  onClick={() => {
+                    closeMenu();
+                    onSaveToOctarine();
+                  }}
+                  icon={<NoteIcon />}
+                  label="Save to Octarine"
+                />
+              )}
+            </>
+          )}
+
+          <ActionMenuDivider />
+
+          <MenuVersionSection
+            appVersion={appVersion}
+            updateInfo={updateInfo}
+            origin={origin}
+            isWSL={isWSL}
+            closeMenu={closeMenu}
+          />
+        </>
+      )}
+    </ActionMenu>
+  );
+};
+
+const MenuIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </svg>
+);
+
+const ExportIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+  </svg>
+);
+
+const DownloadIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+  </svg>
+);
+
+const PrintIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+  </svg>
+);
+
+const LinkIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+  </svg>
+);
+
+const ImportIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3" />
+  </svg>
+);
+
+const NoteIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+  </svg>
+);
+

package/components/PopoutDialog.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+
+const ANNOTATION_SELECTORS = [
+  '.annotation-toolbar',
+  '[data-comment-popover="true"]',
+  '[data-floating-picker="true"]',
+];
+
+interface PopoutDialogProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  container?: HTMLElement | null;
+  className?: string;
+  children: React.ReactNode;
+  /** Extra data attributes to spread onto Dialog.Content */
+  dataAttributes?: Record<string, string>;
+}
+
+export const PopoutDialog: React.FC<PopoutDialogProps> = ({
+  open,
+  onClose,
+  title,
+  container,
+  className,
+  children,
+  dataAttributes,
+}) => {
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      const target = e.target as Element;
+      if (ANNOTATION_SELECTORS.some((sel) => target.closest(sel))) return;
+      onClose();
+    },
+    [onClose],
+  );
+
+  const handleInteractOutside = useCallback(
+    (e: Event) => {
+      const target = e.target as Element | null;
+      if (!target) return;
+      if (ANNOTATION_SELECTORS.some((sel) => target.closest(sel))) {
+        e.preventDefault();
+      }
+    },
+    [],
+  );
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={(next) => { if (!next) onClose(); }}
+      modal={false}
+    >
+      <Dialog.Portal container={container ?? undefined}>
+        {/* Radix ignores Dialog.Overlay when modal={false}, so we use a plain
+            div for the backdrop. This gives us the dark scrim + blur while
+            keeping annotation toolbars (which portal outside the dialog)
+            interactive. */}
+        <div
+          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px]"
+          onClick={handleBackdropClick}
+          aria-hidden="true"
+        />
+        <Dialog.Content
+          className={`fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-background border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden ${className ?? 'w-[calc(100vw-4rem)] max-w-[min(calc(100vw-4rem),1500px)] max-h-[calc(100vh-4rem)]'}`}
+          data-popout="true"
+          aria-describedby={undefined}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={handleInteractOutside}
+          {...dataAttributes}
+        >
+          <Dialog.Title className="sr-only">{title}</Dialog.Title>
+          <Dialog.Close asChild>
+            <button
+              className="absolute top-3 right-3 z-20 p-1.5 rounded-md text-muted-foreground/70 hover:bg-muted hover:text-foreground transition-colors"
+              aria-label="Close"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </Dialog.Close>
+
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/components/Popover.tsx

@@ -0,0 +1,27 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import React from 'react';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 6, children, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={`bg-popover text-popover-foreground border border-border/50 rounded-lg shadow-xl z-[100] outline-none popover-enter ${className ?? ''}`}
+      {...props}
+    >
+      {children}
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+));
+
+PopoverContent.displayName = 'PopoverContent';
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/components/ProviderIcons.tsx

@@ -0,0 +1,51 @@
+/// <reference path="../globals.d.ts" />
+import type React from 'react';
+import codexPng from '../assets/icon-codex.png';
+
+/** Claude icon — extracted from apps/marketing/public/assets/icon-claude.svg */
+export const ClaudeIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={className}>
+    <path d="m6.283 21.28 6.293-3.531.106-.306-.106-.171h-.307l-1.051-.065-3.596-.097-3.118-.13-3.021-.162-.761-.161-.712-.94.073-.469.639-.429.916.08 2.023.138 3.037.209 2.203.13 3.263.339h.518l.073-.21-.177-.129-.138-.13-3.142-2.129-3.401-2.25-1.782-1.296-.963-.656-.486-.616-.21-1.343.875-.963 1.175.08.3.08 1.19.915 2.542 1.967 3.319 2.445.486.404.194-.138.024-.097-.218-.365-1.806-3.263-1.926-3.32-.857-1.375-.227-.825c-.08-.339-.138-.624-.138-.972L8.384.177 8.935 0l1.328.177.56.486.824 1.887 1.337 2.972 2.073 4.04.607 1.199.324 1.11.121.339h.21v-.194l.17-2.276.315-2.795.307-3.596.106-1.012.501-1.214.995-.657.778.372.639.916-.088.591-.381 2.471-.745 3.87-.485 2.591h.282l.324-.324 1.311-1.74 2.203-2.754.972-1.093 1.133-1.207.728-.574h1.376l1.013 1.505-.454 1.555-1.416 1.797-1.175 1.522-1.685 2.268-1.051 1.814.097.144.25-.023 3.805-.81 2.056-.372 2.454-.421 1.11.518.12.527-.436 1.078-2.624.648-3.077.615-4.582 1.084-.057.041.065.08 2.065.195.883.047h2.162l4.025.3 1.052.696.63.851-.106.647-1.619.825-2.186-.518-5.1-1.214-1.75-.436h-.242v.145l1.458 1.425 2.671 2.412 3.346 3.11.17.769-.43.607-.453-.065-2.939-2.211-1.134-.996-2.568-2.162h-.17v.227l.591.866 3.125 4.697.162 1.441-.226.468-.81.283-.89-.162-1.829-2.568-1.888-2.891-1.522-2.592-.186.106-.898 9.677-.421.495-.972.371-.81-.615-.43-.996.43-1.967.518-2.568.422-2.041.38-2.535.226-.842-.015-.056-.185.023-1.912 2.624-2.906 3.928-2.3 2.462-.551.218-.954-.494.088-.883.533-.787 3.184-4.049 1.919-2.509 1.24-1.449-.009-.21h-.073l-8.455 5.49-1.505.194-.648-.607.08-.995.307-.324 2.542-1.749-.009.008z" fill="#d97757" />
+  </svg>
+);
+
+/** Codex icon — PNG from apps/marketing/public/assets/icon-codex.png */
+export const CodexIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <img src={codexPng} alt="" className={`${className} rounded-sm`} />
+);
+
+/** Pi icon — extracted from apps/marketing/public/assets/icon-pi.svg */
+export const PiIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" className={className}>
+    <path fill="currentColor" fillRule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/>
+    <path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/>
+  </svg>
+);
+
+/** OpenCode icon — extracted from apps/marketing/public/assets/icon-opencode-dark.svg */
+export const OpenCodeIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" className={className}>
+    <path d="M3 32V0h26v32zM22 7H10v18h12z" fill="currentColor"/>
+    <path d="M10 13h12v12H10z" fill="currentColor" opacity={0.4}/>
+  </svg>
+);
+
+/** Generic fallback icon for unknown providers */
+const GenericProviderIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5m-4.75-11.396c.251.023.501.05.75.082M12 21a8.966 8.966 0 005.982-2.275M12 21a8.966 8.966 0 01-5.982-2.275M12 21V14.5" />
+  </svg>
+);
+
+/** Provider metadata: maps provider type name to display label and icon component. */
+export const PROVIDER_META: Record<string, { label: string; icon: React.FC<{ className?: string }> }> = {
+  'claude-agent-sdk': { label: 'Claude', icon: ClaudeIcon },
+  'codex-sdk': { label: 'Codex', icon: CodexIcon },
+  'pi-sdk': { label: 'Pi', icon: PiIcon },
+  'opencode-sdk': { label: 'OpenCode', icon: OpenCodeIcon },
+};
+
+/** Get provider metadata, with fallback for unknown providers. */
+export function getProviderMeta(providerName: string): { label: string; icon: React.FC<{ className?: string }> } {
+  return PROVIDER_META[providerName] ?? { label: providerName, icon: GenericProviderIcon };
+}

package/components/PullRequestIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const PullRequestIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="0 0 768 1024"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M704 722s0-306 0-402-96-192-192-192c-64 0-64 0-64 0v-128l-192 192 192 192v-128s32 0 64 0 64 32 64 64 0 402 0 402c-38 22-64 63-64 110 0 71 57 128 128 128s128-57 128-128c0-47-26-88-64-110z m-64 174c-35 0-64-29-64-64s29-64 64-64 64 29 64 64-29 64-64 64z m-512-832c-71 0-128 57-128 128 0 47 26 88 64 110v419c-38 22-64 63-64 110 0 71 57 128 128 128s128-57 128-128c0-47-26-88-64-110v-419c38-22 64-63 64-110 0-71-57-128-128-128z m0 832c-35 0-64-29-64-64s29-64 64-64 64 29 64 64-29 64-64 64z m0-640c-35 0-64-29-64-64s29-64 64-64 64 29 64 64-29 64-64 64z" />
+  </svg>
+);