@yuangc/paseo-plugin-workspace-overview 0.0.0-stage → 1.0.0

package/client/components/PaseoToolDetail.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from "react";
+import { ScrollView, Text, View, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { PaseoAssistantMessage } from "./PaseoAssistantMessage";
+
+type ToolDetail = Record<string, any> & { type?: string };
+
+function text(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value == null) return "";
+  try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+}
+
+function CodePanel({ value, theme, diff = false }: { value: string; theme: PluginSurfaceProps["theme"]; diff?: boolean }) {
+  return <ScrollView style={{ maxHeight: 420, backgroundColor: theme.colors.surface1 }} nestedScrollEnabled>
+    <ScrollView horizontal nestedScrollEnabled contentContainerStyle={{ minWidth: "100%" }}>
+      <View style={{ minWidth: "100%", paddingHorizontal: 12, paddingVertical: 10 }}>
+        {value.split("\n").map((line, index) => {
+          const added = diff && line.startsWith("+") && !line.startsWith("+++");
+          const removed = diff && line.startsWith("-") && !line.startsWith("---");
+          return <Text key={index} selectable style={{ color: added ? theme.colors.statusSuccess : removed ? theme.colors.statusDanger : theme.colors.foreground, backgroundColor: added ? theme.colors.statusSuccess + "18" : removed ? theme.colors.statusDanger + "18" : "transparent", fontFamily: "monospace", fontSize: 12, lineHeight: 18 }}>{line || " "}</Text>;
+        })}
+      </View>
+    </ScrollView>
+  </ScrollView>;
+}
+
+export function PaseoToolDetail({ detail, theme }: { detail: ToolDetail; theme: PluginSurfaceProps["theme"] }) {
+  const styles = useMemo(() => ({
+    root: { gap: 8, backgroundColor: theme.colors.surface1, padding: 10 } as ViewStyle,
+    meta: { color: theme.colors.foregroundMuted, fontSize: 11, lineHeight: 16 } as TextStyle,
+    label: { color: theme.colors.foreground, fontSize: 12, fontWeight: "600" } as TextStyle,
+    result: { color: theme.colors.foreground, fontSize: 12, lineHeight: 18 } as TextStyle,
+    row: { gap: 3, paddingVertical: 4 } as ViewStyle,
+  }), [theme]);
+
+  if (detail.type === "plan") return <View style={styles.root}><PaseoAssistantMessage text={text(detail.text)} theme={theme} /></View>;
+  if (detail.type === "read" || detail.type === "write") {
+    const content = text(detail.content);
+    return <View style={styles.root}><Text selectable style={styles.meta}>{detail.filePath}{detail.offset != null ? ` · lines ${detail.offset}${detail.limit ? `–${detail.offset + detail.limit}` : ""}` : ""}</Text>{content ? <CodePanel value={content} theme={theme} /> : null}</View>;
+  }
+  if (detail.type === "edit") {
+    const diff = text(detail.unifiedDiff) || [text(detail.oldString).split("\n").map((line) => `-${line}`).join("\n"), text(detail.newString).split("\n").map((line) => `+${line}`).join("\n")].filter(Boolean).join("\n");
+    return <View style={styles.root}><Text selectable style={styles.meta}>{detail.filePath}</Text>{diff ? <CodePanel value={diff} theme={theme} diff /> : null}</View>;
+  }
+  if (detail.type === "search") {
+    const summary = [detail.numMatches != null ? `${detail.numMatches} matches` : null, detail.numFiles != null ? `${detail.numFiles} files` : null, detail.durationMs != null ? `${detail.durationMs}ms` : detail.durationSeconds != null ? `${detail.durationSeconds}s` : null, detail.truncated ? "truncated" : null].filter(Boolean).join(" · ");
+    return <View style={styles.root}><Text selectable style={styles.meta}>{detail.query}{summary ? ` · ${summary}` : ""}</Text>{detail.filePaths?.map((path: string) => <Text key={path} selectable style={styles.result}>{path}</Text>)}{detail.webResults?.map((result: { title: string; url: string }) => <View key={result.url} style={styles.row}><Text style={styles.label}>{result.title}</Text><Text selectable style={styles.meta}>{result.url}</Text></View>)}{detail.content ? <CodePanel value={text(detail.content)} theme={theme} /> : null}</View>;
+  }
+  if (detail.type === "fetch") return <View style={styles.root}><Text selectable style={styles.meta}>{detail.url}{detail.code != null ? ` · ${detail.code}${detail.codeText ? ` ${detail.codeText}` : ""}` : ""}{detail.bytes != null ? ` · ${detail.bytes} bytes` : ""}</Text>{detail.prompt ? <Text selectable style={styles.label}>{detail.prompt}</Text> : null}{detail.result ? <Text selectable style={styles.result}>{detail.result}</Text> : null}</View>;
+  if (detail.type === "plain_text") return <View style={styles.root}>{detail.label ? <Text style={styles.label}>{detail.label}</Text> : null}<Text selectable style={styles.result}>{text(detail.text)}</Text></View>;
+  if (detail.type === "sub_agent") return <View style={styles.root}>{detail.description ? <Text selectable style={styles.label}>{detail.description}</Text> : null}{detail.actions?.map((action: { index: number; toolName: string; summary?: string }) => <Text key={action.index} selectable style={styles.meta}>{action.index + 1}. {action.toolName}{action.summary ? ` · ${action.summary}` : ""}</Text>)}{detail.log ? <CodePanel value={text(detail.log)} theme={theme} /> : null}</View>;
+  if (detail.type === "worktree_setup") return <View style={styles.root}><Text selectable style={styles.meta}>{detail.branchName} · {detail.worktreePath}</Text>{detail.commands?.map((command: { index: number; command: string; status: string; exitCode?: number | null }) => <Text key={command.index} selectable style={{ color: command.status === "failed" ? theme.colors.statusDanger : theme.colors.foreground, fontFamily: "monospace", fontSize: 12 }}>{command.status === "completed" ? "✓" : command.status === "failed" ? "✕" : "○"} {command.command}{command.exitCode != null ? ` (${command.exitCode})` : ""}</Text>)}{detail.log ? <CodePanel value={text(detail.log)} theme={theme} /> : null}</View>;
+  return <View style={styles.root}><CodePanel value={text(detail)} theme={theme} /></View>;
+}

