Function bodies 465 total

def color_at(t):
    """Gradient from deep crimson to warm amber-gold."""
    r = int(lerp(148, 235, t))
    g = int(lerp(30, 155, t))
    b = int(lerp(35, 30, t))
    return (r, g, b, 255)

def draw_round_line(draw, start, end, width, color):
    """Draw a thick line with round end caps."""
    draw.line([start, end], fill=color, width=width)
    r = width // 2
    for pt in [start, end]:
        draw.ellipse(
            [pt[0] - r, pt[1] - r, pt[0] + r, pt[1] + r],
            fill=color,
        )

def draw_chevron(draw, tip_x, tip_y, arm_len, half_angle_deg, thickness, color):
    """Draw a right-pointing chevron '>' with round caps.

    tip_x, tip_y: the rightmost point of the chevron
    arm_len: length of each arm
    half_angle_deg: angle of each arm from horizontal
    """
    angle = math.radians(half_angle_deg)

    # Upper arm goes from tip up-left
    upper_end = (
        tip_x - arm_len * math.cos(angle),
        tip_y - arm_len * math.sin(angle),
    )
    # Lower arm goes from tip down-left
    lower_end = (
        tip_x - arm_len * math.cos(angle),
        tip_y + arm_len * math.sin(angle),
    )

    tip = (tip_x, tip_y)
    draw_round_line(draw, upper_end, tip, thickness, color)
    draw_round_line(draw, tip, lower_end, thickness, color)

