paseo-prompt-kit 0.5.2

package/client/settings/sections/engine-section.tsx

@@ -0,0 +1,101 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+import { SettingsCard, SettingsSection } from "@getpaseo/plugin/client/ui";
+import { listLanguages } from "../../../shared/language-registry/registry.js";
+import { SOURCE_LANGUAGE } from "../../../shared/language-registry/schema.js";
+import type { PromptKitSettings } from "../../../shared/settings.js";
+import type { SettingsPatch } from "../draft.js";
+import { SplitSelect } from "../ui/split-select.js";
+
+export interface EngineSectionProps {
+  theme: PluginTheme;
+  compact: boolean;
+  values: PromptKitSettings;
+  disabled: boolean;
+  patch(update: SettingsPatch): void;
+}
+
+const TRANSPORT_OPTIONS = [
+  { label: "Provider CLI", value: "cli" },
+  { label: "Direct API", value: "api" },
+] as const;
+
+const MODEL_OPTIONS = [
+  { label: "Current agent model", value: "current" },
+  { label: "Dedicated model", value: "dedicated" },
+] as const;
+
+const TRANSPORT_HINT = {
+  cli: "The provider's own CLI runs the rewrite headlessly in an empty scratch directory. Needs that CLI on the daemon's PATH.",
+  api: "One HTTP request to an endpoint you configure below. Fastest, and works for providers with no CLI. Needs a key.",
+} as const;
+
+const MODEL_HINT = {
+  current: "The model the Composer shows for the agent whose pill you press. Nothing else to choose.",
+  dedicated: "A fixed provider and model, whatever the agent itself runs. Pick them below.",
+} as const;
+
+/** The built-in default first, then every loaded language in barrel order. */
+const LANGUAGE_OPTIONS = [
+  { label: "Same as the prompt", value: SOURCE_LANGUAGE },
+  ...listLanguages().map((language) => ({ label: language.label, value: language.id })),
+] as const;
+
+/** Transport, the CLI's model source, and output language. Model source exists only for Provider CLI. */
+export function EngineSection({ theme, compact, values, disabled, patch }: EngineSectionProps) {
+  return (
+    <SettingsSection
+      title="Rewrite engine"
+      info="Transport answers how the model is reached. On Provider CLI, Model source answers which model; on Direct API the model is chosen under API endpoint. Output language answers what language the rewrite is written in."
+    >
+      <SettingsCard>
+        <SplitSelect
+          theme={theme}
+          compact={compact}
+          label="Transport"
+          hint={TRANSPORT_HINT[values.transport]}
+          value={values.transport}
+          options={TRANSPORT_OPTIONS}
+          disabled={disabled}
+          onValueChange={(transport) => patch({ transport: transport === "api" ? "api" : "cli" })}
+        />
+        {values.transport === "cli" ? (
+          <SplitSelect
+            theme={theme}
+            compact={compact}
+            label="Model source"
+            hint={MODEL_HINT[values.modelMode]}
+            value={values.modelMode}
+            options={MODEL_OPTIONS}
+            disabled={disabled}
+            onValueChange={(modelMode) =>
+              patch({ modelMode: modelMode === "dedicated" ? "dedicated" : "current" })
+            }
+          />
+        ) : null}
+        <SplitSelect
+          theme={theme}
+          compact={compact}
+          label="Output language"
+          hint={
+            values.outputLanguage === SOURCE_LANGUAGE
+              ? "The rewrite keeps the language the prompt was written in."
+              : "The prose is translated; paths, commands, code and names stay exactly as written."
+          }
+          error={
+            LANGUAGE_OPTIONS.some((option) => option.value === values.outputLanguage)
+              ? null
+              : `"${values.outputLanguage}" is not a loaded language. See docs/guides/output-languages.md.`
+          }
+          value={values.outputLanguage}
+          options={
+            LANGUAGE_OPTIONS.some((option) => option.value === values.outputLanguage)
+              ? LANGUAGE_OPTIONS
+              : [{ label: `${values.outputLanguage} (missing)`, value: values.outputLanguage }, ...LANGUAGE_OPTIONS]
+          }
+          disabled={disabled}
+          onValueChange={(outputLanguage) => patch({ outputLanguage })}
+        />
+      </SettingsCard>
+    </SettingsSection>
+  );
+}

package/client/settings/sections/provider-map-card.tsx