package/client/components/ProjectCard.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useMemo } from "react";
+import { Text, TouchableOpacity, View, type ViewStyle, type TextStyle } from "react-native";
+import { type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { type WorkspaceEntry, type AgentEntry, type ProjectCardProps } from "../../shared/overview-types";
+import { BranchRow } from "./BranchRow";
+import { AgentRow } from "./AgentRow";
+
+const CARD_GAP = 12;
+
+/** Decide whether an agent should auto-expand its surroundings on first view. */
+function shouldAutoExpandAgent(agent: AgentEntry): boolean {
+  return (
+    agent.status === "running" ||
+    agent.status === "error" ||
+    agent.requiresAttention === true
+  );
+}
+
+export function ProjectCard({
+  projectId,
+  projectDisplayName,
+  workspaces,
+  agentsByWorkspace,
+  expanded,
+  cardExpanded,
+  onToggleCard,
+  onToggleBranch,
+  onOpenDirectory,
+  theme,
+  compact,
+  width,
+  hostLabel,
+  hostId,
+  onCreateWorktree,
+  onCreateAgent,
+  onSelectAgent,
+}: ProjectCardProps) {
+  // Card-level expand: explicit user toggle wins; otherwise auto-expand when
+  // any branch contains a running/errored/attention agent.
+  // Derive only the agents arrays relevant to this project's workspaces,
+  // avoiding a dependency on the entire agentsByWorkspace Map.
+  const projectAgentsArrays = useMemo(
+    () => workspaces.map((ws) => agentsByWorkspace.get(ws.id) ?? []),
+    [workspaces, agentsByWorkspace],
+  );
+
+  const cardIsExpanded = useMemo(() => {
+    const explicit = cardExpanded[projectId];
+    if (explicit !== undefined) return explicit;
+    return projectAgentsArrays.some((agents) => agents.some(shouldAutoExpandAgent));
+  }, [cardExpanded, projectId, projectAgentsArrays]);
+
+  const toggleCard = useCallback(
+    () => onToggleCard(projectId, cardIsExpanded),
+    [onToggleCard, projectId, cardIsExpanded],
+  );
+  const styles = useMemo(
+    () =>
+      ({
+        card: {
+          width,
+          backgroundColor: theme.colors.surface0,
+          borderRadius: 12,
+          overflow: "hidden" as const,
+          marginBottom: CARD_GAP,
+          borderWidth: 1,
+          borderColor: theme.colors.foregroundMuted + "33",
+          shadowColor: "#000",
+          shadowOpacity: 0.1,
+          shadowRadius: 12,
+          shadowOffset: { width: 0, height: 6 },
+          elevation: 3,
+        } as ViewStyle,
+        header: {
+          flexDirection: "row" as const,
+          alignItems: "center" as const,
+          justifyContent: "space-between" as const,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          backgroundColor: theme.colors.foregroundMuted + "14",
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.foregroundMuted + "26",
+        } as ViewStyle,
+        headerChevron: {
+          width: 16,
+          marginRight: 4,
+          alignItems: "center" as const,
+          justifyContent: "center" as const,
+        } as ViewStyle,
+        title: {
+          color: theme.colors.foreground,
+          fontSize: 15,
+          fontWeight: "600" as const,
+          flex: 1,
+        } as TextStyle,
+        counter: {
+          color: theme.colors.foregroundMuted,
+          fontSize: 11,
+          marginLeft: 8,
+        } as TextStyle,
+        createBtn: {
+          width: 26,
+          height: 26,
+          alignItems: "center" as const,
+          justifyContent: "center" as const,
+          marginLeft: 8,
+        } as ViewStyle,
+        body: {
+          paddingVertical: 0,
+        } as ViewStyle,
+        divider: {
+          height: 1,
+          backgroundColor: theme.colors.foregroundMuted + "14",
+          marginLeft: 12,
+        } as ViewStyle,
+      }),
+    [theme, width],
+  );
+
+  const totalAgents = useMemo(
+    () => workspaces.reduce((sum, ws) => sum + (agentsByWorkspace.get(ws.id)?.length ?? 0), 0),
+    [workspaces, agentsByWorkspace],
+  );
+
+  return (
+    <View style={styles.card}>
+      <TouchableOpacity onPress={toggleCard} activeOpacity={0.7}>
+        <View style={styles.header}>
+          <View style={styles.headerChevron}>
+            <Icon name={cardIsExpanded ? "ChevronDown" : "ChevronRight"} color={theme.colors.foregroundMuted} size={10} />
+          </View>
+          <Text style={styles.title} numberOfLines={1}>
+            {projectDisplayName}
+          </Text>
+          <Text style={styles.counter}>
+            {workspaces.length} branch{workspaces.length !== 1 ? "es" : ""}
+            {totalAgents > 0 ? ` · ${totalAgents} agent${totalAgents !== 1 ? "s" : ""}` : ""}
+          </Text>
+          {onCreateWorktree ? (
+            <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel={`为 ${projectDisplayName} 新建 workspace`}
+              style={styles.createBtn}
+              onPress={(event) => {
+                event.stopPropagation();
+                onCreateWorktree();
+              }}
+              hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+            >
+              <Icon name="Plus" color={theme.colors.foregroundMuted} size={18} />
+            </TouchableOpacity>
+          ) : null}
+        </View>
+      </TouchableOpacity>
+      {cardIsExpanded && (
+        <View style={styles.body}>
+        {workspaces.map((ws, idx) => {
+          const wsAgents = agentsByWorkspace.get(ws.id) ?? [];
+          // If the user hasn't manually toggled this branch yet (undefined),
+          // auto-expand when it contains a running/errored/attention agent.
+          const explicit = expanded[ws.id];
+          const isExpanded = explicit !== undefined ? explicit : wsAgents.some(shouldAutoExpandAgent);
+          return (
+            <View key={ws.id}>
+              {idx > 0 && <View style={styles.divider} />}
+              <BranchRow
+                workspace={ws}
+                agents={wsAgents}
+                expanded={isExpanded}
+                onToggle={() => onToggleBranch(ws.id, isExpanded)}
+                onOpenDirectory={() => onOpenDirectory(ws.workspaceDirectory)}
+                onCreateAgent={() => onCreateAgent(ws)}
+                theme={theme}
+                compact={compact}
+                hostLabel={hostLabel}
+              />
+              {isExpanded &&
+                wsAgents.map((agent) => (
+                  <AgentRow key={agent.id} agent={agent} theme={theme} compact={compact} onSelect={() => onSelectAgent(agent)} />
+                ))}
+              {isExpanded && wsAgents.length === 0 && (
+                <View style={{ paddingLeft: 32, paddingRight: 12, paddingVertical: 6 }}>
+                  <Text style={{ color: theme.colors.foregroundMuted, fontSize: 11 }}>
+                    No agents in this branch.
+                  </Text>
+                </View>
+              )}
+            </View>
+          );
+        })}
+        </View>
+      )}
+    </View>
+  );
+}

package/client/components/ProjectIcon.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+export function ProjectIcon({
+  dataUri,
+  label,
+  size = 18,
+  theme,
+}: {
+  dataUri?: string | null;
+  label: string;
+  size?: number;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  if (dataUri) {
+    return (
+      <View
+        style={
+          {
+            width: size,
+            height: size,
+            borderRadius: 4,
+            backgroundImage: `url("${dataUri}")`,
+            backgroundSize: "contain",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+          } as never
+        }
+      />
+    );
+  }
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: 4,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: theme.colors.foregroundMuted + "20",
+      }}
+    >
+      <Text style={{ color: theme.colors.foreground, fontSize: 10, lineHeight: 14, fontWeight: "600" }}>
+        {label.trim().charAt(0).toUpperCase() || "?"}
+      </Text>
+    </View>
+  );
+}