def create_icon(size=SIZE):
    img = Image.new('RGBA', (size, size), (0, 0, 0, 0))

    pad = int(size * 0.039)
    corner = int(size * 0.185)

    # --- Gradient background ---
    grad = Image.new('RGBA', (size, size), (0, 0, 0, 0))
    for y in range(size):
        for x in range(size):
            t = (x + y) / (2 * size)
            grad.putpixel((x, y), color_at(t))

    # Rounded-rect mask
    mask = Image.new('L', (size, size), 0)
    md = ImageDraw.Draw(mask)
    md.rounded_rectangle([pad, pad, size - pad - 1, size - pad - 1], radius=corner, fill=255)
    grad.putalpha(mask)
    img = Image.alpha_composite(img, grad)

    # --- Three bold chevrons pointing right ---
    overlay = Image.new('RGBA', (size, size), (0, 0, 0, 0))
    odraw = ImageDraw.Draw(overlay)

    s = size / 512
    center_y = int(256 * s)
    thickness = int(42 * s)

    # Back chevron (leftmost, most transparent)
    draw_chevron(
        odraw,
        tip_x=int(255 * s), tip_y=center_y,
        arm_len=i

def main():
    print("Generating 1024x1024 master icon...")
    icon = create_icon(1024)

    master_path = os.path.join(ICON_DIR, 'icon.png')
    icon.save(master_path, 'PNG')
    print(f"  Saved {master_path}")

    sizes = {
        '32x32.png': 32,
        '128x128.png': 128,
        '[email protected]': 256,
        'Square30x30Logo.png': 30,
        'Square44x44Logo.png': 44,
        'Square71x71Logo.png': 71,
        'Square89x89Logo.png': 89,
        'Square107x107Logo.png': 107,
        'Square142x142Logo.png': 142,
        'Square150x150Logo.png': 150,
        'Square284x284Logo.png': 284,
        'Square310x310Logo.png': 310,
        'StoreLogo.png': 50,
    }

    for filename, sz in sizes.items():
        resized = icon.resize((sz, sz), Image.LANCZOS)
        path = os.path.join(ICON_DIR, filename)
        resized.save(path, 'PNG')
        print(f"  {filename} ({sz}x{sz})")

    # .icns
    print("Generating .icns...")
    iconset_dir = os.path.join(ICON_DIR, 'icon.iconset')

function wsClamp(v: number, lo: number, hi: number) {
  return Math.max(lo, Math.min(hi, v));
}

function wsAutoScroll(listEl: HTMLElement | null, pointerY: number) {
  if (!listEl) return;
  const r = listEl.getBoundingClientRect();
  if (pointerY < r.top + WS_DRAG_SCROLL_EDGE) {
    const s = (r.top + WS_DRAG_SCROLL_EDGE - pointerY) / WS_DRAG_SCROLL_EDGE;
    listEl.scrollTop -= Math.ceil(s * WS_DRAG_MAX_SCROLL_STEP);
  } else if (pointerY > r.bottom - WS_DRAG_SCROLL_EDGE) {
    const s =
      (pointerY - (r.bottom - WS_DRAG_SCROLL_EDGE)) / WS_DRAG_SCROLL_EDGE;
    listEl.scrollTop += Math.ceil(s * WS_DRAG_MAX_SCROLL_STEP);
  }
}

function wsInsertIndex(
  ids: string[],
  dragId: string,
  refs: Map<string, HTMLDivElement>,
  pointerY: number,
) {
  if (ids.length <= 1) return 0;
  let idx = 0;
  for (const id of ids) {
    if (id === dragId) continue;
    const el = refs.get(id);
    if (!el) continue;
    const r = el.getBoundingClientRect();
    if (pointerY > r.top + r.height / 2) idx++;
  }
  return wsClamp(idx, 0, ids.length - 1);
}

function WorkspacePicker({ onSelect }: { onSelect: (id: string) => void }) {
  const workspaces = useWorkspaceStore((s) => s.workspaces);
  const activeWorkspaceId = useWorkspaceStore((s) => s.activeWorkspaceId);
  const renameWorkspace = useWorkspaceStore((s) => s.renameWorkspace);
  const removeWorkspace = useWorkspaceStore((s) => s.removeWorkspace);
  const reorderWorkspace = useWorkspaceStore((s) => s.reorderWorkspace);
  const [showAddModal, setShowAddModal] = useState(false);
  const [renamingId, setRenamingId] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState("");
  const renameInputRef = useRef<HTMLInputElement>(null);

  // Drag reorder state
  const [draggingId, setDraggingId] = useState<string | null>(null);
  const [dragToIndex, setDragToIndex] = useState<number | null>(null);
  const [dragOffsetY, setDragOffsetY] = useState(0);
  const [dragItemHeight, setDragItemHeight] = useState(0);
  const listRef = useRef<HTMLDivElement>(null);
  const 

function ThemeIcon({ t, size = 18 }: { t: ThemeName; size?: number }) {
  if (t === "light")
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" />
        <path
          d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
      </svg>
    );
  if (t === "dimmed")
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" />
        <path
          d="M12 2v3M12 19v3M2 12h3M19 12h3"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
      </svg>
    );
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path
        d="M21 

function ThemeCycleButton() {
  const theme = useWorkspaceStore((s) => s.theme);
  const setTheme = useWorkspaceStore((s) => s.setTheme);

  const toggle = () => {
    setTheme(theme === "dark" ? "dimmed" : "dark");
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 4 }}>
      <button
        className="activity-btn"
        style={{
          background: "none",
          border: "none",
          cursor: "pointer",
          width: 32,
          height: 32,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: 4,
          color: "var(--text-secondary)",
          padding: 0,
        }}
        onClick={toggle}
        title={theme === "dark" ? "Switch to Dimmed" : "Switch to Dark"}
      >
        <ThemeIcon t={theme} />
      </button>
    </div>
  );
}