@@ -0,0 +1,89 @@
+import { SettingsCard, SettingsRow, SettingsSelect } from "@getpaseo/plugin/client/ui";
+import type { ProviderCatalogOutput } from "../../../shared/rpc.js";
+
+type Providers = ProviderCatalogOutput["providers"];
+
+export interface ProviderMapCardProps {
+  title: string;
+  hint: string;
+  /** Null until the catalog has been read. */
+  providers: Providers | null;
+  /** The current map, provider id → target value. */
+  map: Readonly<Record<string, string>>;
+  /** What a provider can be mapped to. Empty disables adding. */
+  targets: readonly { label: string; value: string }[];
+  /** Shown when `targets` is empty, in place of the Add row. */
+  emptyTargetsLabel: string;
+  /** Row-level error for one mapping, or null. */
+  errorFor?(providerId: string, target: string): string | null;
+  disabled: boolean;
+  onSet(providerId: string, target: string): void;
+  onRemove(providerId: string): void;
+}
+
+const NONE = "";
+const REMOVE = "__remove__";
+
+/** Per-provider map: one row per mapped provider plus an Add row, not the whole catalog. */
+export function ProviderMapCard({
+  title,
+  hint,
+  providers,
+  map,
+  targets,
+  emptyTargetsLabel,
+  errorFor,
+  disabled,
+  onSet,
+  onRemove,
+}: ProviderMapCardProps) {
+  const labelOf = (id: string) => providers?.find((entry) => entry.provider === id)?.label ?? id;
+  const mapped = Object.entries(map);
+  const unmapped = (providers ?? []).filter((entry) => !(entry.provider in map));
+  const firstTarget = targets[0]?.value;
+
+  return (
+    <SettingsCard>
+      <SettingsRow label={title} hint={hint} />
+      {mapped.map(([providerId, target]) => (
+        <SettingsSelect
+          key={providerId}
+          label={labelOf(providerId)}
+          hint={providerId}
+          error={errorFor?.(providerId, target) ?? null}
+          value={target}
+          options={[
+            ...(targets.some((option) => option.value === target)
+              ? []
+              : [{ label: `${target} (missing)`, value: target }]),
+            ...targets,
+            { label: "Remove mapping", value: REMOVE },
+          ]}
+          disabled={disabled}
+          onValueChange={(next) => (next === REMOVE ? onRemove(providerId) : onSet(providerId, next))}
+        />
+      ))}
+      {providers === null ? (
+        <SettingsRow label="Loading providers…" />
+      ) : firstTarget === undefined ? (
+        <SettingsRow label={emptyTargetsLabel} />
+      ) : unmapped.length === 0 ? (
+        <SettingsRow label="Every provider is mapped." />
+      ) : (
+        <SettingsSelect
+          label={mapped.length === 0 ? "No provider is mapped" : "Add another provider"}
+          hint="Pick a provider; its row appears above with the first target, which you can then change."
+          value={NONE}
+          options={[
+            { label: "Add mapping…", value: NONE },
+            ...unmapped.map((entry) => ({ label: `${entry.label} · ${entry.provider}`, value: entry.provider })),
+          ]}
+          disabled={disabled}
+          onValueChange={(providerId) => {
+            if (providerId !== NONE) onSet(providerId, firstTarget);
+          }}
+        />
+      )}
+    </SettingsCard>
+  );
+}