package/client/components/ProviderBrandIcon.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Platform, View } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+
+interface ProviderBrandIconProps {
+  providerId: string;
+  size?: number;
+  color: string;
+}
+
+const PROVIDER_SVGS: Record<string, { viewBox: string; body: string }> = {
+  claude: {
+    viewBox: "0 0 24 24",
+    body: '<path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/>',
+  },
+  codex: {
+    viewBox: "0 0 24 24",
+    body: '<path fill-rule="evenodd" d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"/>',
+  },
+  minimax: { viewBox: "0 0 24 24", body: '<path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z"/>' },
+  omp: { viewBox: "4 4 56 56", body: '<path d="M10 14h44v9H43v33h-9V23h-9v22h-9V23H10z"/>' },
+  opencode: { viewBox: "96 64 288 384", body: '<path d="M320 224V352H192V224H320Z" opacity=".4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z"/>' },
+  pi: { viewBox: "100 100 600 600", body: '<path fill-rule="evenodd" d="M165.29 165.29 H517.36 V400 H400 V517.36 H282.65 V634.72 H165.29 Z M282.65 282.65 V400 H400 V282.65 Z"/><path d="M517.36 400 H634.72 V634.72 H517.36 Z"/>' },
+};
+
+export function ProviderBrandIcon({ providerId, size = 16, color }: ProviderBrandIconProps) {
+  const normalized = providerId.toLowerCase();
+  const definition =
+    PROVIDER_SVGS[normalized] ??
+    (normalized.includes("codex") || normalized.includes("openai") ? PROVIDER_SVGS.codex : null) ??
+    (normalized.includes("claude") || normalized.includes("anthropic") ? PROVIDER_SVGS.claude : null);
+  if (!definition || Platform.OS !== "web") {
+    return <Icon name="Bot" color={color} size={size} />;
+  }
+  const xml = `<svg viewBox="${definition.viewBox}" fill="black" xmlns="http://www.w3.org/2000/svg">${definition.body}</svg>`;
+  return (
+    <View
+      style={
+        {
+          width: size,
+          height: size,
+          flexShrink: 0,
+          backgroundColor: color,
+          WebkitMaskImage: `url("data:image/svg+xml,${encodeURIComponent(xml)}")`,
+          WebkitMaskSize: "contain",
+          WebkitMaskRepeat: "no-repeat",
+          WebkitMaskPosition: "center",
+        } as never
+      }
+    />
+  );
+}

