@omercnet/paseo-context-mode 3.1.4-next.382.1 → 3.1.4-next.434.1

package/client/knowledge-section.tsx

@@ -1,230 +1,261 @@
+import type { PluginTheme } from "@getpaseo/plugin";
 import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
-import { ExternalLink } from "@getpaseo/plugin/client/ui";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { type ReactNode, useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  Pressable,
-  ScrollView,
-  Text,
-  TextInput,
-  type TextStyle,
-  View,
-  type ViewStyle,
-} from "react-native";
+import { ScrollView, SettingsSection, TextInput } from "@getpaseo/plugin/client/ui";
+import { useIsMutating, useMutation, useQueryClient } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
+import { Text, View } from "react-native";
 import {
+  type FetchAndIndexInput,
   fetchAndIndexContextMode,
+  type IndexPathInput,
   indexContextModePath,
+  type KnowledgeDestination,
   type KnowledgeToolResult,
+  type PurgeKnowledgeInput,
   purgeContextModeKnowledge,
+  type SearchKnowledgeInput,
+  type SearchKnowledgeResult,
+  type SearchPage,
+  sameDestination,
   searchContextModeKnowledge,
 } from "../shared/knowledge";
+import { CONTEXT_MODE_PROVIDERS, IN_PROCESS_PROVIDERS } from "../shared/providers";
+import { ActionButton, Card, type ChoiceOption, Choices, ErrorText, Pending } from "./controls";
 import type { KnowledgeScope } from "./screen-scope";
 
-const PROVIDER_LABELS: Readonly<Record<string, string>> = {
-  claude: "Claude",
-  codex: "Codex",
-  copilot: "Copilot",
-  cursor: "Cursor",
-  opencode: "OpenCode",
-  pi: "Pi",
-  omp: "OMP",
-  "omp-plugin": "OMP plugin",
-};
-
 /** Used until the integration audit reports the configured providers. */
-export const BUILTIN_KNOWLEDGE_PROVIDERS = Object.keys(PROVIDER_LABELS);
+export const BUILTIN_KNOWLEDGE_PROVIDERS: readonly string[] = CONTEXT_MODE_PROVIDERS.map(
+  ({ provider }) => provider,
+);
+
+/** Built-in providers by name; configured providers (for example `claude-work`) by their id. */
+export function providerLabel(id: string): string {
+  const entry = [...CONTEXT_MODE_PROVIDERS, ...IN_PROCESS_PROVIDERS].find(
+    ({ provider }) => provider === id,
+  );
+  return entry ? entry.label : id;
+}
 
-const providerLabel = (id: string) => PROVIDER_LABELS[id] ?? id;
+type SearchScope = SearchKnowledgeInput["scope"];
+type SearchSort = SearchKnowledgeInput["sort"];
+type PurgeScope = PurgeKnowledgeInput["scope"];
 
