@lemonriver/core 0.1.1 → 0.2.0

package/src/app/components/agent/agent-presence.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { type AgentActivity, setDockOpen, useAgentState } from '@/lib/agent/use-agent';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import { ProviderLogo } from './provider-logo';
+
+// `revision` changes whenever the deck module reloads, so each write the
+// agent lands sweeps a band of light across the canvas.
+export function AgentPresence({
+  activity,
+  revision,
+}: {
+  activity: AgentActivity;
+  revision: unknown;
+}) {
+  const [sweep, setSweep] = useState(0);
+  const first = useRef(true);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: revision is the trigger
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    setSweep((n) => n + 1);
+  }, [revision]);
+
+  return (
+    <>
+      <div aria-hidden className="pointer-events-none absolute inset-0 z-10 rounded-[inherit]">
+        <span className="agent-glow" />
+        <span className="agent-ring" />
+        {sweep > 0 && <span key={sweep} className="agent-sweep" />}
+      </div>
+      <AgentPresencePill activity={activity} />
+    </>
+  );
+}
+
+function AgentPresencePill({ activity }: { activity: AgentActivity }) {
+  const t = useLocale();
+  const { status } = useAgentState();
+  const name = status?.providers.find((p) => p.id === activity.provider)?.name ?? '';
+  const waiting = activity.phase === 'waiting';
+  const step =
+    activity.phase === 'tool'
+      ? [activity.title, activity.detail?.split(/[\\/]/).pop()].filter(Boolean).join(' ')
+      : waiting
+        ? t.agent.presenceWaiting
+        : t.agent.presenceThinking;
+
+  return (
+    <button
+      type="button"
+      onClick={() => setDockOpen(true)}
+      className="island-enter absolute top-2 left-1/2 z-20 flex h-7 max-w-[min(420px,calc(100%-1rem))] -translate-x-1/2 items-center gap-2 rounded-full border border-hairline bg-popover/90 px-2.5 text-[11.5px] shadow-floating backdrop-blur-md md:top-3"
+    >
+      <ProviderLogo provider={activity.provider} className="size-3.5 shrink-0" />
+      <span className="shrink-0 font-medium">
+        {format(t.agent.presenceEditing, { provider: name })}
+      </span>
+      <span
+        aria-hidden
+        className={cn(
+          'size-1 shrink-0 rounded-full',
+          waiting ? 'bg-brand' : 'animate-pulse bg-foreground/50 motion-reduce:animate-none',
+        )}
+      />
+      <span className={cn('min-w-0 truncate', waiting ? 'text-brand' : 'agent-shimmer')}>
+        {step}
+      </span>
+    </button>
+  );
+}

package/src/app/components/agent/composer.tsx