package/client/components/ResizeHandle.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from "react";
+import { View, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { useResizableWidth } from "../hooks/useResizableWidth";
+
+export interface ResizeHandleProps {
+  theme: PluginSurfaceProps["theme"];
+  initialWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** Position the handle on the left or right edge of the panel. */
+  side?: "left" | "right";
+  /** Visual style: "grip" shows a vertical bar, "line" shows a thin line. */
+  variant?: "grip" | "line";
+  /** Additional style applied to the panel container. */
+  style?: ViewStyle;
+  children: React.ReactNode;
+}
+
+/**
+ * A panel wrapper with a built-in drag-to-resize handle.
+ *
+ * Uses `useResizableWidth` internally. During drag, width is written directly
+ * to the DOM to avoid React re-renders. The committed width is exposed via
+ * the render context if needed.
+ *
+ * Usage:
+ * ```tsx
+ * <ResizeHandle theme={theme} side="left" initialWidth={420} minWidth={320} maxWidth={720}>
+ *   <PanelContent />
+ * </ResizeHandle>
+ * ```
+ */
+export function ResizeHandle({
+  theme,
+  initialWidth = 420,
+  minWidth = 320,
+  maxWidth = 720,
+  side = "left",
+  variant = "grip",
+  style,
+  children,
+}: ResizeHandleProps) {
+  const { width, isDragging, isHovered, panelRef, onPointerDown, onPointerEnter, onPointerLeave } =
+    useResizableWidth({ initialWidth, minWidth, maxWidth, direction: side });
+
+  const active = isDragging || isHovered;
+  const color = isDragging
+    ? theme.colors.accent
+    : isHovered
+      ? theme.colors.foregroundMuted
+      : theme.colors.foregroundMuted + "55";
+  const bg = active ? theme.colors.foregroundMuted + "15" : "transparent";
+
+  const styles = useMemo(() => {
+    const handle: ViewStyle = {
+      position: "absolute",
+      [side]: -8,
+      top: 0,
+      bottom: 0,
+      width: 16,
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 10,
+    };
+    const bar: ViewStyle =
+      variant === "grip"
+        ? { width: 3, height: 22, borderRadius: 1.5, backgroundColor: color }
+        : { width: 2, flex: 1, borderRadius: 1, backgroundColor: color };
+    return {
+      panel: { width, ...style } as ViewStyle,
+      handle: { ...handle, cursor: "ew-resize" } as unknown as ViewStyle,
+      bar,
+      bg: { backgroundColor: bg } as ViewStyle,
+    };
+  }, [width, side, variant, color, bg, style]);
+
+  return (
+    <View ref={panelRef} style={styles.panel}>
+      <View
+        style={[styles.handle, styles.bg]}
+        onPointerDown={onPointerDown}
+        onPointerEnter={onPointerEnter as () => void}
+        onPointerLeave={onPointerLeave as () => void}
+      >
+        <View style={styles.bar} />
+      </View>
+      {children}
+    </View>
+  );
+}