package/client/settings/sections/stored-key-rows.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { SettingsAction, SettingsInput } from "@getpaseo/plugin/client/ui";
+
+export type KeyStatus = { status: "ok"; stored: boolean } | { status: "error"; message: string };
+export type KeyWriteResult = { status: "ok" } | { status: "error"; message: string };
+
+export interface StoredKeyRowsProps {
+  /** What the value is, e.g. "API key" or "Account ID"; names the rows. */
+  subject: string;
+  /** The secrets.json entry name. */
+  name: string;
+  secretsDir: string | null;
+  disabled: boolean;
+  status(input: { secretsDir: string | null; name: string }): Promise<KeyStatus>;
+  write(input: { secretsDir: string | null; name: string; value: string | null }): Promise<KeyWriteResult>;
+}
+
+type Stored = { kind: "unknown" } | { kind: "known"; stored: boolean } | { kind: "error"; message: string };
+
+/** Write-only entry of one secrets.json key: the value is sent once and never shown again. */
+export function StoredKeyRows({ subject, name, secretsDir, disabled, status, write }: StoredKeyRowsProps) {
+  const [stored, setStored] = useState<Stored>({ kind: "unknown" });
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [typed, setTyped] = useState(false);
+  const [inputKey, setInputKey] = useState(0);
+  const value = useRef("");
+  const trimmedName = name.trim();
+
+  const refresh = useCallback(async () => {
+    if (trimmedName === "") return setStored({ kind: "unknown" });
+    try {
+      const result = await status({ secretsDir, name: trimmedName });
+      setStored(result.status === "ok" ? { kind: "known", stored: result.stored } : { kind: "error", message: result.message });
+    } catch (error) {
+      setStored({ kind: "error", message: error instanceof Error ? error.message : String(error) });
+    }
+  }, [secretsDir, status, trimmedName]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const run = async (next: string | null) => {
+    setBusy(true);
+    setMessage(null);
+    try {
+      const result = await write({ secretsDir, name: trimmedName, value: next });
+      if (result.status === "error") return setMessage(result.message);
+      value.current = "";
+      setTyped(false);
+      setInputKey((key) => key + 1);
+      setMessage(next === null ? `Removed ${trimmedName} from secrets.json.` : `Saved ${trimmedName} to secrets.json.`);
+      await refresh();
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const state =
+    stored.kind === "known"
+      ? stored.stored
+        ? `secrets.json holds a value for ${trimmedName}.`
+        : `secrets.json has no value for ${trimmedName} yet.`
+      : stored.kind === "error"
+        ? stored.message
+        : "";
+  const canWrite = !disabled && !busy && trimmedName !== "";
+
+  return (
+    <>
+      <SettingsInput
+        key={`${subject}-${inputKey}`}
+        label={subject}
+        hint={`Convenience only: the value travels once from this screen to the daemon and is written to secrets.json. Prefer an environment variable or editing secrets.json on the daemon's machine. ${state}`.trim()}
+        error={message !== null && !message.startsWith("Saved") && !message.startsWith("Removed") ? message : null}
+        initialValue=""
+        placeholder={`Paste the ${subject.toLowerCase()}, then press Save`}
+        secureTextEntry={subject === "API key"}
+        disabled={!canWrite}
+        onChangeText={(text) => {
+          value.current = text;
+          setTyped(text.trim() !== "");
+        }}
+      />
+      <SettingsAction
+        label={`Store ${subject}`}
+        hint={message !== null && (message.startsWith("Saved") || message.startsWith("Removed")) ? message : "Write-only: the value is never shown or read back."}
+        actionLabel={busy ? "Saving…" : "Save"}
+        disabled={!canWrite || !typed}
+        onPress={() => void run(value.current)}
+      />
+      {stored.kind === "known" && stored.stored ? (
+        <SettingsAction
+          label={`Remove stored ${subject}`}
+          hint={`Deletes ${trimmedName} from secrets.json. Other entries are kept.`}
+          actionLabel="Remove"
+          disabled={!canWrite}
+          onPress={() => void run(null)}
+        />
+      ) : null}
+    </>
+  );
+}

package/client/settings/selection.ts

@@ -0,0 +1,46 @@
+import type { ProviderCatalogOutput } from "../../shared/rpc.js";
+import type { PromptKitSettings } from "../../shared/settings.js";
+
+type Providers = ProviderCatalogOutput["providers"];
+
+/** Null when the selection may run; otherwise the user-facing reason. The API path ignores the CLI fields. */
+export function validateDedicatedSelection(
+  settings: PromptKitSettings,
+  providers: Providers,
+): string | null {
+  if (settings.transport === "api") return validateApiSelection(settings);
+  if (settings.modelMode !== "dedicated") return null;
+  const provider = settings.dedicatedProvider;
+  const model = settings.dedicatedModel;
+  if (provider === null || model === null) {
+    return "Select a dedicated provider and model.";
+  }
+  const entry = providers.find((candidate) => candidate.provider === provider);
+  if (!entry || !entry.available) return `Provider is unavailable: ${provider}`;
+  const selected = entry.models.find((candidate) => candidate.id === model);
+  if (!selected) return `Model is unavailable: ${provider}/${model}`;
+  const thinking = settings.dedicatedThinkingOptionId;
+  if (thinking !== null && !selected.thinkingOptions.some((option) => option.id === thinking)) {
+    return `Thinking option is unavailable: ${thinking}`;
+  }
+  return null;
+}
+
+/** API path, no network call. Mappings alone may run; a selected endpoint must be complete. */
+function validateApiSelection(settings: PromptKitSettings): string | null {
+  const mapped = Object.keys(settings.apiEndpointByProvider).length > 0;
+  const endpointId = settings.apiEndpointId;
+  if (endpointId === null) {
+    return mapped
+      ? null
+      : "Add an API endpoint and select it before rewriting over the API.";
+  }
+  const endpoint = settings.apiEndpoints.find((candidate) => candidate.id === endpointId);
+  if (endpoint === undefined) return `No API endpoint is configured with the id "${endpointId}".`;
+  const model = settings.apiModel;
+  if (model === null) return "Select an API model.";
+  if (endpoint.models.length > 0 && !endpoint.models.includes(model)) {
+    return `Model is unavailable on endpoint "${endpoint.id}": ${model}`;
+  }
+  return null;
+}

package/client/settings/settings-saved.ts

@@ -0,0 +1,17 @@
+/**
+ * Tells code outside the React tree that this client saved the settings. The
+ * host gives plugins no settings-change event outside `useSettings`, so the
+ * Composer pills listen here to follow a Save without a reload.
+ */
+const listeners = new Set<() => void>();
+
+export function onSettingsSaved(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function announceSettingsSaved(): void {
+  for (const listener of [...listeners]) listener();
+}

package/client/settings/settings-screen.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { useRpc, useSettings, type PluginSurfaceProps, type SettingsState } from "@getpaseo/plugin/client";
+import { SettingsAction, SettingsCard, SettingsSection } from "@getpaseo/plugin/client/ui";
+import {
+  actionsListRpc,
+  apiTestRpc,
+  providerCatalogRpc,
+  secretsStatusRpc,
+  secretsWriteRpc,
+  type ActionsListOutput,
+  type ProviderCatalogOutput,
+} from "../../shared/rpc.js";
+import type { ActionPack } from "../../shared/action-registry/schema.js";
+import { promptKitSettings } from "../../shared/settings.js";
+import { describeEnabledLimit, enabledActions } from "../actions/enabled.js";
+import { useSettingsDraft } from "./draft.js";
+import { describeReadiness } from "./readiness.js";
+import { ActionsSection } from "./sections/actions-section.js";
+import { AdvancedSection } from "./sections/advanced-section.js";
+import { CustomActionsSection } from "./sections/custom-actions-section.js";
+import { ApiEndpointSection } from "./sections/api-endpoint-section.js";
+import { DedicatedModelSection } from "./sections/dedicated-model-section.js";
+import { EngineSection } from "./sections/engine-section.js";
+import { StatusBar } from "./ui/status-bar.js";
+import { SPACE, textStyles } from "./ui/tokens.js";
+
+type Providers = ProviderCatalogOutput["providers"];
+type ReadySettings = Extract<SettingsState<typeof promptKitSettings.schema>, { status: "ready" }>;
+
+function message(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+/** Provider catalog read once, action list re-read when the custom actions change; both retry. */
+function useCatalogs(customActions: readonly ActionPack[]) {
+  const listProviders = useRpc(providerCatalogRpc);
+  const listActions = useRpc(actionsListRpc);
+  const [providers, setProviders] = useState<Providers | null>(null);
+  const [providersError, setProvidersError] = useState<string | null>(null);
+  const [registry, setRegistry] = useState<ActionsListOutput | null>(null);
+  const [actionsError, setActionsError] = useState<string | null>(null);
+
+  const reloadProviders = useCallback(() => {
+    setProvidersError(null);
+    void listProviders({})
+      .then((output) => setProviders(output.providers))
+      .catch((error: unknown) => setProvidersError(message(error)));
+  }, [listProviders]);
+
+  const customKey = JSON.stringify(customActions);
+  const reloadActions = useCallback(() => {
+    setActionsError(null);
+    void listActions({ customActions: JSON.parse(customKey) as ActionPack[] })
+      .then((output) => setRegistry(output))
+      .catch((error: unknown) => setActionsError(message(error)));
+  }, [listActions, customKey]);
+
+  useEffect(() => {
+    reloadProviders();
+  }, [reloadProviders]);
+
+  useEffect(() => {
+    reloadActions();
+  }, [reloadActions]);
+
+  return {
+    providers,
+    providersError,
+    reloadProviders,
+    actions: registry?.actions ?? null,
+    rejected: registry?.rejected ?? [],
+    actionsError,
+    reloadActions,
+  };
+}
+
+/** Status bar, then sections in setup order; irrelevant sections are not rendered. */
+function ReadyScreen({ settings, theme, layout }: { settings: ReadySettings } & PluginSurfaceProps) {
+  const settingsDraft = useSettingsDraft(settings);
+  const catalogs = useCatalogs(settingsDraft.values.customActions);
+  // The enabled limit needs the registry, which the draft itself cannot read.
+  const limitProblem =
+    catalogs.actions === null ? null : describeEnabledLimit(catalogs.actions, settingsDraft.values);
+  const draft = { ...settingsDraft, problem: settingsDraft.problem ?? limitProblem };
+  const testEndpoint = useRpc(apiTestRpc);
+  const keyStatus = useRpc(secretsStatusRpc);
+  const writeKey = useRpc(secretsWriteRpc);
+  const { values } = draft;
+  const disabled = draft.saving;
+
+  const enabledCount =
+    catalogs.actions === null ? null : enabledActions(catalogs.actions, values).length;
+  const readiness = describeReadiness({ values, providers: catalogs.providers, enabledActionCount: enabledCount });
+  const actionsChanged = useMemo(
+    () =>
+      JSON.stringify([values.actionEnabled, values.customActions]) !==
+      JSON.stringify([settings.values.actionEnabled, settings.values.customActions]),
+    [values.actionEnabled, values.customActions, settings.values.actionEnabled, settings.values.customActions],
+  );
+
+  return (
+    <View style={{ gap: SPACE.lg }}>
+      <StatusBar
+        theme={theme}
+        readiness={readiness}
+        draft={draft}
+        actionsChanged={actionsChanged}
+        compact={layout.compact}
+      />
+
+      <ActionsSection
+        actions={catalogs.actions}
+        rejected={catalogs.rejected}
+        error={catalogs.actionsError}
+        values={values}
+        disabled={disabled}
+        patch={draft.patch}
+        reload={catalogs.reloadActions}
+      />
+
+      <CustomActionsSection
+        theme={theme}
+        actions={catalogs.actions}
+        values={values}
+        disabled={disabled}
+        patch={draft.patch}
+      />
+
+      <EngineSection theme={theme} compact={layout.compact} values={values} disabled={disabled} patch={draft.patch} />
+
+      {values.transport === "cli" && values.modelMode === "dedicated" ? (
+        <DedicatedModelSection
+          values={values}
+          providers={catalogs.providers}
+          providersError={catalogs.providersError}
+          disabled={disabled}
+          patch={draft.patch}
+          reloadProviders={catalogs.reloadProviders}
+        />
+      ) : null}
+
+      {values.transport === "api" ? (
+        <ApiEndpointSection
+          values={values}
+          disabled={disabled}
+          epoch={draft.epoch}
+          patch={draft.patch}
+          test={(endpoint, secretsDir) => testEndpoint({ endpoint, secretsDir })}
+          keyStatus={keyStatus}
+          writeKey={writeKey}
+        />
+      ) : null}
+
+      <AdvancedSection
+        theme={theme}
+        values={values}
+        providers={catalogs.providers}
+        disabled={disabled}
+        epoch={draft.epoch}
+        patch={draft.patch}
+      />
+    </View>
+  );
+}
+
+export function PromptKitSettingsScreen(props: PluginSurfaceProps) {
+  const settings = useSettings(promptKitSettings);
+  const text = useMemo(() => textStyles(props.theme), [props.theme]);
+
+  if (settings.status === "loading") {
+    return <Text style={text.muted}>Loading PromptKit settings…</Text>;
+  }
+  if (settings.status !== "ready") {
+    return (
+      <SettingsSection title="PromptKit settings could not be read">
+        <SettingsCard>
+          <SettingsAction
+            label="Try again"
+            error={settings.error}
+            actionLabel="Reload"
+            onPress={() => void settings.reload()}
+          />
+          {settings.status === "invalid" ? (
+            <SettingsAction
+              label="Restore default settings"
+              hint="Replaces the stored document with the defaults. Endpoints and overrides are lost."
+              actionLabel="Reset"
+              onPress={() => void settings.reset()}
+            />
+          ) : null}
+        </SettingsCard>
+      </SettingsSection>
+    );
+  }
+  return <ReadyScreen {...props} settings={settings} />;
+}

package/client/settings/ui/button.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { Pressable, Text } from "react-native";
+import type { PluginTheme } from "@getpaseo/plugin";
+import { FONT, RADIUS, SPACE } from "./tokens.js";
+
+export interface ButtonProps {
+  theme: PluginTheme;
+  label: string;
+  onPress(): void;
+  /** `primary` is the one action the screen wants pressed; `ghost` has no chrome. */
+  variant?: "primary" | "outline" | "ghost";
+  /** Stretch to share the row equally with siblings. */
+  fill?: boolean;
+  disabled?: boolean;
+  testID?: string;
+}
+
+/** Button for use outside a SettingsRow; mirrors the host button's size and radius. */
+export function Button({ theme, label, onPress, variant = "outline", fill, disabled, testID }: ButtonProps) {
+  const primary = variant === "primary";
+  const ghost = variant === "ghost";
+  const container = useMemo(
+    () => ({
+      paddingVertical: SPACE.xs + 2,
+      paddingHorizontal: SPACE.md,
+      borderRadius: RADIUS.md,
+      borderWidth: ghost ? 0 : 1,
+      borderColor: primary ? theme.colors.accent : theme.colors.border,
+      backgroundColor: primary ? theme.colors.accent : "transparent",
+      opacity: disabled ? 0.5 : 1,
+      alignItems: "center" as const,
+      ...(fill ? { flex: 1 } : {}),
+    }),
+    [theme, primary, ghost, fill, disabled],
+  );
+  const text = useMemo(
+    () => ({
+      color: primary ? theme.colors.accentForeground : theme.colors.foreground,
+      fontSize: FONT.base,
+      fontWeight: "500" as const,
+    }),
+    [theme, primary],
+  );
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      disabled={disabled}
+      onPress={onPress}
+      style={container}
+      testID={testID}
+    >
+      <Text style={text}>{label}</Text>
+    </Pressable>
+  );
+}

package/client/settings/ui/notice.tsx

@@ -0,0 +1,61 @@
+import { useMemo, type ReactNode } from "react";
+import { Text, View } from "react-native";
+import type { PluginTheme } from "@getpaseo/plugin";
+import { RADIUS, SPACE, textStyles, toneColor, type Tone } from "./tokens.js";
+
+export interface NoticeProps {
+  theme: PluginTheme;
+  tone: Tone;
+  title: string;
+  /** One or two short lines under the title. */
+  lines?: readonly string[];
+  /** Controls on the right, or below in a compact layout. */
+  trailing?: ReactNode;
+  compact?: boolean;
+  testID?: string;
+}
+
+/** Bordered card with a status dot, title and short lines. */
+export function Notice({ theme, tone, title, lines = [], trailing, compact, testID }: NoticeProps) {
+  const text = useMemo(() => textStyles(theme), [theme]);
+  const color = toneColor(theme, tone);
+  const card = useMemo(
+    () => ({
+      flexDirection: compact ? ("column" as const) : ("row" as const),
+      alignItems: compact ? ("stretch" as const) : ("center" as const),
+      gap: SPACE.md,
+      padding: SPACE.lg,
+      borderRadius: RADIUS.lg,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.surface1,
+    }),
+    [theme, compact],
+  );
+  const dot = useMemo(
+    () => ({ width: 8, height: 8, borderRadius: 4, backgroundColor: color, marginTop: 6 }),
+    [color],
+  );
+  return (
+    <View style={card} testID={testID}>
+      <View style={{ flexDirection: "row", gap: SPACE.sm, flex: 1, minWidth: 0 }}>
+        <View style={dot} />
+        <View style={{ flex: 1, gap: SPACE.xs }}>
+          <Text style={text.strong} testID={testID ? `${testID}-title` : undefined}>
+            {title}
+          </Text>
+          {lines.map((line) => (
+            <Text key={line} style={text.muted}>
+              {line}
+            </Text>
+          ))}
+        </View>
+      </View>
+      {trailing ? (
+        <View style={{ flexDirection: "row", gap: SPACE.sm, justifyContent: "flex-end" }}>
+          {trailing}
+        </View>
+      ) : null}
+    </View>
+  );
+}