export function AddWorkspaceModal({ onClose }: AddWorkspaceModalProps) {
  const { addWorkspace, workspaces } = useWorkspaceStore();
  const [name, setName] = useState("");
  const [paths, setPaths] = useState<string[]>([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const trimmedName = name.trim();
  const nameExists = trimmedName
    ? workspaces.some((ws) => ws.name.toLowerCase() === trimmedName.toLowerCase())
    : false;

  async function handleAddDirectory() {
    const selected = await open({ directory: true, multiple: false });
    if (selected) {
      const dir = selected as string;
      if (paths.includes(dir)) return; // avoid duplicates
      setPaths((prev) => [...prev, dir]);
      // Auto-fill name from first folder
      if (!name) {
        const folderName = dir.split("/").pop();
        if (folderName) setName(folderName);
      }
    }
  }

  function handleRemovePath(index: number) {
    setPaths((prev) => prev.f

  async function handleAddDirectory() {
    const selected = await open({ directory: true, multiple: false });
    if (selected) {
      const dir = selected as string;
      if (paths.includes(dir)) return; // avoid duplicates
      setPaths((prev) => [...prev, dir]);
      // Auto-fill name from first folder
      if (!name) {
        const folderName = dir.split("/").pop();
        if (folderName) setName(folderName);
      }
    }
  }

  function handleRemovePath(index: number) {
    setPaths((prev) => prev.filter((_, i) => i !== index));
  }

  async function handleSubmit() {
    if (!name.trim() || paths.length === 0) {
      setError("Name and at least one directory are required");
      return;
    }
    setLoading(true);
    setError("");
    try {
      await addWorkspace({
        name: name.trim(),
        paths,
      });
      onClose();
    } catch (e: any) {
      setError(String(e));
    } finally {
      setLoading(false);
    }
  }

function StopActionIcon() {
  return (
    <svg
      width="13"
      height="13"
      viewBox="0 0 13 13"
      fill="none"
      aria-hidden="true"
      style={{ display: "block" }}
    >
      <rect x="2" y="2" width="9" height="9" rx="1.5" fill="currentColor" />
    </svg>
  );
}

function RestartActionIcon() {
  return (
    <svg
      width="11"
      height="11"
      viewBox="0 0 12 12"
      fill="none"
      aria-hidden="true"
      style={{ display: "block" }}
    >
      <path
        d="M1.5 6a4.5 4.5 0 0 1 8.18-2.6"
        stroke="currentColor"
        strokeWidth="1.2"
        strokeLinecap="round"
      />
      <path
        d="M10.5 6a4.5 4.5 0 0 1-8.18 2.6"
        stroke="currentColor"
        strokeWidth="1.2"
        strokeLinecap="round"
      />
      <path
        d="M9 1.5L9.7 3.4L7.8 3.4"
        stroke="currentColor"
        strokeWidth="1.1"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M3 10.5L2.3 8.6L4.2 8.6"
        stroke="currentColor"
        strokeWidth="1.1"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function BuildStatusBar() {
  const activeWorkspaceId = useWorkspaceStore((s) => s.activeWorkspaceId);
  const workspacePathsStr = useWorkspaceStore((s) => {
    const ws = s.workspaces.find((w) => w.id === s.activeWorkspaceId);
    return ws?.paths?.join("\n") ?? "";
  });
  const workspacePaths = useMemo(
    () => (workspacePathsStr ? workspacePathsStr.split("\n") : []),
    [workspacePathsStr],
  );
  const rallyConfigs = useWorkspaceStore((s) => s.rallyConfigs);
  const scriptRuns = useWorkspaceStore((s) => s.scriptRuns);
  const runScript = useWorkspaceStore((s) => s.runScript);
  const stopScript = useWorkspaceStore((s) => s.stopScript);
  const clearScript = useWorkspaceStore((s) => s.clearScript);
  const openStatusBarDrawer = useWorkspaceStore((s) => s.openStatusBarDrawer);
  const statusBarDrawer = useWorkspaceStore((s) => s.statusBarDrawer);
  const detectedPorts = useDetectedPorts(activeWorkspaceId);
  const openWebView = useWorkspaceStore((s) => s.openWebView);

  

export function BuildStatusDrawer() {
  const drawer = useWorkspaceStore((s) => s.statusBarDrawer);
  const closeStatusBarDrawer = useWorkspaceStore((s) => s.closeStatusBarDrawer);
  const stopScript = useWorkspaceStore((s) => s.stopScript);
  const clearScript = useWorkspaceStore((s) => s.clearScript);
  const scriptRuns = useWorkspaceStore((s) => s.scriptRuns);
  const theme = useWorkspaceStore((s) => s.theme);

  const panelRef = useRef<HTMLDivElement>(null);
  const termRef = useRef<HTMLDivElement>(null);
  const xtermRef = useRef<XTerminal | null>(null);
  const fitAddonRef = useRef<FitAddon | null>(null);
  const [height, setHeight] = useState(233);
  const [pinned, setPinned] = useState(false);
  const dragging = useRef(false);

  // Slide animation state
  const [animState, setAnimState] = useState<"hidden" | "entering" | "visible" | "exiting">("hidden");
  const prevDrawerRef = useRef(drawer);

  useEffect(() => {
    let raf1 = 0;
    let raf2 = 0;
    let timer: ReturnType<t

function shortenPath(p: string): string {
  return p.replace(/^\/Users\/[^/]+/, "~");
}

function folderName(p: string): string {
  return p.split("/").pop() || p;
}

    function handleClick(e: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }

export function ClaudeTerminalWrapper({ cwd, command, initialInput, ptyId, workspaceId, onPtySpawned, onCwdChanged, onFileOpen }: ClaudeTerminalWrapperProps) {
  const [ready, setReady] = useState(!!ptyId);
  const containerRef = useRef<HTMLDivElement>(null);
  const ptyArrivedRef = useRef(!!ptyId);
  const minElapsedRef = useRef(!!ptyId);

  // Track when ptyId arrives
  useEffect(() => {
    if (ptyId) ptyArrivedRef.current = true;
  }, [ptyId]);

  // Minimum overlay duration — always show at least MIN_OVERLAY_MS
  useEffect(() => {
    if (ready) return;
    const timer = setTimeout(() => {
      minElapsedRef.current = true;
      if (ptyArrivedRef.current) setReady(true);
    }, MIN_OVERLAY_MS);
    return () => clearTimeout(timer);
  }, [ready]);

  // When ptyId arrives after min elapsed, dismiss overlay
  useEffect(() => {
    if (ready || !ptyId) return;
    if (minElapsedRef.current) {
      setReady(true);
    }
  }, [ptyId, ready]);

  // Max overlay fallback — dismiss aft

export function CommitModal({
  open,
  onClose,
  rootPath,
  branch,
  stagedCount,
  unstagedCount,
  additions,
  deletions,
  onCommitted,
  anchorRef,
  hasPr,
}: CommitModalProps) {
  const [commitMsg, setCommitMsg] = useState("");
  const [nextStep, setNextStep] = useState<NextStep>("commit");
  const [includeUnstaged, setIncludeUnstaged] = useState(true);
  const [running, setRunning] = useState(false);
  const [visible, setVisible] = useState(false);
  const [cardPos, setCardPos] = useState<{ top: number; right: number } | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const backdropRef = useRef<HTMLDivElement>(null);

  // Animate in + compute anchor position
  useEffect(() => {
    if (open) {
      setCommitMsg("");
      setNextStep("commit");
      setIncludeUnstaged(true);
      requestAnimationFrame(() => {
        if (anchorRef?.current && backdropRef.current) {
          const btnRect = anchorRef.current.getBoundingClientRect();
          con

  function renderModal() {

  const radioOptions: { value: NextStep; icon: React.ReactNode; label: string; sub?: string }[] = [
    {
      value: "commit",
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.5"/>
          <line x1="0" y1="8" x2="5" y2="8" stroke="currentColor" strokeWidth="1.5"/>
          <line x1="11" y1="8" x2="16" y2="8" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      ),
      label: "Commit",
    },
    {
      value: "commit-push",
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M8 12V4M5 7l3-3 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      label: "Commit and push",
    },
    // Only show "Create PR" option when no PR exists yet
    ...(!hasPr ? [{
      value: "commit-pr" as NextStep,
      icon: (
        <svg wi

function buildSegments(hunks: DiffHunk[], totalOldLines?: number): DisplaySegment[] {
  if (hunks.length === 0) return [];

  const segments: DisplaySegment[] = [];

  for (let hi = 0; hi < hunks.length; hi++) {
    const hunk = hunks[hi];
    const prevHunk = hi > 0 ? hunks[hi - 1] : null;

    // Compute unmodified gap before this hunk
    if (hi === 0 && hunk.oldStart > 1) {
      // Gap before first hunk: lines 1..(oldStart - 1) minus the leading context
      const contextCount = hunk.lines.findIndex((l) => l.type !== "context");
      const leadingContext = contextCount === -1 ? hunk.lines.length : contextCount;
      const gap = hunk.oldStart - 1 - leadingContext;
      if (gap > 0) {
        segments.push({ type: "unmodified", lineCount: gap, position: "top" });
      }
    } else if (prevHunk) {
      // Gap between hunks
      const prevEnd = computeHunkOldEnd(prevHunk);
      // Leading context of current hunk
      const contextCount = hunk.lines.findIndex((l) => l.type !==

function computeHunkOldEnd(hunk: DiffHunk): number {
  let count = 0;
  for (const line of hunk.lines) {
    if (line.type === "context" || line.type === "delete") count++;
  }
  return hunk.oldStart + count;
}

export function DiffFileView({
  hunks,
  filePath,
}: DiffFileViewProps) {
  const lang = useMemo(() => getLangForPath(filePath), [filePath]);
  const segments = useMemo(() => buildSegments(hunks), [hunks]);

  if (segments.length === 0) return null;

  return (
    <div style={styles.container}>
      {segments.map((seg, i) => {
        if (seg.type === "unmodified") {
          return (
            <UnmodifiedBar
              key={`unmod-${i}`}
              lineCount={seg.lineCount}
              position={seg.position}
            />
          );
        }
        if (seg.type === "change-group") {
          return (
            <ChangeGroup
              key={`cg-${i}`}
              lines={seg.lines}
              lang={lang}
            />
          );
        }
        // context
        return (
          <ContextLines key={`ctx-${i}`} lines={seg.lines} lang={lang} />
        );
      })}
    </div>
  );
}

function UnmodifiedBar({
  lineCount,
  position,
}: {
  lineCount: number;
  position: "top" | "middle" | "bottom";
}) {
  return (
    <div style={styles.unmodifiedBar}>
      <svg width="12" height="12" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, opacity: 0.5 }}>
        {position === "top" ? (
          <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        ) : position === "bottom" ? (
          <path d="M4 10l4-4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        ) : (
          <>
            <path d="M4 5l4-3 4 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M4 11l4 3 4-3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
          </>
        )}
      </svg>
      <span>{lineCount} unmodified line{lineCount !== 1 ? "s" : ""}</span>
    </div>
  );
}

function ChangeGroup({
  lines,
  lang,
}: {
  lines: DiffLine[];
  lang: string | null;
}) {
  return (
    <div style={styles.changeGroup}>
      {lines.map((line, i) => (
        <DiffLineRow key={i} line={line} lang={lang} />
      ))}
    </div>
  );
}

function ContextLines({
  lines,
  lang,
}: {
  lines: DiffLine[];
  lang: string | null;
}) {
  return (
    <>
      {lines.map((line, i) => (
        <DiffLineRow key={i} line={line} lang={lang} />
      ))}
    </>
  );
}

function DiffLineRow({
  line,
  lang,
}: {
  line: DiffLine;
  lang: string | null;
}) {
  const bg =
    line.type === "add"
      ? "rgba(63, 185, 80, 0.12)"
      : line.type === "delete"
        ? "rgba(248, 81, 73, 0.12)"
        : "transparent";
  const lineNum =
    line.type === "add"
      ? line.newLineNumber
      : line.oldLineNumber;
  const barColor =
    line.type === "add"
      ? "rgba(63, 185, 80, 0.55)"
      : line.type === "delete"
        ? "rgba(248, 81, 73, 0.55)"
        : "transparent";

  return (
    <div style={{ ...styles.line, background: bg }}>
      <span style={{ ...styles.bar, background: barColor }} />
      <span style={styles.lineNum}>{lineNum ?? ""}</span>
      <span
        style={styles.lineContent}
        dangerouslySetInnerHTML={{
          __html: highlightLine(line.content, lang),
        }}
      />
    </div>
  );
}

function getLanguageFromPath(path: string): string {
  const name = path.split("/").pop()?.toLowerCase() ?? "";
  if (name === "dockerfile") return "dockerfile";
  if (name === "makefile") return "makefile";
  const ext = name.split(".").pop() ?? "";
  const map: Record<string, string> = {
    ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
    rs: "rust", json: "json", md: "markdown", css: "css", html: "html",
    toml: "toml", yaml: "yaml", yml: "yaml", py: "python", go: "go",
    sh: "shell", sql: "sql", xml: "xml",
  };
  return map[ext] ?? "plaintext";
}

function toRepoRelativePath(rootPath: string, filePath: string): string {
  if (filePath.startsWith(rootPath + "/")) {
    return filePath.slice(rootPath.length + 1);
  }
  return filePath;
}

export function DiffView({
  rootPath,
  filePath,
  isUntracked,
  isActive = true,
}: DiffViewProps) {
  const appTheme = useWorkspaceStore((s) => s.theme);
  const [original, setOriginal] = useState("");
  const [modified, setModified] = useState("");
  const [loading, setLoading] = useState(true);
  const [changeKind, setChangeKind] = useState<ChangeKind>(null);
  const [actionBusy, setActionBusy] = useState<null | "stage" | "unstage" | "discard">(null);
  const [reloadToken, setReloadToken] = useState(0);
  const repoFilePath = useMemo(
    () => toRepoRelativePath(rootPath, filePath),
    [rootPath, filePath]
  );

  const showError = useCallback((title: string, e: unknown) => {
    addToast({
      type: "warning",
      title,
      message: String(e),
    });
  }, []);

  const doAction = useCallback(
    async (
      kind: "stage" | "unstage" | "discard",
      action: () => Promise<void>
    ) => {
      setActionBusy(kind);
      try {
        await action();
        docum

function getDropPosition(
  rect: DOMRect,
  mx: number,
  my: number
): DropPosition | null {
  const x = mx - rect.left;
  const y = my - rect.top;
  const w = rect.width;
  const h = rect.height;
  if (w <= 0 || h <= 0) return null;

  const rx = x / w; // 0..1
  const ry = y / h; // 0..1

  // Edge threshold (25% from each edge)
  const t = 0.25;

  if (ry < t && rx > t && rx < 1 - t) return "top";
  if (ry > 1 - t && rx > t && rx < 1 - t) return "bottom";
  if (rx < t && ry > t && ry < 1 - t) return "left";
  if (rx > 1 - t && ry > t && ry < 1 - t) return "right";
  if (rx >= t && rx <= 1 - t && ry >= t && ry <= 1 - t) return "center";

  // Corner regions — assign to nearest edge
  if (ry < 0.5 && rx < 0.5) return ry < rx ? "top" : "left";
  if (ry < 0.5 && rx >= 0.5) return ry < (1 - rx) ? "top" : "right";
  if (ry >= 0.5 && rx < 0.5) return (1 - ry) < rx ? "bottom" : "left";
  return (1 - ry) < (1 - rx) ? "bottom" : "right";
}

function isInsideRect(rect: DOMRect, x: number, y: number, expand: number): boolean {
  return (
    x >= rect.left - expand &&
    x <= rect.right + expand &&
    y >= rect.top - expand &&
    y <= rect.bottom + expand
  );
}

function isNearRectEdge(rect: DOMRect, x: number, y: number, threshold = 1): boolean {
  return (
    x <= rect.left + threshold ||
    x >= rect.right - threshold ||
    y <= rect.top + threshold ||
    y >= rect.bottom - threshold
  );
}

function inferEntryEdge(rect: DOMRect, prev: Pointer, expand: number): DropPosition | null {
  const leftOverflow = rect.left - expand - prev.x;
  const rightOverflow = prev.x - (rect.right + expand);
  const topOverflow = rect.top - expand - prev.y;
  const bottomOverflow = prev.y - (rect.bottom + expand);

  let edge: DropPosition | null = null;
  let maxOverflow = 0;

  if (leftOverflow > maxOverflow) {
    maxOverflow = leftOverflow;
    edge = "left";
  }
  if (rightOverflow > maxOverflow) {
    maxOverflow = rightOverflow;
    edge = "right";
  }
  if (topOverflow > maxOverflow) {
    maxOverflow = topOverflow;
    edge = "top";
  }
  if (bottomOverflow > maxOverflow) {
    maxOverflow = bottomOverflow;
    edge = "bottom";
  }

  return edge;
}

function nearestEdge(rect: DOMRect, x: number, y: number): DropPosition {
  const distances: Array<{ edge: DropPosition; dist: number }> = [
    { edge: "left", dist: Math.abs(x - rect.left) },
    { edge: "right", dist: Math.abs(rect.right - x) },
    { edge: "top", dist: Math.abs(y - rect.top) },
    { edge: "bottom", dist: Math.abs(rect.bottom - y) },
  ];
  distances.sort((a, b) => a.dist - b.dist);
  return distances[0].edge;
}

function previewStyle(pos: DropPosition): React.CSSProperties {
  // Use top+left+width+height (not opposing insets) so only one property
  // per axis changes when sliding between zones — avoids mid-transition expansion.
  switch (pos) {
    case "top":    return { top: TAB_BAR_HEIGHT, left: 0, width: "100%", height: "45%" };
    case "bottom": return { top: `calc(55% + ${TAB_BAR_HEIGHT * 0.55}px)`, left: 0, width: "100%", height: "45%" };
    case "left":   return { top: TAB_BAR_HEIGHT, left: 0, width: "45%", height: FULL_HEIGHT };
    case "right":  return { top: TAB_BAR_HEIGHT, left: "55%", width: "45%", height: FULL_HEIGHT };
    case "center": return { top: TAB_BAR_HEIGHT, left: 0, width: "100%", height: FULL_HEIGHT };
    default:       return { top: TAB_BAR_HEIGHT, left: 0, width: "100%", height: FULL_HEIGHT };
  }
}

function getExtension(path: string): string {
  return path.split(".").pop()?.toLowerCase() ?? "";
}

function isImageFile(path: string): boolean {
  return IMAGE_EXTENSIONS.has(getExtension(path));
}

function getMimeType(ext: string): string {
  const map: Record<string, string> = {
    png: "image/png",
    jpg: "image/jpeg",
    jpeg: "image/jpeg",
    gif: "image/gif",
    bmp: "image/bmp",
    webp: "image/webp",
    ico: "image/x-icon",
    svg: "image/svg+xml",
    avif: "image/avif",
  };
  return map[ext] ?? "application/octet-stream";
}

function getLanguageFromPath(path: string): string {
  const name = path.split("/").pop()?.toLowerCase() ?? "";
  if (name === "dockerfile") return "dockerfile";
  if (name === "makefile" || name === "gnumakefile") return "makefile";
  if (name === ".gitignore" || name === ".dockerignore") return "plaintext";

  // Shell dotfiles
  const shellDotfiles = new Set([
    ".zshrc", ".zshenv", ".zprofile", ".zlogin", ".zlogout",
    ".bashrc", ".bash_profile", ".bash_login", ".bash_logout", ".bash_aliases",
    ".profile", ".shrc", ".kshrc", ".cshrc", ".tcshrc", ".login",
  ]);
  if (shellDotfiles.has(name)) return "shell";

  // INI-style dotfiles
  if (name === ".gitconfig" || name === ".editorconfig") return "ini";
  if (name === ".npmrc" || name === ".yarnrc") return "ini";

  // Extensionless files in bin/ or scripts/ directories are shell scripts
  if (!name.includes(".")) {
    const dir = path.toLowerCase();
    if (dir.includes("/bin/") || dir.includes("/scripts/")) return "shell";

function ImageViewer({ filePath }: { filePath: string }) {
  const [dataUrl, setDataUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setDataUrl(null);
    setError(null);
    const ext = getExtension(filePath);

    // SVGs can be read as text
    if (ext === "svg") {
      invoke<string>("read_file_content", { path: filePath })
        .then((content) => {
          const blob = new Blob([content], { type: "image/svg+xml" });
          setDataUrl(URL.createObjectURL(blob));
        })
        .catch((e) => setError(String(e)));
    } else {
      invoke<string>("read_file_base64", { path: filePath })
        .then((b64) => {
          setDataUrl(`data:${getMimeType(ext)};base64,${b64}`);
        })
        .catch((e) => setError(String(e)));
    }

    return () => {
      // Revoke object URLs on cleanup
      if (dataUrl?.startsWith("blob:")) URL.revokeObjectURL(dataUrl);
    };
  }, [filePath]);

  if (error) 

function getStoredZoomLevel(): number {
  const saved = localStorage.getItem("rally:zoomLevel");
  const zoom = saved ? Number(saved) : 1;
  return Number.isFinite(zoom) && zoom > 0 ? zoom : 1;
}

function TextEditor({ filePath, paneId, workspaceId, groupId }: { filePath: string; paneId: string; workspaceId: string; groupId: string }) {
  const [content, setContent] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [previewContent, setPreviewContent] = useState("");
  const contentRef = useRef("");
  const editorRef = useRef<any>(null);
  const language = getLanguageFromPath(filePath);
  const markDirty = useWorkspaceStore((s) => s.markPaneDirty);
  const markClean = useWorkspaceStore((s) => s.markPaneClean);
  const appTheme = useWorkspaceStore((s) => s.theme);

  // Neutralize body CSS zoom on Monaco's DOM element so coordinate math
  // (click-to-position, double-click selection) works correctly.
  // Same technique as Terminal.tsx: body has zoom:Z, we apply zoom:1/Z
  // on Monaco's element, then scale font size by Z to compensate visually.
  const zoomRef = useRef(getStoredZoomLevel());

  // Subscribe to initialLine/initial

function HtmlPreview({ content }: { content: string }) {
  return (
    <iframe
      srcDoc={content}
      sandbox="allow-scripts"
      style={styles.htmlIframe}
      title="HTML Preview"
    />
  );
}

function clamp(value: number, min: number, max: number): number {
  return Math.max(min, Math.min(max, value));
}