@@ -0,0 +1,120 @@
+import { ArrowUp, Square } from 'lucide-react';
+import type { ReactNode, RefObject } from 'react';
+import { Button } from '@/components/ui/button';
+import { useAutoGrow } from '@/lib/use-auto-grow';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export function Composer({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  running,
+  busy,
+  placeholder,
+  chips,
+  textareaRef,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  onSend: () => void;
+  onStop: () => void;
+  running: boolean;
+  busy?: boolean;
+  placeholder: string;
+  chips?: ReactNode;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+}) {
+  const t = useLocale();
+  const canSend = !running && !busy && value.trim().length > 0;
+  useAutoGrow(textareaRef, value, 160);
+
+  return (
+    <div className="relative z-10 shrink-0 bg-sidebar px-3 pt-1 pb-3">
+      <span
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 bottom-full h-5 bg-gradient-to-t from-sidebar to-transparent"
+      />
+      <div
+        className={cn(
+          'relative flex flex-col rounded-[8px] border border-border bg-background shadow-edge transition-colors duration-100',
+          'focus-within:border-foreground/40 focus-within:ring-2 focus-within:ring-ring/30',
+        )}
+      >
+        <textarea
+          ref={textareaRef}
+          value={value}
+          rows={1}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.nativeEvent.isComposing) return;
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              if (canSend) onSend();
+            }
+          }}
+          placeholder={placeholder}
+          className="w-full resize-none bg-transparent px-3 pt-2.5 text-[12.5px] leading-[1.5] outline-none placeholder:text-muted-foreground/60 disabled:opacity-60"
+        />
+        <div className="flex items-end justify-between gap-2 px-2 pb-2">
+          <div className="flex min-w-0 flex-wrap items-center gap-1">{chips}</div>
+          {running ? (
+            <Button
+              size="icon-sm"
+              variant="outline"
+              aria-label={t.agent.stop}
+              title={t.agent.stop}
+              onClick={onStop}
+            >
+              <Square className="size-3 fill-current" />
+            </Button>
+          ) : (
+            <Button
+              size="icon-sm"
+              aria-label={t.agent.send}
+              title={t.agent.send}
+              disabled={!canSend}
+              onClick={onSend}
+            >
+              <ArrowUp className="size-3.5" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ContextChip({
+  children,
+  tone = 'default',
+  onClick,
+  title,
+}: {
+  children: ReactNode;
+  tone?: 'default' | 'brand';
+  onClick?: () => void;
+  title?: string;
+}) {
+  const className = cn(
+    'inline-flex h-6 max-w-[180px] items-center gap-1 rounded-[5px] border px-1.5 text-[10.5px] leading-none',
+    tone === 'brand'
+      ? 'border-brand/40 bg-brand/10 text-brand'
+      : 'border-hairline bg-muted/50 text-muted-foreground',
+    onClick &&
+      'cursor-pointer outline-none hover:border-foreground/30 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30',
+  );
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} title={title} className={className}>
+        <span className="truncate">{children}</span>
+      </button>
+    );
+  }
+  return (
+    <span title={title} className={className}>
+      <span className="truncate">{children}</span>
+    </span>
+  );
+}

package/src/app/components/agent/connect-view.tsx