-const INSIGHT_URL = "https://context-mode.com/insight";
-type Provider = string;
-type PurgeScope = "project" | "session";
-export type KnowledgeSectionProps = Pick<PluginSurfaceProps, "theme" | "layout" | "host"> & {
-  initialScope?: KnowledgeScope;
-  /** Paseo provider ids with a Context Mode store: the built-ins plus every configured provider. */
-  providers: readonly string[];
+const SEARCH_SCOPES: readonly ChoiceOption<SearchScope>[] = [
+  { value: "worktree", label: "Worktree" },
+  { value: "project", label: "Project" },
+];
+
+/** Timeline is upstream's oldest-first order. */
+const SEARCH_SORTS: readonly ChoiceOption<SearchSort>[] = [
+  { value: "relevance", label: "Relevance" },
+  { value: "timeline", label: "Timeline" },
+];
+
+const PURGE_SCOPES: readonly ChoiceOption<PurgeScope>[] = [
+  { value: "project", label: "Project" },
+  { value: "session", label: "Session" },
+  { value: "source", label: "Source" },
+];
+
+/** What `ctx_purge` removes per scope: a session purge deletes only its journal, never indexed sources. */
+const PURGE_CONSEQUENCE: Readonly<Record<PurgeScope, string>> = {
+  project: "Every agent working in this project loses its recorded activity and indexed sources.",
+  session: "The session's recorded activity and resume state are deleted; indexed sources stay.",
+  source: "Every agent working in this project loses it.",
 };
 
-interface KnowledgeStyles {
-  section: ViewStyle;
-  sectionHeader: ViewStyle;
-  sectionTitle: TextStyle;
-  card: ViewStyle;
-  cardHeader: ViewStyle;
-  cardTitle: TextStyle;
-  muted: TextStyle;
-  scopeNote: TextStyle;
-  field: ViewStyle;
-  fieldLabel: TextStyle;
-  input: TextStyle;
-  placeholder: TextStyle;
-  choiceRow: ViewStyle;
-  choice: ViewStyle;
-  choiceSelected: ViewStyle;
-  choiceText: TextStyle;
-  choiceTextSelected: TextStyle;
-  actions: ViewStyle;
-  button: ViewStyle;
-  primaryButton: ViewStyle;
-  dangerButton: ViewStyle;
-  disabled: ViewStyle;
-  buttonText: TextStyle;
-  primaryButtonText: TextStyle;
-  dangerButtonText: TextStyle;
-  linkButton: ViewStyle;
-  linkText: TextStyle;
-  pendingRow: ViewStyle;
-  activity: { color: string };
-  error: TextStyle;
-  result: ViewStyle;
-  metaRow: ViewStyle;
-  metaLabel: TextStyle;
-  metaValue: TextStyle;
-  outputFrame: ViewStyle;
-  output: TextStyle;
-  confirmation: ViewStyle;
-  confirmationTitle: TextStyle;
+type PurgeTarget =
+  | { scope: "project" }
+  | { scope: "session"; sessionId: string }
+  | { scope: "source"; source: string };
+type ForgetTarget = Exclude<PurgeTarget, { scope: "project" }>;
+
+interface MoreResultsInput {
+  request: SearchKnowledgeInput;
+  page: SearchPage;
+}
+
+function knowledgeMutationKey(hostId: string) {
+  return ["context-mode", hostId, "knowledge"] as const;
+}
+
+function useRefreshAnalytics(hostId: string): () => Promise<void> {
+  const queryClient = useQueryClient();
+  return () =>
+    queryClient.invalidateQueries({ queryKey: ["context-mode", hostId, "analytics-dashboard"] });
+}
+
+function describePurgeTarget(target: PurgeTarget): string {
+  if (target.scope === "session") return `session ${target.sessionId}`;
+  if (target.scope === "source") return `source ${target.source}`;
+  return "all project knowledge";
+}
+
+/** Drops agent-only footers (the More results button pages instead) and tool-name prefixes. */
+export function presentKnowledgeOutput(output: string): string {
+  return output
+    .split(/\r?\n/)
+    .filter((line) => !/^[Mm]ore: ctx_search\(/.test(line))
+    .map((line) => line.replace(/^ctx_[a-z_]+: /, ""))
+    .join("\n")
+    .trim();
+}
+
+function createStyles(theme: PluginTheme) {
+  return {
+    muted: { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 16 },
+    fieldLabel: { color: theme.colors.foregroundMuted, fontSize: 12, fontWeight: "500" as const },
+    cardTitle: { color: theme.colors.foreground, fontSize: 14, fontWeight: "500" as const },
+    actions: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 8 },
+    result: {
+      gap: 8,
+      padding: 12,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 8,
+      backgroundColor: theme.colors.surface0,
+    },
+    metaRow: { flexDirection: "row" as const, alignItems: "flex-start" as const, gap: 8 },
+    metaLabel: { width: 56, color: theme.colors.foregroundMuted, fontSize: 12 },
+    metaValue: { flex: 1, color: theme.colors.foreground, fontSize: 12 },
+    output: {
+      color: theme.colors.foreground,
+      fontFamily: "monospace",
+      fontSize: 12,
+      lineHeight: 16,
+    },
+  };
+}
+
+interface FieldProps {
+  theme: PluginTheme;
+  label: string;
+  value: string;
+  onChangeText(value: string): void;
+  placeholder: string;
+  accessibilityLabel: string;
+  maxLength: number;
+  disabled?: boolean;
 }
 
 function Field({
+  theme,
   label,
   value,
   onChangeText,
   placeholder,
-  styles,
   accessibilityLabel,
   maxLength,
-}: {
-  label: string;
-  value: string;
-  onChangeText(value: string): void;
-  placeholder: string;
-  styles: KnowledgeStyles;
-  accessibilityLabel: string;
-  maxLength?: number;
-}) {
+  disabled = false,
+}: FieldProps) {
+  const styles = createStyles(theme);
   return (
-    <View style={styles.field}>
+    <View style={{ gap: 4 }}>
       <Text style={styles.fieldLabel}>{label}</Text>
       <TextInput
         accessibilityLabel={accessibilityLabel}
         autoCapitalize="none"
-        maxLength={maxLength}
         autoCorrect={false}
+        editable={!disabled}
+        maxLength={maxLength}
         onChangeText={onChangeText}
         placeholder={placeholder}
-        placeholderTextColor={styles.placeholder.color}
-        style={styles.input}
+        placeholderTextColor={theme.colors.foregroundMuted}
+        style={{
+          minHeight: 32,
+          width: "100%",
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          color: theme.colors.foreground,
+          backgroundColor: theme.colors.surface0,
+          fontSize: 14,
+        }}
         value={value}
       />
     </View>
   );
 }
 
-function ActionButton({
-  label,
-  onPress,
-  disabled = false,
-  danger = false,
-  primary = false,
-  styles,
-}: {
-  label: string;
-  onPress(): void;
-  disabled?: boolean;
-  danger?: boolean;
-  primary?: boolean;
-  styles: KnowledgeStyles;
-}) {
-  return (
-    <Pressable
-      accessibilityLabel={label}
-      accessibilityRole="button"
-      accessibilityState={{ disabled }}
-      disabled={disabled}
-      onPress={onPress}
-      style={[
-        styles.button,
-        primary ? styles.primaryButton : null,
-        danger ? styles.dangerButton : null,
-        disabled ? styles.disabled : null,
-      ]}
-    >
-      <Text
-        style={[
-          styles.buttonText,
-          primary ? styles.primaryButtonText : null,
-          danger ? styles.dangerButtonText : null,
-        ]}
-      >
-        {label}
-      </Text>
-    </Pressable>
-  );
-}
-
-function WorkflowCard({
-  title,
-  description,
-  children,
-  styles,
-}: {
+interface WorkflowCardProps {
+  theme: PluginTheme;
   title: string;
   description: string;
   children: ReactNode;
-  styles: KnowledgeStyles;
-}) {
+}
+
+function WorkflowCard({ theme, title, description, children }: WorkflowCardProps) {
+  const styles = createStyles(theme);
   return (
-    <View style={styles.card}>
-      <View style={styles.cardHeader}>
+    <Card theme={theme}>
+      <View style={{ gap: 4 }}>
         <Text accessibilityRole="header" style={styles.cardTitle}>
           {title}
         </Text>
         <Text style={styles.muted}>{description}</Text>
       </View>
       {children}
+    </Card>
+  );
+}
+
+interface LabeledChoicesProps<Value extends string> {
+  theme: PluginTheme;
+  label: string;
+  options: readonly ChoiceOption<Value>[];
+  value: Value | null;
+  onChange(value: Value): void;
+  accessibilityLabel(option: ChoiceOption<Value>): string;
+  disabled?: boolean;
+}
+
+function LabeledChoices<Value extends string>({ label, ...choices }: LabeledChoicesProps<Value>) {
+  return (
+    <View style={{ gap: 4 }}>
+      <Text style={createStyles(choices.theme).fieldLabel}>{label}</Text>
+      <Choices {...choices} />
     </View>
   );
 }
 
-function ResultPanel({
-  result,
-  pending,
-  error,
-  emptyLabel,
-  source,
-  styles,
-}: {
+interface OutputFrameProps {
+  theme: PluginTheme;
+  output: string;
+  emptyLabel: string;
+}
+
+function OutputFrame({ theme, output, emptyLabel }: OutputFrameProps) {
+  return (
+    <ScrollView nestedScrollEnabled style={{ maxHeight: 220 }}>
+      <Text selectable style={createStyles(theme).output}>
+        {presentKnowledgeOutput(output) || emptyLabel}
+      </Text>
+    </ScrollView>
+  );
+}
+
+interface ResultPanelProps {
+  theme: PluginTheme;
   result: KnowledgeToolResult | undefined;
   pending: boolean;
   error: unknown;
   emptyLabel: string;
   source?: string;
-  styles: KnowledgeStyles;
-}) {
-  if (pending) {
-    return (
-      <View accessibilityLiveRegion="polite" style={styles.pendingRow}>
-        <ActivityIndicator size="small" color={styles.activity.color} />
-        <Text style={styles.muted}>Working…</Text>
-      </View>
-    );
-  }
-  if (error) {
-    return (
-      <Text accessibilityRole="alert" style={styles.error}>
-        {error instanceof Error ? error.message : String(error)}
-      </Text>
-    );
-  }
+}
+
+function ResultPanel({ theme, result, pending, error, emptyLabel, source }: ResultPanelProps) {
+  const styles = createStyles(theme);
+  if (pending) return <Pending theme={theme} label="Working..." />;
+  if (error) return <ErrorText theme={theme} error={error} />;
   if (!result) return null;
   return (
     <View accessibilityLiveRegion="polite" style={styles.result}>
       <View style={styles.metaRow}>
-        <Text style={styles.metaLabel}>Provider</Text>
+        <Text style={styles.metaLabel}>Agent</Text>
         <Text selectable style={styles.metaValue}>
-          {result.provider}
+          {providerLabel(result.provider)}
         </Text>
       </View>
       {source ? (
@@ -235,571 +266,568 @@ function ResultPanel({
           </Text>
         </View>
       ) : null}
-      <ScrollView nestedScrollEnabled style={styles.outputFrame}>
-        <Text selectable style={styles.output}>
-          {result.output || emptyLabel}
-        </Text>
-      </ScrollView>
+      <OutputFrame theme={theme} output={result.output} emptyLabel={emptyLabel} />
     </View>
   );
 }
 
-export function KnowledgeSection({
+interface ConfirmPanelProps {
+  theme: PluginTheme;
+  message: string;
+  confirmLabel: string;
+  pendingLabel: string;
+  pending: boolean;
+  confirmAccessibilityLabel?: string;
+  onConfirm(): void;
+  onCancel(): void;
+}
+
+/** The review step before a permanent delete: the only place a destructive button appears. */
+function ConfirmPanel({
   theme,
-  layout,
-  host,
-  initialScope,
-  providers,
-}: KnowledgeSectionProps) {
-  const styles = useMemo(() => createStyles(theme, layout.compact), [layout.compact, theme]);
-  const searchKnowledge = useRpc(searchContextModeKnowledge);
-  const indexPath = useRpc(indexContextModePath);
-  const fetchAndIndex = useRpc(fetchAndIndexContextMode);
-  const purgeKnowledge = useRpc(purgeContextModeKnowledge);
-  const queryClient = useQueryClient();
-  const refreshAnalytics = () =>
-    queryClient.invalidateQueries({
-      queryKey: ["context-mode", host.id, "analytics-dashboard"],
-    });
+  message,
+  confirmLabel,
+  pendingLabel,
+  pending,
+  confirmAccessibilityLabel,
+  onConfirm,
+  onCancel,
+}: ConfirmPanelProps) {
+  const styles = createStyles(theme);
+  return (
+    <View
+      accessibilityRole="alert"
+      style={{
+        gap: 8,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: theme.colors.statusDanger,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface0,
+      }}
+    >
+      <Text style={styles.muted}>{message}</Text>
+      <View style={styles.actions}>
+        <ActionButton
+          theme={theme}
+          variant="destructive"
+          accessibilityLabel={confirmAccessibilityLabel}
+          disabled={pending}
+          label={pending ? pendingLabel : confirmLabel}
+          onPress={onConfirm}
+        />
+        <ActionButton theme={theme} disabled={pending} label="Cancel" onPress={onCancel} />
+      </View>
+    </View>
+  );
+}
 
-  const scopedProvider = initialScope?.provider ?? null;
-  const scopedProviderKnown = scopedProvider !== null && providers.includes(scopedProvider);
-  const note =
-    initialScope?.note ??
-    (scopedProvider && !scopedProviderKnown
-      ? `Provider ${scopedProvider} has no Context Mode store on this host. Select one explicitly.`
-      : undefined);
-  const [provider, setProvider] = useState<Provider | null>(
-    initialScope ? (scopedProviderKnown ? scopedProvider : null) : "claude",
+export interface KnowledgeSectionProps extends Pick<PluginSurfaceProps, "theme" | "host"> {
+  initialScope?: KnowledgeScope;
+  /** Paseo provider ids Context Mode supports: the built-ins plus configured providers extending one. */
+  providers: readonly string[];
+}
+
+function initialProvider(scope: KnowledgeScope | undefined, providers: readonly string[]) {
+  if (!scope) return providers.includes("claude") ? "claude" : null;
+  if (scope.provider !== null && providers.includes(scope.provider)) return scope.provider;
+  return null;
+}
+
+function scopeNote(scope: KnowledgeScope | undefined, providers: readonly string[]) {
+  if (scope?.note) return scope.note;
+  if (!scope?.provider || providers.includes(scope.provider)) return null;
+  return `Knowledge needs an agent Paseo can run Context Mode for, and ${scope.provider} is not one. Select another agent.`;
+}
+
+export function KnowledgeSection({ theme, host, initialScope, providers }: KnowledgeSectionProps) {
+  const styles = createStyles(theme);
+  const note = scopeNote(initialScope, providers);
+  const [provider, setProvider] = useState<string | null>(() =>
+    initialProvider(initialScope, providers),
   );
   const [projectPath, setProjectPath] = useState(initialScope?.projectPath ?? "");
-  const [query, setQuery] = useState("");
-  const [searchSource, setSearchSource] = useState("");
-  const [path, setPath] = useState("");
-  const [pathSource, setPathSource] = useState("");
-  const [url, setUrl] = useState("");
-  const [urlSource, setUrlSource] = useState("");
-  const [purgeScope, setPurgeScope] = useState<PurgeScope | null>(null);
-  const [searchResultSource, setSearchResultSource] = useState("");
-  const [pathResultSource, setPathResultSource] = useState("");
-  const [urlResultSource, setUrlResultSource] = useState("");
-  const [sessionId, setSessionId] = useState("");
   const [managementExpanded, setManagementExpanded] = useState(false);
-  const [purgeArmed, setPurgeArmed] = useState(false);
-  const [linkError, setLinkError] = useState<string | null>(null);
+  const busy = useIsMutating({ mutationKey: knowledgeMutationKey(host.id) }) > 0;
+  const trimmedPath = projectPath.trim();
+  const destination: KnowledgeDestination | null =
+    provider !== null && trimmedPath ? { provider, projectPath: trimmedPath } : null;
+  const destinationNote = destination
+    ? `Current destination: the project store for ${destination.projectPath}, recorded as ${providerLabel(destination.provider)}.`
+    : "Select an agent and absolute project path.";
+  const providerOptions = providers.map((id) => ({ value: id, label: providerLabel(id) }));
+  // Results belong to the agent they were recorded as, so a new agent starts the workflows fresh.
+  const workflowKey = provider ?? "none";
+
+  return (
+    <SettingsSection
+      title="Knowledge"
+      info="Search or add material in the Context Mode store of one project. Every agent working in that project shares it and the agent labels who added what. A provider with its own CONTEXT_MODE_DATA_DIR uses the store in that directory."
+    >
+      <View style={{ gap: 16 }}>
+        <Card theme={theme}>
+          {note ? <Text style={styles.muted}>{note}</Text> : null}
+          <LabeledChoices
+            theme={theme}
+            label="Agent"
+            disabled={busy}
+            accessibilityLabel={(option) => `${option.label} agent`}
+            onChange={setProvider}
+            options={providerOptions}
+            value={provider}
+          />
+          <Field
+            theme={theme}
+            accessibilityLabel="Knowledge project path"
+            label="Project path"
+            disabled={busy}
+            maxLength={4_096}
+            onChangeText={setProjectPath}
+            placeholder="/absolute/path/to/project"
+            value={projectPath}
+          />
+          <Text accessibilityLiveRegion="polite" style={styles.muted}>
+            {destinationNote}
+          </Text>
+        </Card>
+
+        <SearchCard
+          key={`search:${workflowKey}`}
+          theme={theme}
+          hostId={host.id}
+          destination={destination}
+        />
+
+        <ActionButton
+          theme={theme}
+          variant="outline"
+          disabled={busy}
+          expanded={managementExpanded}
+          label={managementExpanded ? "Hide source management" : "Add or manage sources"}
+          onPress={() => setManagementExpanded((expanded) => !expanded)}
+        />
+
+        {managementExpanded ? (
+          <SourceManagement
+            key={`sources:${workflowKey}`}
+            theme={theme}
+            hostId={host.id}
+            destination={destination}
+          />
+        ) : null}
+      </View>
+    </SettingsSection>
+  );
+}
+
+interface WorkflowProps {
+  theme: PluginTheme;
+  hostId: string;
+  destination: KnowledgeDestination | null;
+}
+
+/** Result panel state for a mutation, shown only while its destination is still selected. */
+function forDestination(
+  mutation: {
+    variables?: KnowledgeDestination;
+    data?: KnowledgeToolResult;
+    error: unknown;
+    isPending: boolean;
+  },
+  destination: KnowledgeDestination | null,
+) {
+  return sameDestination(mutation.variables, destination)
+    ? { result: mutation.data, error: mutation.error, pending: mutation.isPending }
+    : { result: undefined, error: null, pending: false };
+}
 
+function SearchCard({ theme, hostId, destination }: WorkflowProps) {
+  const styles = createStyles(theme);
+  const searchKnowledge = useRpc(searchContextModeKnowledge);
+  const [query, setQuery] = useState("");
+  const [source, setSource] = useState("");
+  const [scope, setScope] = useState<SearchScope>("worktree");
+  const [sort, setSort] = useState<SearchSort>("relevance");
+  const [extraPages, setExtraPages] = useState<SearchKnowledgeResult[]>([]);
   const search = useMutation({
-    mutationFn: () => {
-      if (!provider) throw new Error("Select a provider store before searching.");
-      const source = searchSource.trim();
-      setSearchResultSource(source);
-      return searchKnowledge({
-        provider,
-        projectPath: projectPath.trim(),
-        queries: [query.trim()],
-        ...(source ? { source } : {}),
-      });
-    },
+    mutationKey: knowledgeMutationKey(hostId),
+    mutationFn: (request: SearchKnowledgeInput) => searchKnowledge(request),
+    onMutate: () => setExtraPages([]),
+  });
+  const moreResults = useMutation({
+    mutationKey: knowledgeMutationKey(hostId),
+    mutationFn: ({ request, page }: MoreResultsInput) => searchKnowledge({ ...request, page }),
+    onSuccess: (result) => setExtraPages((pages) => [...pages, result]),
   });
+  const request = search.variables;
+  // Results stay with the project they came from; editing the path hides them but keeps the form.
+  const current = sameDestination(request, destination);
+  const lastPage = extraPages.at(-1) ?? search.data;
+  const nextPage = lastPage?.next ?? null;
+  const trimmedQuery = query.trim();
+  const canSearch = destination !== null && trimmedQuery.length > 0;
+
+  function startSearch() {
+    if (!destination) return;
+    const trimmedSource = source.trim();
+    moreResults.reset();
+    search.mutate({
+      ...destination,
+      queries: [trimmedQuery],
+      scope,
+      sort,
+      ...(trimmedSource ? { source: trimmedSource } : {}),
+    });
+  }
+
+  function loadMore() {
+    if (request && nextPage) moreResults.mutate({ request, page: nextPage });
+  }
+
+  return (
+    <WorkflowCard
+      theme={theme}
+      title="Search"
+      description="Search indexed knowledge. Add a source filter when you only want matches from one named source."
+    >
+      <Field
+        theme={theme}
+        accessibilityLabel="Knowledge search query"
+        label="Query"
+        maxLength={1_024}
+        onChangeText={setQuery}
+        placeholder="What do you need to find?"
+        value={query}
+      />
+      <Field
+        theme={theme}
+        accessibilityLabel="Knowledge search source filter"
+        label="Source filter (optional)"
+        maxLength={512}
+        onChangeText={setSource}
+        placeholder="docs, repository, or source label"
+        value={source}
+      />
+      <LabeledChoices<SearchScope>
+        theme={theme}
+        label="Scope"
+        accessibilityLabel={(option) => `Search ${option.label.toLowerCase()} scope`}
+        onChange={setScope}
+        options={SEARCH_SCOPES}
+        value={scope}
+      />
+      <LabeledChoices<SearchSort>
+        theme={theme}
+        label="Order"
+        accessibilityLabel={(option) => `Order results by ${option.label.toLowerCase()}`}
+        onChange={setSort}
+        options={SEARCH_SORTS}
+        value={sort}
+      />
+      <ActionButton
+        theme={theme}
+        variant="primary"
+        disabled={!canSearch || search.isPending || moreResults.isPending}
+        label={search.isPending ? "Searching..." : "Search knowledge"}
+        onPress={startSearch}
+      />
+      <ResultPanel
+        theme={theme}
+        emptyLabel="No matching knowledge"
+        {...forDestination(search, destination)}
+        source={request?.source}
+      />
+      {current
+        ? extraPages.map((page, pageIndex) => (
+            <View
+              key={`${page.completedAt}:${pageIndex}`}
+              accessibilityLiveRegion="polite"
+              style={styles.result}
+            >
+              <Text style={styles.metaLabel}>Page {pageIndex + 2}</Text>
+              <OutputFrame theme={theme} output={page.output} emptyLabel="No more matches" />
+            </View>
+          ))
+        : null}
+      {current && nextPage && !search.isPending ? (
+        <ActionButton
+          theme={theme}
+          accessibilityLabel="Load more search results"
+          disabled={moreResults.isPending}
+          label={moreResults.isPending ? "Loading..." : "More results"}
+          onPress={loadMore}
+        />
+      ) : null}
+      {current ? <ErrorText theme={theme} error={moreResults.error} /> : null}
+    </WorkflowCard>
+  );
+}
+
+function SourceManagement(props: WorkflowProps) {
+  return (
+    <>
+      <IndexPathCard {...props} />
+      <IndexUrlCard {...props} />
+      <PurgeCard {...props} />
+    </>
+  );
+}
+
+function IndexPathCard({ theme, hostId, destination }: WorkflowProps) {
+  const indexPath = useRpc(indexContextModePath);
+  const refreshAnalytics = useRefreshAnalytics(hostId);
+  const [path, setPath] = useState("");
   const index = useMutation({
-    mutationFn: () => {
-      if (!provider) throw new Error("Select a provider store before indexing.");
-      const source = pathSource.trim();
-      setPathResultSource(source || path.trim());
-      return indexPath({
-        provider,
-        projectPath: projectPath.trim(),
-        path: path.trim(),
-        ...(source ? { source } : {}),
-      });
-    },
+    mutationKey: knowledgeMutationKey(hostId),
+    mutationFn: (input: IndexPathInput) => indexPath(input),
     onSuccess: refreshAnalytics,
   });
+  const target = path.trim();
+
+  function submit() {
+    if (destination) index.mutate({ ...destination, path: target });
+  }
+
+  return (
+    <WorkflowCard
+      theme={theme}
+      title="Index a local path"
+      description="Add a file or directory inside the selected project."
+    >
+      <Field
+        theme={theme}
+        accessibilityLabel="Local path to index"
+        label="Local path"
+        maxLength={4_096}
+        onChangeText={setPath}
+        placeholder="/absolute/path/to/docs"
+        value={path}
+      />
+      <ActionButton
+        theme={theme}
+        disabled={!destination || !target || index.isPending}
+        label={index.isPending ? "Indexing..." : "Index path"}
+        onPress={submit}
+      />
+      <ResultPanel
+        theme={theme}
+        emptyLabel="No report"
+        {...forDestination(index, destination)}
+        source={index.variables?.path}
+      />
+    </WorkflowCard>
+  );
+}
+
+function IndexUrlCard({ theme, hostId, destination }: WorkflowProps) {
+  const fetchAndIndex = useRpc(fetchAndIndexContextMode);
+  const refreshAnalytics = useRefreshAnalytics(hostId);
+  const [url, setUrl] = useState("");
   const fetch = useMutation({
-    mutationFn: () => {
-      if (!provider) throw new Error("Select a provider store before fetching.");
-      const source = urlSource.trim();
-      setUrlResultSource(source || url.trim());
-      return fetchAndIndex({
-        provider,
-        projectPath: projectPath.trim(),
-        url: url.trim(),
-        ...(source ? { source } : {}),
-      });
-    },
+    mutationKey: knowledgeMutationKey(hostId),
+    mutationFn: (input: FetchAndIndexInput) => fetchAndIndex(input),
     onSuccess: refreshAnalytics,
   });
+  const target = url.trim();
+
+  function submit() {
+    if (destination) fetch.mutate({ ...destination, url: target });
+  }
+
+  return (
+    <WorkflowCard
+      theme={theme}
+      title="Index a URL"
+      description="Fetch one public HTTP or HTTPS page and add it to the selected project store."
+    >
+      <Field
+        theme={theme}
+        accessibilityLabel="URL to fetch and index"
+        label="URL"
+        maxLength={4_096}
+        onChangeText={setUrl}
+        placeholder="https://docs.example.com/guide"
+        value={url}
+      />
+      <ActionButton
+        theme={theme}
+        disabled={!destination || !target || fetch.isPending}
+        label={fetch.isPending ? "Indexing..." : "Index URL"}
+        onPress={submit}
+      />
+      <ResultPanel
+        theme={theme}
+        emptyLabel="No report"
+        {...forDestination(fetch, destination)}
+        source={fetch.variables?.url}
+      />
+    </WorkflowCard>
+  );
+}
+
+function purgeTargetFor(
+  scope: PurgeScope | null,
+  sessionId: string,
+  source: string,
+): PurgeTarget | null {
+  if (scope === "project") return { scope };
+  if (scope === "session" && sessionId) return { scope, sessionId };
+  if (scope === "source" && source) return { scope, source };
+  return null;
+}
+
+function PurgeCard({ theme, hostId, destination }: WorkflowProps) {
+  const purgeKnowledge = useRpc(purgeContextModeKnowledge);
+  const refreshAnalytics = useRefreshAnalytics(hostId);
+  const [scope, setScope] = useState<PurgeScope | null>(null);
+  const [sessionId, setSessionId] = useState("");
+  const [source, setSource] = useState("");
+  // The armed review names one exact destination and target; editing either disarms it.
+  const [armedFor, setArmedFor] = useState<string | null>(null);
   const purge = useMutation({
-    mutationFn: () => {
-      if (!provider || !purgeScope) throw new Error("Select a provider and purge scope.");
-      if (purgeScope === "session") {
-        return purgeKnowledge({
-          provider,
-          projectPath: projectPath.trim(),
-          confirm: true,
-          scope: "session",
-          sessionId: sessionId.trim(),
-        });
-      }
-      return purgeKnowledge({
-        provider,
-        projectPath: projectPath.trim(),
-        confirm: true,
-        scope: "project",
-      });
-    },
+    mutationKey: knowledgeMutationKey(hostId),
+    mutationFn: (input: PurgeKnowledgeInput) => purgeKnowledge(input),
     onSuccess: refreshAnalytics,
-    onSettled: () => setPurgeArmed(false),
+    onSettled: () => setArmedFor(null),
   });
+  const target = purgeTargetFor(scope, sessionId.trim(), source.trim());
+  const reviewKey = JSON.stringify([destination, target]);
+  const armed = armedFor === reviewKey;
 
-  const busy = search.isPending || index.isPending || fetch.isPending || purge.isPending;
-  const changeProvider = (next: Provider) => {
-    setProvider(next);
-    setPurgeArmed(false);
-    search.reset();
-    index.reset();
-    fetch.reset();
-    purge.reset();
-  };
-  const changePurgeScope = (next: PurgeScope) => {
-    setPurgeScope(next);
-    setPurgeArmed(false);
+  function changeScope(next: PurgeScope) {
+    setScope(next);
     purge.reset();
-  };
-  const providerReady = provider !== null && projectPath.trim().length > 0;
-  const canPreparePurge =
-    providerReady &&
-    purgeScope !== null &&
-    (purgeScope !== "session" || sessionId.trim().length > 0);
-
-  return (
-    <View style={styles.section}>
-      <View style={styles.sectionHeader}>
-        <Text accessibilityRole="header" style={styles.sectionTitle}>
-          Knowledge
-        </Text>
-        <Text style={styles.muted}>
-          Search or add material in one provider-specific store. Nothing is copied between
-          providers.
-        </Text>
-      </View>
+  }
 
-      <View style={styles.card}>
-        <Text style={styles.fieldLabel}>Provider store</Text>
-        {note ? <Text style={styles.scopeNote}>{note}</Text> : null}
-        <View accessibilityRole="radiogroup" style={styles.choiceRow}>
-          {providers.map((id) => {
-            const selected = provider === id;
-            return (
-              <Pressable
-                key={id}
-                accessibilityLabel={`${providerLabel(id)} provider store`}
-                disabled={busy}
-                accessibilityRole="radio"
-                accessibilityState={{ checked: selected, disabled: busy }}
-                onPress={() => changeProvider(id)}
-                style={[
-                  styles.choice,
-                  selected ? styles.choiceSelected : null,
-                  busy ? styles.disabled : null,
-                ]}
-              >
-                <Text style={[styles.choiceText, selected ? styles.choiceTextSelected : null]}>
-                  {providerLabel(id)}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </View>
-        <Field
-          accessibilityLabel="Knowledge project path"
-          label="Project path"
-          maxLength={4_096}
-          onChangeText={(value) => {
-            setProjectPath(value);
-            setPurgeArmed(false);
-          }}
-          placeholder="/absolute/path/to/project"
-          styles={styles}
-          value={projectPath}
-        />
-        <Text accessibilityLiveRegion="polite" style={styles.scopeNote}>
-          {provider && projectPath.trim()
-            ? `Current destination: ${providerLabel(provider)} storage for ${projectPath.trim()}.`
-            : "Select a provider and absolute project path. No storage destination is selected by default."}
-        </Text>
-      </View>
+  function confirm() {
+    if (destination && target) purge.mutate({ ...destination, confirm: true, ...target });
+  }
 
-      <WorkflowCard
-        title="Search"
-        description="Search indexed knowledge. Add a source filter when you only want matches from one named source."
-        styles={styles}
-      >
+  return (
+    <WorkflowCard
+      theme={theme}
+      title="Purge knowledge"
+      description="Purge part of the selected project store for every agent. Select a scope, review it, then confirm."
+    >
+      <LabeledChoices
+        theme={theme}
+        label="Scope"
+        accessibilityLabel={(option) => `Purge ${option.label.toLowerCase()} scope`}
+        onChange={changeScope}
+        options={PURGE_SCOPES}
+        value={scope}
+      />
+      {scope === "session" ? (
         <Field
-          accessibilityLabel="Knowledge search query"
-          label="Query"
-          maxLength={1_024}
-          onChangeText={setQuery}
-          placeholder="What do you need to find?"
-          styles={styles}
-          value={query}
+          theme={theme}
+          accessibilityLabel="Session identifier to purge"
+          label="Session ID"
+          maxLength={256}
+          onChangeText={setSessionId}
+          placeholder="Exact Context Mode session ID"
+          value={sessionId}
         />
+      ) : null}
+      {scope === "source" ? (
         <Field
-          accessibilityLabel="Knowledge search source filter"
-          label="Source filter (optional)"
+          theme={theme}
+          accessibilityLabel="Source label to forget"
+          label="Source label"
           maxLength={512}
-          onChangeText={setSearchSource}
-          placeholder="docs, repository, or source label"
-          styles={styles}
-          value={searchSource}
+          onChangeText={setSource}
+          placeholder="Exact indexed source label"
+          value={source}
         />
-        <View style={styles.actions}>
-          <ActionButton
-            disabled={!providerReady || query.trim().length === 0 || search.isPending}
-            label={search.isPending ? "Searching…" : "Search knowledge"}
-            onPress={() => search.mutate()}
-            primary
-            styles={styles}
-          />
-        </View>
-        <ResultPanel
-          emptyLabel="No matching knowledge was returned."
-          error={search.error}
-          pending={search.isPending}
-          result={search.data}
-          source={searchResultSource || undefined}
-          styles={styles}
-        />
-      </WorkflowCard>
-
-      <Pressable
-        accessibilityLabel={managementExpanded ? "Hide source management" : "Add or manage sources"}
-        accessibilityRole="button"
-        accessibilityState={{ expanded: managementExpanded }}
-        onPress={() => setManagementExpanded((expanded) => !expanded)}
-        style={styles.button}
-      >
-        <Text style={styles.buttonText}>
-          {managementExpanded ? "Hide source management" : "Add or manage sources"}
-        </Text>
-      </Pressable>
-
-      {managementExpanded ? (
-        <>
-          <WorkflowCard
-            title="Source visibility"
-            description="Open Context Mode Insight to inspect indexed sources and understand what is available to search."
-            styles={styles}
-          >
-            <View style={styles.actions}>
-              <ExternalLink
-                accessibilityLabel="Open Context Mode Insight in a browser"
-                href={INSIGHT_URL}
-                onError={(error) =>
-                  setLinkError(error instanceof Error ? error.message : String(error))
-                }
-              >
-                <View style={styles.linkButton}>
-                  <Text style={styles.linkText}>Open Insight</Text>
-                </View>
-              </ExternalLink>
-            </View>
-            {linkError ? (
-              <Text accessibilityRole="alert" style={styles.error}>
-                Could not open Insight: {linkError}
-              </Text>
-            ) : null}
-          </WorkflowCard>
-
-          <WorkflowCard
-            title="Index a local path"
-            description="Add a file or directory from the selected provider environment. The source label stays visible with the indexed material."
-            styles={styles}
-          >
-            <Field
-              accessibilityLabel="Local path to index"
-              label="Local path"
-              maxLength={4_096}
-              onChangeText={setPath}
-              placeholder="/absolute/path/to/docs"
-              styles={styles}
-              value={path}
-            />
-            <Field
-              accessibilityLabel="Local path source label"
-              label="Source label (optional)"
-              maxLength={512}
-              onChangeText={setPathSource}
-              placeholder="project-docs"
-              styles={styles}
-              value={pathSource}
-            />
-            <View style={styles.actions}>
-              <ActionButton
-                disabled={!providerReady || path.trim().length === 0 || index.isPending}
-                label={index.isPending ? "Indexing…" : "Index path"}
-                onPress={() => index.mutate()}
-                styles={styles}
-              />
-            </View>
-            <ResultPanel
-              emptyLabel="Context Mode completed without a text report."
-              error={index.error}
-              pending={index.isPending}
-              result={index.data}
-              source={pathResultSource || undefined}
-              styles={styles}
-            />
-          </WorkflowCard>
-
-          <WorkflowCard
-            title="Fetch and index a URL"
-            description="Fetch one HTTP or HTTPS source and add it to the selected provider store."
-            styles={styles}
-          >
-            <Field
-              accessibilityLabel="URL to fetch and index"
-              label="URL"
-              maxLength={4_096}
-              onChangeText={setUrl}
-              placeholder="https://docs.example.com/guide"
-              styles={styles}
-              value={url}
-            />
-            <Field
-              accessibilityLabel="Fetched URL source label"
-              label="Source label (optional)"
-              maxLength={512}
-              onChangeText={setUrlSource}
-              placeholder="product-guide"
-              styles={styles}
-              value={urlSource}
-            />
-            <View style={styles.actions}>
-              <ActionButton
-                disabled={!providerReady || url.trim().length === 0 || fetch.isPending}
-                label={fetch.isPending ? "Fetching…" : "Fetch and index"}
-                onPress={() => fetch.mutate()}
-                styles={styles}
-              />
-            </View>
-            <ResultPanel
-              emptyLabel="Context Mode completed without a text report."
-              error={fetch.error}
-              pending={fetch.isPending}
-              result={fetch.data}
-              source={urlResultSource || undefined}
-              styles={styles}
-            />
-          </WorkflowCard>
-
-          <WorkflowCard
-            title="Purge knowledge"
-            description="Purge only the selected provider store and scope. Select a scope, review it, then confirm."
-            styles={styles}
-          >
-            <Text style={styles.fieldLabel}>Scope</Text>
-            <View accessibilityRole="radiogroup" style={styles.choiceRow}>
-              {(["project", "session"] as const).map((scope) => {
-                const selected = purgeScope === scope;
-                const label = scope === "project" ? "Project" : "Session";
-                return (
-                  <Pressable
-                    key={scope}
-                    accessibilityLabel={`Purge ${label.toLowerCase()} scope`}
-                    accessibilityRole="radio"
-                    accessibilityState={{ checked: selected }}
-                    onPress={() => changePurgeScope(scope)}
-                    style={[styles.choice, selected ? styles.choiceSelected : null]}
-                  >
-                    <Text style={[styles.choiceText, selected ? styles.choiceTextSelected : null]}>
-                      {label}
-                    </Text>
-                  </Pressable>
-                );
-              })}
-            </View>
-            {purgeScope === "session" ? (
-              <Field
-                accessibilityLabel="Session identifier to purge"
-                label="Session ID"
-                maxLength={256}
-                onChangeText={(value) => {
-                  setSessionId(value);
-                  setPurgeArmed(false);
-                }}
-                placeholder="Exact Context Mode session ID"
-                styles={styles}
-                value={sessionId}
-              />
-            ) : null}
-            {!purgeArmed ? (
-              <View style={styles.actions}>
-                <ActionButton
-                  danger
-                  disabled={!canPreparePurge || purge.isPending}
-                  label="Review purge"
-                  onPress={() => setPurgeArmed(true)}
-                  styles={styles}
-                />
-              </View>
-            ) : (
-              <View accessibilityRole="alert" style={styles.confirmation}>
-                <Text style={styles.confirmationTitle}>Confirm permanent purge</Text>
-                <Text style={styles.muted}>
-                  {`Delete ${purgeScope === "session" ? `session ${sessionId.trim()}` : "project"} knowledge from ${provider} storage? This does not affect other providers.`}
-                </Text>
-                <View style={styles.actions}>
-                  <ActionButton
-                    danger
-                    label={purge.isPending ? "Purging…" : "Confirm purge"}
-                    onPress={() => purge.mutate()}
-                    styles={styles}
-                  />
-                  <ActionButton
-                    disabled={purge.isPending}
-                    label="Cancel"
-                    onPress={() => setPurgeArmed(false)}
-                    styles={styles}
-                  />
-                </View>
-              </View>
-            )}
-            <ResultPanel
-              emptyLabel="The selected knowledge scope was purged."
-              error={purge.error}
-              pending={purge.isPending}
-              result={purge.data}
-              styles={styles}
-            />
-          </WorkflowCard>
-        </>
       ) : null}
+      {armed && destination && target ? (
+        <ConfirmPanel
+          theme={theme}
+          message={`Delete ${describePurgeTarget(target)} from the ${destination.projectPath} store? ${PURGE_CONSEQUENCE[target.scope]}`}
+          confirmLabel="Confirm purge"
+          pendingLabel="Purging..."
+          pending={purge.isPending}
+          onConfirm={confirm}
+          onCancel={() => setArmedFor(null)}
+        />
+      ) : (
+        <ActionButton
+          theme={theme}
+          variant="outline"
+          disabled={!destination || !target || purge.isPending}
+          label="Review purge"
+          onPress={() => setArmedFor(reviewKey)}
+        />
+      )}
+      <ResultPanel theme={theme} emptyLabel="Purged" {...forDestination(purge, destination)} />
+    </WorkflowCard>
+  );
+}
+
+interface ForgetButtonProps extends Pick<PluginSurfaceProps, "theme" | "host"> {
+  provider: string;
+  projectPath: string;
+}
+
+interface ForgetProps extends ForgetButtonProps {
+  target: ForgetTarget;
+}
+
+/** Per-row "Forget" with the same review-then-confirm step as purge. */
+function ForgetButton({ theme, host, provider, projectPath, target }: ForgetProps) {
+  const purgeKnowledge = useRpc(purgeContextModeKnowledge);
+  const refreshAnalytics = useRefreshAnalytics(host.id);
+  const [armed, setArmed] = useState(false);
+  const forget = useMutation({
+    mutationKey: knowledgeMutationKey(host.id),
+    mutationFn: (input: PurgeKnowledgeInput) => purgeKnowledge(input),
+    onSuccess: refreshAnalytics,
+    onSettled: () => setArmed(false),
+  });
+  const targetLabel = describePurgeTarget(target);
+  const mutedStyle = createStyles(theme).muted;
+
+  if (forget.isSuccess) return <Text style={mutedStyle}>Forgotten</Text>;
+  return (
+    <View style={{ gap: 4 }}>
+      {armed ? (
+        <ConfirmPanel
+          theme={theme}
+          message={`Forget ${targetLabel} from the ${projectPath} store? ${PURGE_CONSEQUENCE[target.scope]}`}
+          confirmAccessibilityLabel={`Confirm forget ${targetLabel}`}
+          confirmLabel="Confirm forget"
+          pendingLabel="Forgetting..."
+          pending={forget.isPending}
+          onConfirm={() => forget.mutate({ provider, projectPath, confirm: true, ...target })}
+          onCancel={() => setArmed(false)}
+        />
+      ) : (
+        <ActionButton
+          theme={theme}
+          variant="outline"
+          accessibilityLabel={`Forget ${targetLabel}`}
+          label="Forget"
+          onPress={() => setArmed(true)}
+        />
+      )}
+      <ErrorText theme={theme} error={forget.error} />
     </View>
   );
 }
 
-function createStyles(theme: PluginSurfaceProps["theme"], compact: boolean): KnowledgeStyles {
-  return {
-    section: { width: "100%" as const, gap: compact ? 12 : 16 },
-    sectionHeader: { gap: 4 },
-    sectionTitle: {
-      color: theme.colors.foreground,
-      fontSize: compact ? 18 : 20,
-      fontWeight: "700" as const,
-    },
-    card: {
-      width: "100%" as const,
-      gap: 12,
-      padding: compact ? 12 : 16,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 12,
-      backgroundColor: theme.colors.surface1,
-    },
-    cardHeader: { gap: 3 },
-    cardTitle: { color: theme.colors.foreground, fontSize: 15, fontWeight: "700" as const },
-    muted: { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 17 },
-    scopeNote: { color: theme.colors.foregroundMuted, fontSize: 12, lineHeight: 17 },
-    field: { gap: 5 },
-    fieldLabel: {
-      color: theme.colors.foregroundMuted,
-      fontSize: 12,
-      fontWeight: "600" as const,
-    },
-    input: {
-      minHeight: 40,
-      width: "100%" as const,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 8,
-      paddingHorizontal: 11,
-      paddingVertical: 8,
-      color: theme.colors.foreground,
-      backgroundColor: theme.colors.surface0,
-      fontSize: 14,
-    },
-    placeholder: { color: theme.colors.foregroundMuted },
-    choiceRow: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 7 },
-    choice: {
-      minHeight: 36,
-      justifyContent: "center" as const,
-      paddingHorizontal: 11,
-      paddingVertical: 7,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 999,
-      backgroundColor: theme.colors.surface0,
-    },
-    choiceSelected: { borderColor: theme.colors.accent, backgroundColor: theme.colors.accent },
-    choiceText: { color: theme.colors.foreground, fontSize: 12, fontWeight: "600" as const },
-    choiceTextSelected: { color: theme.colors.accentForeground },
-    actions: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 8 },
-    button: {
-      minHeight: 38,
-      alignItems: "center" as const,
-      justifyContent: "center" as const,
-      paddingHorizontal: 13,
-      paddingVertical: 8,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 8,
-      backgroundColor: theme.colors.surface2,
-    },
-    primaryButton: { borderColor: theme.colors.accent, backgroundColor: theme.colors.accent },
-    dangerButton: {
-      borderColor: theme.colors.statusDanger,
-      backgroundColor: theme.colors.surface1,
-    },
-    disabled: { opacity: 0.5 },
-    buttonText: { color: theme.colors.foreground, fontSize: 13, fontWeight: "600" as const },
-    primaryButtonText: { color: theme.colors.accentForeground },
-    dangerButtonText: { color: theme.colors.statusDanger },
-    linkButton: {
-      minHeight: 38,
-      alignItems: "center" as const,
-      justifyContent: "center" as const,
-      paddingHorizontal: 13,
-      paddingVertical: 8,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 8,
-      backgroundColor: theme.colors.surface2,
-    },
-    linkText: { color: theme.colors.foreground, fontSize: 13, fontWeight: "600" as const },
-    pendingRow: { flexDirection: "row" as const, alignItems: "center" as const, gap: 8 },
-    activity: { color: theme.colors.accent },
-    error: { color: theme.colors.statusDanger, fontSize: 12, lineHeight: 17 },
-    result: {
-      gap: 7,
-      padding: 10,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 8,
-      backgroundColor: theme.colors.surface0,
-    },
-    metaRow: { flexDirection: "row" as const, alignItems: "flex-start" as const, gap: 8 },
-    metaLabel: { width: 58, color: theme.colors.foregroundMuted, fontSize: 11 },
-    metaValue: { flex: 1, color: theme.colors.foreground, fontSize: 11 },
-    outputFrame: { maxHeight: compact ? 160 : 220 },
-    output: {
-      color: theme.colors.foreground,
-      fontFamily: "monospace",
-      fontSize: compact ? 11 : 12,
-      lineHeight: compact ? 16 : 18,
-    },
-    confirmation: {
-      gap: 9,
-      padding: 11,
-      borderWidth: 1,
-      borderColor: theme.colors.statusDanger,
-      borderRadius: 8,
-      backgroundColor: theme.colors.surface0,
-    },
-    confirmationTitle: {
-      color: theme.colors.statusDanger,
-      fontSize: 13,
-      fontWeight: "700" as const,
-    },
-  };
+interface ForgetSourceButtonProps extends ForgetButtonProps {
+  source: string;
+}
+
+/** Forgets one indexed source from the project store. */
+export function ForgetSourceButton({ source, ...props }: ForgetSourceButtonProps) {
+  return <ForgetButton {...props} target={{ scope: "source", source }} />;
+}
+
+interface ForgetSessionButtonProps extends ForgetButtonProps {
+  sessionId: string;
+}
+
+/** Forgets one recorded session's events from the project store. */
+export function ForgetSessionButton({ sessionId, ...props }: ForgetSessionButtonProps) {
+  return <ForgetButton {...props} target={{ scope: "session", sessionId }} />;
 }