@@ -0,0 +1,184 @@
+import { Check, Loader2, RotateCw, Terminal } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import {
+  installProvider,
+  refreshStatus,
+  useAgentState,
+  useAgentStatus,
+} from '@/lib/agent/use-agent';
+import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+import type { AgentProviderId, AgentProviderStatus } from '../../../agent/types';
+import { ProviderLogo } from './provider-logo';
+
+const CLI_INSTALL: Record<AgentProviderId, string> = {
+  claude: 'npm install -g @anthropic-ai/claude-code',
+  codex: 'npm install -g @openai/codex',
+};
+
+function needsCli(p: AgentProviderStatus): boolean {
+  return !p.cliFound && !p.ready;
+}
+
+export function ConnectView() {
+  const t = useLocale();
+  const { status, loading, enabled } = useAgentStatus();
+  const { installing, connectErrors } = useAgentState();
+  const [checking, setChecking] = useState(false);
+  const providers = status?.providers ?? [];
+  const needCli = providers.length > 0 && providers.every(needsCli);
+  const anyMissing = providers.some(needsCli);
+
+  const checkAgain = async () => {
+    setChecking(true);
+    try {
+      await refreshStatus();
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 px-4 py-5">
+      <div>
+        <span className="eyebrow">{t.agent.title}</span>
+        <h2 className="mt-1.5 font-heading text-[15px] font-semibold tracking-tight">
+          {needCli ? t.agent.needCliTitle : t.agent.connectTitle}
+        </h2>
+        <p className="mt-1.5 text-[12.5px] leading-relaxed text-muted-foreground">
+          {needCli ? t.agent.needCliDescription : t.agent.connectDescription}
+        </p>
+      </div>
+
+      {loading ? (
+        <p className="text-[12px] text-muted-foreground">{t.agent.statusLoading}…</p>
+      ) : !enabled ? (
+        <p className="text-[12px] text-muted-foreground">{t.agent.disabled}</p>
+      ) : (
+        <div className="flex flex-col gap-2.5">
+          {providers.map((provider) => (
+            <ProviderCard
+              key={provider.id}
+              provider={provider}
+              packageManager={status?.packageManager ?? 'npm'}
+              installing={installing === provider.id}
+              busy={installing !== null}
+              error={connectErrors[provider.id]}
+              onConnect={async () => {
+                try {
+                  await installProvider(provider.id);
+                  toast.success(format(t.agent.toastConnected, { name: provider.name }));
+                } catch (err) {
+                  toast.error(format(t.agent.toastConnectFailed, { pkg: provider.sdkPackage }), {
+                    description: err instanceof Error ? err.message : undefined,
+                  });
+                }
+              }}
+            />
+          ))}
+          {anyMissing && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="self-start"
+              disabled={checking}
+              onClick={checkAgain}
+            >
+              <RotateCw
+                className={cn('size-3.5', checking && 'animate-spin motion-reduce:animate-none')}
+                aria-hidden
+              />
+              {t.agent.checkAgain}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProviderCard({
+  provider,
+  packageManager,
+  installing,
+  busy,
+  error,
+  onConnect,
+}: {
+  provider: AgentProviderStatus;
+  packageManager: string;
+  installing: boolean;
+  busy: boolean;
+  error: string | undefined;
+  onConnect: () => void;
+}) {
+  const t = useLocale();
+  const missing = needsCli(provider);
+  const cliLabel = provider.cliFound
+    ? provider.cliVersion
+      ? format(t.agent.cliFound, { version: provider.cliVersion })
+      : t.agent.cliFoundNoVersion
+    : t.agent.cliMissing;
+
+  return (
+    <div className="rounded-[8px] border border-border bg-card p-3 shadow-edge">
+      <div className="flex items-center justify-between gap-2">
+        <div className="min-w-0">
+          <h3 className="flex items-center gap-1.5 font-heading text-[13px] font-semibold tracking-tight">
+            <ProviderLogo provider={provider.id} className="size-3.5 shrink-0" />
+            {provider.name}
+          </h3>
+          <p
+            className={cn(
+              'mt-0.5 flex items-center gap-1 text-[11px]',
+              provider.cliFound ? 'text-muted-foreground' : 'text-amber-600 dark:text-amber-400',
+            )}
+          >
+            <Terminal className="size-3" aria-hidden />
+            {cliLabel}
+          </p>
+        </div>
+        {provider.ready ? (
+          <span className="inline-flex items-center gap-1 rounded-[5px] bg-emerald-500/10 px-2 py-1 text-[11px] font-medium text-emerald-700 dark:text-emerald-400">
+            <Check className="size-3" aria-hidden />
+            {t.agent.connected}
+          </span>
+        ) : installing ? (
+          <span className="inline-flex items-center gap-1.5 px-1 text-[11.5px] text-muted-foreground">
+            <Loader2 className="size-3 animate-spin motion-reduce:animate-none" aria-hidden />
+            {t.agent.connecting}
+          </span>
+        ) : missing ? null : (
+          <Button
+            size="sm"
+            variant={error ? 'outline' : 'default'}
+            disabled={busy}
+            onClick={onConnect}
+          >
+            {error ? t.agent.retry : t.agent.connect}
+          </Button>
+        )}
+      </div>
+      {missing ? (
+        <div className="mt-2.5 flex flex-col gap-1.5">
+          <p className="text-[11px] leading-relaxed text-muted-foreground">
+            {format(t.agent.cliHint, { name: provider.name })}
+          </p>
+          <code className="block overflow-x-auto rounded-[5px] bg-muted px-2 py-1.5 font-mono text-[11px] whitespace-nowrap select-all">
+            {CLI_INSTALL[provider.id]}
+          </code>
+        </div>
+      ) : error && !installing ? (
+        <p className="mt-2 line-clamp-3 text-[11px] leading-relaxed text-destructive">{error}</p>
+      ) : (
+        <p className="mt-2 text-[11px] leading-relaxed text-muted-foreground">
+          {provider.ready
+            ? `${provider.sdkPackage} v${provider.sdkVersion}`
+            : format(t.agent.connectInstallHint, { pkg: provider.sdkPackage, pm: packageManager })}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/app/components/agent/history-view.tsx

@@ -0,0 +1,135 @@
+import { Check, MessageSquare, Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
+import { useLocale } from '@/lib/use-locale';
+import { useSlideTitles } from '@/lib/use-slide-titles';
+import { cn } from '@/lib/utils';
+import type { AgentSessionSummary } from '../../../agent/types';
+import { ProviderLogo } from './provider-logo';
+
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ['year', 365 * 24 * 3600],
+  ['month', 30 * 24 * 3600],
+  ['week', 7 * 24 * 3600],
+  ['day', 24 * 3600],
+  ['hour', 3600],
+  ['minute', 60],
+];
+
+function relativeTime(iso: string, locale: string, now: number): string {
+  const seconds = (Date.parse(iso) - now) / 1000;
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'short' });
+  for (const [unit, size] of UNITS) {
+    if (Math.abs(seconds) >= size) return rtf.format(Math.round(seconds / size), unit);
+  }
+  return rtf.format(0, 'second');
+}
+
+export function HistoryView({
+  sessions,
+  activeId,
+  slideId,
+  onSelect,
+  onDelete,
+}: {
+  sessions: AgentSessionSummary[];
+  activeId: string | null;
+  slideId: string | null;
+  onSelect: (session: AgentSessionSummary) => void;
+  onDelete: (id: string) => void;
+}) {
+  const t = useLocale();
+  const groups = useMemo(() => {
+    if (!slideId) return [{ id: 'all', label: null, items: sessions }];
+    return [
+      {
+        id: 'here',
+        label: t.agent.historyThisDeck,
+        items: sessions.filter((s) => s.slideId === slideId),
+      },
+      {
+        id: 'other',
+        label: t.agent.historyOtherDecks,
+        items: sessions.filter((s) => s.slideId !== slideId),
+      },
+    ].filter((g) => g.items.length > 0);
+  }, [sessions, slideId, t]);
+  const showDeck = groups.some((g) => g.id !== 'here');
+  const titles = useSlideTitles(showDeck && sessions.some((s) => s.slideId));
+  const now = Date.now();
+
+  if (sessions.length === 0) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-6 text-center">
+        <MessageSquare className="size-5 text-muted-foreground/60" strokeWidth={1.5} aria-hidden />
+        <p className="text-[12.5px] font-medium">{t.agent.noSessions}</p>
+        <p className="text-[11.5px] leading-relaxed text-muted-foreground">
+          {t.agent.historyEmptyHint}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div data-agent-history className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
+      {groups.map((group) => (
+        <section key={group.id} className="mb-2 last:mb-0">
+          {group.label && <h3 className="eyebrow px-2 pt-1.5 pb-1">{group.label}</h3>}
+          <ul className="flex flex-col gap-px">
+            {group.items.map((s) => {
+              const active = s.id === activeId;
+              const running = s.status === 'running';
+              const deck =
+                group.id !== 'here' && s.slideId ? (titles[s.slideId] ?? s.slideId) : null;
+              return (
+                <li key={s.id} className="group/session relative">
+                  <button
+                    type="button"
+                    onClick={() => onSelect(s)}
+                    aria-current={active ? 'true' : undefined}
+                    className={cn(
+                      'flex w-full flex-col gap-0.5 rounded-[6px] py-2 pr-9 pl-2.5 text-left outline-none transition-colors duration-100 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30',
+                      active && 'bg-muted',
+                    )}
+                  >
+                    <span className="flex min-w-0 items-center gap-1.5 text-[12.5px] font-medium">
+                      <span className="min-w-0 truncate">{s.title}</span>
+                      {active && (
+                        <Check className="size-3 shrink-0 text-muted-foreground" aria-hidden />
+                      )}
+                    </span>
+                    <span className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+                      <ProviderLogo provider={s.provider} className="size-3 shrink-0" />
+                      {running ? (
+                        <span className="agent-shimmer shrink-0">{t.agent.sessionRunning}</span>
+                      ) : (
+                        <span className="shrink-0 tabular-nums">
+                          {relativeTime(s.updatedAt, t.id, now)}
+                        </span>
+                      )}
+                      {deck && (
+                        <>
+                          <span aria-hidden>·</span>
+                          <span className="min-w-0 truncate">{deck}</span>
+                        </>
+                      )}
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    aria-label={t.agent.deleteSession}
+                    title={t.agent.deleteSession}
+                    disabled={running}
+                    onClick={() => onDelete(s.id)}
+                    className="absolute top-1/2 right-1.5 grid size-6 -translate-y-1/2 place-items-center rounded-[5px] text-muted-foreground opacity-0 outline-none transition-opacity duration-100 hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/30 disabled:hidden group-hover/session:opacity-100"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/app/components/agent/provider-logo.tsx

@@ -0,0 +1,34 @@
+import type { SVGProps } from 'react';
+import type { AgentProviderId } from '../../../agent/types';
+
+// Marks from svgl.app (claude-ai-icon, openai).
+function ClaudeLogo(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 256 257" aria-hidden="true" {...props}>
+      <path
+        fill="#D97757"
+        d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
+      />
+    </svg>
+  );
+}
+
+function OpenAILogo(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="100 100 411 411" fill="none" aria-hidden="true" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="currentColor"
+        d="M252.794 108.802C289.191 99.0484 326.265 110.305 351.148 135.135C385.113 126.072 422.85 134.862 449.492 161.505C476.136 188.149 484.925 225.888 475.862 259.85V259.854C500.696 284.735 511.95 321.81 502.198 358.207C492.447 394.602 464.161 421.084 430.215 430.217C421.083 464.162 394.603 492.448 358.206 502.199C321.812 511.951 284.734 500.693 259.852 475.864C225.887 484.927 188.15 476.137 161.507 449.495C134.864 422.851 126.073 385.111 135.136 351.149C110.304 326.266 99.0496 289.192 108.801 252.795C118.552 216.4 146.84 189.918 180.784 180.785C189.917 146.841 216.396 118.553 252.794 108.802ZM374.292 407.145C374.292 411.271 372.092 415.086 368.517 417.148L283.723 466.102C302.487 480.585 327.555 486.459 352.217 479.852C386.997 470.532 410.068 439.312 410.555 405.006V317.717C410.555 315.08 409.125 312.621 406.843 311.303L374.292 292.509V407.145ZM251.868 415.897C248.296 417.959 243.893 417.959 240.317 415.897L155.526 366.942C152.366 390.436 159.811 415.08 177.866 433.136H177.863C203.325 458.594 241.896 462.962 271.85 446.232L347.449 402.586C349.735 401.268 351.148 398.8 351.148 396.163V358.579L251.868 415.897ZM368.602 220.628C366.319 219.309 363.474 219.318 361.191 220.637L328.641 239.431L427.921 296.749C431.496 298.811 433.697 302.627 433.697 306.752V404.661C455.622 395.654 473.244 376.881 479.851 352.218C489.169 317.442 473.668 281.85 444.201 264.274L368.602 220.628ZM177.303 206.34C155.377 215.348 137.756 234.122 131.148 258.783C121.832 293.561 137.331 329.153 166.799 346.727L242.398 390.373C244.68 391.692 247.525 391.684 249.807 390.366L282.357 371.572L183.078 314.253C179.504 312.189 177.303 308.375 177.303 304.251V206.34ZM259.849 279.145V331.858L305.5 358.213L351.15 331.858V279.145L305.5 252.789L259.849 279.145ZM327.276 144.9C308.512 130.418 283.445 124.543 258.782 131.15C224.002 140.471 200.931 171.691 200.445 205.995V293.286C200.445 295.923 201.875 298.381 204.158 299.7L236.707 318.493V203.856C236.707 199.731 238.909 195.916 242.483 193.853L327.276 144.9ZM433.137 177.867C407.675 152.407 369.103 148.038 339.149 164.769L263.55 208.415C261.265 209.734 259.852 212.202 259.852 214.838V252.423L359.132 195.105C362.703 193.041 367.108 193.041 370.682 195.105L455.473 244.06C458.635 220.567 451.189 195.922 433.135 177.867H433.137Z"
+      />
+    </svg>
+  );
+}
+
+export function ProviderLogo({
+  provider,
+  ...props
+}: { provider: AgentProviderId } & SVGProps<SVGSVGElement>) {
+  return provider === 'claude' ? <ClaudeLogo {...props} /> : <OpenAILogo {...props} />;
+}