pi-ui-extension 1.1.0

package/extensions/sidebar/default-panels.ts

@@ -0,0 +1,155 @@
+import type { ContextUsage, Theme } from "@earendil-works/pi-coding-agent";
+import { ScrollView, VStack, type Component } from "@earendil-works/pi-tui";
+import type { RunActivitySnapshot } from "../ctx/activity.ts";
+import type { ContextEstimate } from "../ctx/data.ts";
+import { ContextPanel } from "../ctx/panel.ts";
+import type { ResourceButtonId } from "../session/panel.ts";
+import { SessionPanel, type SessionListItem } from "../session/panel.ts";
+import { ToolViewPanel } from "../tool-view/panel.ts";
+import { panelBottom } from "./panel.ts";
+import type { ToolViewMode } from "../tool-view/types.ts";
+import type { ToolUsageSnapshot } from "../tool-view/usage.ts";
+import type { SidebarPanelDefinition } from "./registry.ts";
+
+export const SESSION_PANEL_ID = "sessions";
+export const CONTEXT_PANEL_ID = "context";
+export const TOOL_VIEW_PANEL_ID = "tool-view";
+
+class ToolViewScrollView extends VStack {
+  readonly scrollView: ScrollView;
+
+  constructor(panel: ToolViewPanel, theme: Theme) {
+    const scrollView = new ScrollView(panel, {
+      follow: "none",
+      overscroll: "chain",
+      scrollbar: "hidden",
+      scrollbarTrackStyle: (text: string) => theme.fg("accent", text),
+      scrollbarThumbStyle: (text: string) => theme.fg("accent", text),
+    });
+    const bottomBorder: Component = {
+      render: (width) => [panelBottom(theme, width)],
+      invalidate(): void {},
+    };
+    super([
+      { component: scrollView, grow: 1, shrink: 1, minSize: 0 },
+      { component: bottomBorder, basis: 1, grow: 0, shrink: 0, minSize: 1 },
+    ], { gap: 0, align: "stretch" });
+    this.scrollView = scrollView;
+  }
+
+  get scrollTop(): number { return this.scrollView.scrollTop; }
+  get isFollowingEnd(): boolean { return this.scrollView.isFollowingEnd; }
+  get viewportHeight(): number { return this.scrollView.viewportHeight; }
+  get scrollbar(): "hidden" | "auto" | "always" { return this.scrollView.scrollbar; }
+  updateLayout(contentHeight: number, viewportHeight: number, requestRender: () => void): void {
+    this.scrollView.updateLayout(contentHeight, viewportHeight, requestRender);
+    this.scrollView.setScrollbar(contentHeight > viewportHeight ? "always" : "hidden");
+  }
+}
+
+export function createToolViewScrollView(panel: ToolViewPanel, theme: Theme): ToolViewScrollView {
+  // Keep the panel identity and mode selector visible by default. Following
+  // the end makes a long usage list look like the Tool View disappeared,
+  // because its title and selector are scrolled out of the viewport.
+  return new ToolViewScrollView(panel, theme);
+}
+
+export type DefaultSidebarPanelOptions = {
+  readonly getContextEstimate?: () => ContextEstimate;
+  readonly getContextDelta?: () => number | undefined;
+  readonly getActivity?: () => RunActivitySnapshot | undefined;
+  readonly getCacheHitRate?: () => number | undefined;
+  readonly getContextUsage: () => ContextUsage | undefined;
+  readonly getModel: () => string;
+  readonly getThinkingLevel: () => string;
+  readonly getToolViewMode: () => ToolViewMode | undefined;
+  readonly getToolUsage: () => ToolUsageSnapshot | undefined;
+  readonly onSelectToolViewMode: (mode: ToolViewMode) => void;
+  readonly showToolViewModeSelector?: () => boolean;
+  readonly loadSessions: () => Promise<readonly SessionListItem[]>;
+  readonly onSelectSession: (session: SessionListItem) => void;
+  readonly onRenameSession: (session: SessionListItem) => void;
+  readonly onDeleteSession: (session: SessionListItem) => void;
+  readonly onDeleteOthers: () => void;
+  readonly onOpenResources: (button: ResourceButtonId) => void;
+};
+
+class AdaptiveScrollView extends ScrollView {
+  override updateLayout(contentHeight: number, viewportHeight: number, requestRender: () => void): void {
+    super.updateLayout(contentHeight, viewportHeight, requestRender);
+    this.setScrollbar(contentHeight > viewportHeight ? "always" : "hidden");
+  }
+}
+
+export function createDefaultSidebarPanels(
+  options: DefaultSidebarPanelOptions,
+): readonly SidebarPanelDefinition[] {
+  return [{
+    id: SESSION_PANEL_ID,
+    layout: { minSize: 4, maxSize: 9 },
+    create({ tui, theme, getDesiredWidth }) {
+      const panel = new SessionPanel(theme, {
+        tui,
+        getDesiredWidth,
+        loadSessions: options.loadSessions,
+        onSelect: options.onSelectSession,
+        onRename: options.onRenameSession,
+        onDelete: options.onDeleteSession,
+        onDeleteOthers: options.onDeleteOthers,
+        onOpenResources: options.onOpenResources,
+      });
+      panel.refresh();
+      return {
+        component: panel,
+        update(): void { panel.refresh(); },
+        dispose(): void { panel.dispose(); },
+      };
+    },
+  }, {
+    id: CONTEXT_PANEL_ID,
+    layout: { minSize: 10, maxSize: ({ terminalRows }) => Math.max(10, Math.floor(terminalRows * 0.35)) },
+    create({ tui, theme, getDesiredWidth }) {
+      const panel = new ContextPanel(theme, {
+          getEstimate: options.getContextEstimate,
+          getDelta: options.getContextDelta,
+          getActivity: options.getActivity,
+          now: () => Date.now(),
+          getCacheHitRate: options.getCacheHitRate,
+          getUsage: options.getContextUsage,
+          getModel: options.getModel,
+          getThinkingLevel: options.getThinkingLevel,
+          getDesiredWidth,
+      });
+      // A one-second tick keeps the running duration fresh; CTX now owns the
+      // activity rows that used to live in their own panel.
+      const renderTimer = setInterval(() => tui.requestRender(), 1_000);
+      renderTimer.unref?.();
+      return {
+        component: new AdaptiveScrollView(panel, { follow: "none", overscroll: "chain", scrollbar: "hidden" }),
+        dispose(): void { clearInterval(renderTimer); },
+      };
+    },
+  }, {
+    id: TOOL_VIEW_PANEL_ID,
+    layout: {
+      minSize: 3,
+      maxSize: ({ terminalRows }) => Math.max(3, Math.floor(terminalRows * 0.35)),
+    },
+    create({ tui, theme, getDesiredWidth }) {
+      const panel = new ToolViewPanel(theme, {
+        tui,
+        getDesiredWidth,
+        getMode: options.getToolViewMode,
+        getUsage: options.getToolUsage,
+        onSelect: options.onSelectToolViewMode,
+        showModeSelector: options.showToolViewModeSelector,
+        showBottomBorder: false,
+      });
+      const scroll = createToolViewScrollView(panel, theme);
+      return {
+        component: scroll,
+        dispose(): void { panel.dispose(); },
+      };
+    },
+  }];
+}

package/extensions/sidebar/index.ts

@@ -0,0 +1,212 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import {
+  HStack,
+  VStack,
+  isViewportTUI,
+  type Component,
+  type TUI,
+  type ViewportTUI,
+} from "@earendil-works/pi-tui";
+import { createSidebarScrollView } from "./layout.ts";
+import { installMouseResize, SidebarDivider } from "./resize.ts";
+import type {
+  SidebarPanelDefinition,
+  SidebarPanelInstance,
+  SidebarPanelLayout,
+} from "./registry.ts";
+
+const SIDEBAR_RATIO = 0.20;
+const MIN_SPLIT_WIDTH = 120;
+const MIN_SIDEBAR_WIDTH = 18;
+const MAX_SIDEBAR_WIDTH = 72;
+const MIN_MAIN_WIDTH = 64;
+
+type LayoutTui = ViewportTUI & { layoutRoot?: Component };
+type MutableHStack = HStack & { entries: Array<{ basis?: number | "auto" }> };
+type MutableVStack = VStack & { entries: Array<{ maxSize?: number }> };
+const RESET_STYLE = "\x1b[0m";
+
+type MountedPanel = {
+  readonly definition: SidebarPanelDefinition<unknown>;
+  readonly instance: SidebarPanelInstance<unknown>;
+  readonly entry: MutableVStack["entries"][number] | undefined;
+};
+
+export type SidebarController = {
+  readonly mounted: boolean;
+  updatePanel<State>(id: string, state: State): boolean;
+  refresh(): void;
+  dispose(): void;
+};
+
+function noopController(): SidebarController {
+  return {
+    mounted: false,
+    updatePanel(): boolean { return false; },
+    refresh(): void {},
+    dispose(): void {},
+  };
+}
+
+function resolveMaxSize(layout: SidebarPanelLayout | undefined, tui: TUI): number | undefined {
+  const maxSize = layout?.maxSize;
+  return typeof maxSize === "function"
+    ? maxSize({ terminalRows: tui.terminal.rows, terminalColumns: tui.terminal.columns })
+    : maxSize;
+}
+
+function createLayoutEntry(
+  definition: SidebarPanelDefinition<unknown>,
+  component: Component,
+  tui: TUI,
+): { component: Component; basis: number | "auto"; grow: number; shrink: number; minSize?: number; maxSize?: number } {
+  const layout = definition.layout;
+  const maxSize = resolveMaxSize(layout, tui);
+  return {
+    component,
+    basis: layout?.basis ?? "auto",
+    grow: layout?.grow ?? 0,
+    shrink: layout?.shrink ?? 0,
+    ...(layout?.minSize === undefined ? {} : { minSize: layout.minSize }),
+    ...(maxSize === undefined ? {} : { maxSize }),
+  };
+}
+
+export function installSidebar(
+  tui: TUI,
+  theme: Theme,
+  definitions: readonly SidebarPanelDefinition[],
+): SidebarController {
+  if (!isViewportTUI(tui)) return noopController();
+
+  // Pi currently exposes setLayoutRoot() but not getLayoutRoot() through the
+  // Extension API. In fullscreen mode the active root is present on ViewportTUI;
+  // fail closed if that implementation detail changes in a future Pi release.
+  const layoutTui = tui as LayoutTui;
+  const previousRoot = layoutTui.layoutRoot;
+  if (!previousRoot) return noopController();
+
+  let sidebarWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.round(tui.terminal.columns * SIDEBAR_RATIO));
+  const clampSidebarWidth = (width: number): number => Math.min(
+    MAX_SIDEBAR_WIDTH,
+    Math.max(MIN_SIDEBAR_WIDTH, Math.min(Math.trunc(width), tui.terminal.columns - MIN_MAIN_WIDTH)),
+  );
+  sidebarWidth = clampSidebarWidth(sidebarWidth);
+  const getSidebarWidth = () => sidebarWidth;
+  const mountedPanels = new Map<string, MountedPanel>();
+  const createdInstances: SidebarPanelInstance<unknown>[] = [];
+  let layoutEntries: Array<{
+    definition: SidebarPanelDefinition<unknown>;
+    instance: SidebarPanelInstance<unknown>;
+    layoutEntry: ReturnType<typeof createLayoutEntry>;
+  }>;
+  try {
+    layoutEntries = definitions.map((definition) => {
+      const instance = definition.create({ tui, theme, getDesiredWidth: getSidebarWidth });
+      createdInstances.push(instance);
+      return { definition, instance, layoutEntry: createLayoutEntry(definition, instance.component, tui) };
+    });
+  } catch (error) {
+    for (const instance of createdInstances.reverse()) {
+      try { instance.dispose?.(); } catch { /* Preserve the original creation error. */ }
+    }
+    throw error;
+  }
+  const separators = layoutEntries.slice(1).map((): Component => ({
+    render: (width) => [`${RESET_STYLE}${" ".repeat(Math.max(1, width))}`],
+    invalidate(): void {},
+  }));
+  const sidebar = new VStack(
+    layoutEntries.flatMap(({ layoutEntry }, index) => index === 0
+      ? [layoutEntry]
+      : [{ component: separators[index - 1]!, basis: 1, grow: 0, shrink: 0 }, layoutEntry]),
+    { gap: 0, align: "stretch" },
+  );
+  const sidebarScroll = createSidebarScrollView(sidebar, theme, () => tui.terminal.rows);
+  const sidebarEntries = (sidebar as MutableVStack).entries;
+  layoutEntries.forEach(({ definition, instance }, index) => {
+    mountedPanels.set(definition.id, { definition, instance, entry: sidebarEntries[index * 2] });
+  });
+  function syncPanelLayout(): void {
+    for (const panel of mountedPanels.values()) {
+      const maxSize = resolveMaxSize(panel.definition.layout, tui);
+      if (panel.entry && maxSize !== undefined) panel.entry.maxSize = maxSize;
+    }
+  }
+  const divider = new SidebarDivider(
+    (line) => theme.fg("dim", line),
+    () => tui.terminal.rows,
+  );
+  const splitRoot = new HStack([
+    { component: previousRoot, basis: 0, grow: 1, shrink: 1, minSize: MIN_MAIN_WIDTH },
+    {
+      component: divider,
+      basis: 1,
+      grow: 0,
+      shrink: 0,
+      minSize: 1,
+      visible: ({ width }) => width >= MIN_SPLIT_WIDTH,
+    },
+    {
+      component: sidebarScroll,
+      basis: sidebarWidth,
+      grow: 0,
+      shrink: 0,
+      minSize: MIN_SIDEBAR_WIDTH,
+      maxSize: MAX_SIDEBAR_WIDTH,
+      visible: ({ width }) => width >= MIN_SPLIT_WIDTH,
+    },
+  ]);
+  const sidebarEntry = (splitRoot as MutableHStack).entries[2];
+  const applySidebarWidth = (width: number): void => {
+    const next = clampSidebarWidth(width);
+    if (next === sidebarWidth || !sidebarEntry) return;
+    sidebarWidth = next;
+    sidebarEntry.basis = next;
+    tui.requestRender();
+  };
+  layoutTui.setLayoutRoot(splitRoot);
+  const previewDivider = new SidebarDivider(
+    (line) => theme.fg("accent", line),
+    () => tui.terminal.rows,
+  );
+  const uninstallMouseResize = installMouseResize({
+    tui,
+    preview: previewDivider,
+    isVisible: () => tui.terminal.columns >= MIN_SPLIT_WIDTH,
+    getDividerX: () => tui.terminal.columns - sidebarWidth,
+    clampSidebarWidth,
+    commitSidebarWidth: applySidebarWidth,
+  });
+
+  let disposed = false;
+  return {
+    mounted: true,
+    updatePanel<State>(id: string, state: State): boolean {
+      if (disposed) return false;
+      const panel = mountedPanels.get(id.trim());
+      if (!panel?.instance.update) return false;
+      panel.instance.update(state);
+      tui.requestRender();
+      return true;
+    },
+    refresh(): void {
+      if (disposed) return;
+      syncPanelLayout();
+      for (const panel of mountedPanels.values()) panel.instance.refresh?.();
+      tui.requestRender();
+    },
+    dispose(): void {
+      if (disposed) return;
+      disposed = true;
+      uninstallMouseResize();
+      for (const panel of mountedPanels.values()) {
+        try { panel.instance.dispose?.(); } catch { /* Continue releasing the remaining panels. */ }
+      }
+      mountedPanels.clear();
+      if (layoutTui.layoutRoot === splitRoot) {
+        layoutTui.setLayoutRoot(previousRoot);
+      }
+    },
+  };
+}

package/extensions/sidebar/layout.test.ts

@@ -0,0 +1,68 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { ScrollView, VStack, type Component } from "@earendil-works/pi-tui";
+import { getScrollViewsAt, renderLayoutFrame } from "@earendil-works/pi-tui/dist/layout.js";
+import { createSidebarScrollView } from "./layout.ts";
+
+const component: Component = {
+  render: () => Array.from({ length: 20 }, (_, index) => `line ${index + 1}`),
+  invalidate(): void {},
+};
+
+const theme = {
+  fg: (_color: string, text: string) => text,
+} as Theme;
+
+test("sidebar fills rows below its content so main-view backgrounds cannot leak through", () => {
+  const shortComponent: Component = {
+    render: () => ["content"],
+    invalidate(): void {},
+  };
+  const scroll = createSidebarScrollView(shortComponent, theme, () => 4);
+  const lines = scroll.render(8);
+
+  assert.equal(lines.length, 4);
+  assert.equal(lines[0], "content");
+  assert.deepEqual(lines.slice(1), Array(3).fill("\x1b[0m        "));
+});
+
+test("sidebar does not add padding beyond the terminal viewport", () => {
+  const scroll = createSidebarScrollView(component, theme, () => 5);
+  assert.equal(scroll.render(8).length, 20);
+});
+
+test("sidebar layout preserves nested panel scroll views for wheel hit testing", () => {
+  const activityScroll = new ScrollView(component);
+  const sidebar = new VStack([
+    { component: activityScroll, maxSize: 5 },
+  ]);
+  const sidebarScroll = createSidebarScrollView(sidebar, theme, () => 10);
+  const frame = renderLayoutFrame(sidebarScroll, 8, 5, () => {});
+
+  assert.deepEqual(getScrollViewsAt(frame, 1, 1), [activityScroll, sidebarScroll]);
+  assert.equal(activityScroll.viewportHeight, 5);
+  assert.equal(activityScroll.scrollBy(3), 0);
+  assert.equal(activityScroll.scrollTop, 3);
+});
+
+test("sidebar scroll view exposes overflowing content through vertical scrolling", () => {
+  const scroll = createSidebarScrollView(component, theme);
+  scroll.updateLayout(20, 5, () => {});
+
+  assert.equal(scroll.viewportHeight, 5);
+  assert.equal(scroll.scrollTop, 0);
+  assert.equal(scroll.scrollBy(3), 0);
+  assert.equal(scroll.scrollTop, 3);
+  assert.equal(scroll.scrollBy(100), 88);
+  assert.equal(scroll.scrollTop, 15);
+});
+
+test("sidebar scroll view does not follow new content to the bottom", () => {
+  const scroll = createSidebarScrollView(component, theme);
+  scroll.updateLayout(20, 5, () => {});
+  scroll.scrollBy(4);
+  scroll.updateLayout(30, 5, () => {});
+
+  assert.equal(scroll.scrollTop, 4);
+});

package/extensions/sidebar/layout.ts

@@ -0,0 +1,75 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { ScrollView, type Component } from "@earendil-works/pi-tui";
+
+const LAYOUT_NODE = Symbol.for("@earendil-works/pi-tui/layout-node");
+const RESET_STYLE = "\x1b[0m";
+
+class ViewportPadding implements Component {
+  constructor(
+    private readonly component: Component,
+    private readonly getViewportHeight: () => number,
+  ) {}
+
+  render(width: number): string[] {
+    const contentHeight = this.component.render(width).length;
+    const viewportHeight = Math.max(0, Math.floor(this.getViewportHeight()));
+    const paddingHeight = Math.max(0, viewportHeight - contentHeight);
+    const blankLine = `${RESET_STYLE}${" ".repeat(Math.max(1, width))}`;
+    return Array.from({ length: paddingHeight }, () => blankLine);
+  }
+
+  invalidate(): void {}
+}
+
+class ViewportHeightContent implements Component {
+  private readonly padding: ViewportPadding;
+
+  constructor(
+    private readonly component: Component,
+    private readonly getViewportHeight: () => number,
+  ) {
+    this.padding = new ViewportPadding(component, getViewportHeight);
+  }
+
+  render(width: number): string[] {
+    const lines = this.component.render(width);
+    const viewportHeight = Math.max(0, Math.floor(this.getViewportHeight()));
+    if (lines.length >= viewportHeight) return lines;
+
+    const blankLine = `${RESET_STYLE}${" ".repeat(Math.max(1, width))}`;
+    return [
+      ...lines,
+      ...Array.from({ length: viewportHeight - lines.length }, () => blankLine),
+    ];
+  }
+
+  invalidate(): void {
+    this.component.invalidate();
+  }
+
+  [LAYOUT_NODE]() {
+    return {
+      type: "vstack",
+      entries: [
+        { component: this.component },
+        { component: this.padding },
+      ],
+      gap: 0,
+      align: "stretch",
+    };
+  }
+}
+
+export function createSidebarScrollView(
+  component: Component,
+  theme: Theme,
+  getViewportHeight: () => number = () => 0,
+): ScrollView {
+  return new ScrollView(new ViewportHeightContent(component, getViewportHeight), {
+    follow: "none",
+    overscroll: "contain",
+    scrollbar: "auto",
+    scrollbarTrackStyle: (text: string) => theme.fg("accent", text),
+    scrollbarThumbStyle: (text: string) => theme.fg("accent", text),
+  });
+}

package/extensions/sidebar/panel.ts

@@ -0,0 +1,49 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export type PanelColor = "success" | "error" | "warning" | "dim" | "accent";
+
+export function panelTop(theme: Theme, title: string, renderWidth: number): string {
+  const innerWidth = Math.max(1, renderWidth - 2);
+  const titleText = ` ${title} `;
+  const borderWidth = Math.max(0, innerWidth - visibleWidth(titleText));
+  const left = Math.floor(borderWidth / 2);
+  const right = borderWidth - left;
+  return theme.fg("accent", `╭${"─".repeat(left)}${titleText}${"─".repeat(right)}╮`);
+}
+
+export function panelBottom(theme: Theme, renderWidth: number): string {
+  return theme.fg("accent", `╰${"─".repeat(Math.max(1, renderWidth - 2))}╯`);
+}
+
+export function panelContent(
+  theme: Theme,
+  content: string,
+  color: PanelColor,
+  contentWidth: number,
+): string {
+  const text = truncateToWidth(content, contentWidth, "");
+  const padding = " ".repeat(Math.max(0, contentWidth - visibleWidth(text)));
+  return theme.fg("dim", "│ ") +
+    theme.fg(color, text) +
+    theme.fg("dim", `${padding} │`);
+}
+
+export function panelRow(
+  theme: Theme,
+  label: string,
+  value: string,
+  color: PanelColor,
+  contentWidth: number,
+): string {
+  const labelWidth = Math.max(1, Math.min(11, Math.floor(contentWidth * 0.58)));
+  const valueWidth = Math.max(1, contentWidth - labelWidth - 1);
+  const labelText = truncateToWidth(label, labelWidth, "").padEnd(labelWidth, " ");
+  const valueText = truncateToWidth(value, valueWidth, "");
+  const usedWidth = visibleWidth(labelText) + 1 + visibleWidth(valueText);
+  const padding = " ".repeat(Math.max(0, contentWidth - usedWidth));
+  return theme.fg("dim", "│ ") +
+    theme.fg("dim", `${labelText} `) +
+    theme.fg(color, valueText) +
+    theme.fg("dim", `${padding} │`);
+}

package/extensions/sidebar/registry.ts

@@ -0,0 +1,35 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Component, TUI } from "@earendil-works/pi-tui";
+
+export type SidebarPanelLayoutContext = {
+  readonly terminalRows: number;
+  readonly terminalColumns: number;
+};
+
+export type SidebarPanelLayout = {
+  readonly basis?: number | "auto";
+  readonly grow?: number;
+  readonly shrink?: number;
+  readonly minSize?: number;
+  readonly maxSize?: number | ((context: SidebarPanelLayoutContext) => number);
+};
+
+export type SidebarPanelContext = {
+  readonly tui: TUI;
+  readonly theme: Theme;
+  readonly getDesiredWidth: () => number;
+};
+
+export type SidebarPanelInstance<State = unknown> = {
+  readonly component: Component;
+  update?(state: State): void;
+  refresh?(): void;
+  dispose?(): void;
+};
+
+export type SidebarPanelDefinition<State = unknown> = {
+  readonly id: string;
+  readonly layout?: SidebarPanelLayout;
+  create(context: SidebarPanelContext): SidebarPanelInstance<State>;
+};
+

package/extensions/sidebar/resize.test.ts

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { setTimeout as delay } from "node:timers/promises";
+import { installSidebar } from "./index.ts";
+import type { SidebarPanelDefinition } from "./registry.ts";
+
+test("sidebar ignores hidden divider hits and cancels drags after terminal resize", async () => {
+  let overlays = 0, hidden = 0;
+  const listeners = new Set<any>();
+  const root = { render: () => [], invalidate() {} };
+  const tui: any = {
+    [Symbol.for("@earendil-works/pi-tui/viewport")]: true,
+    terminal: { columns: 100, rows: 40 }, layoutRoot: root,
+    inputListeners: listeners,
+    addInputListener(fn: any) { listeners.add(fn); return () => listeners.delete(fn); },
+    setLayoutRoot(next: any) { this.layoutRoot = next; },
+    requestRender() {},
+    showOverlay() { overlays++; return { hide() { hidden++; } }; },
+  };
+  const controller = installSidebar(tui, { fg: (_: string, text: string) => text } as any, []);
+  const input = (data: string) => [...listeners][0]?.(data);
+  try {
+    assert.equal(controller.mounted, true);
+    assert.equal(input("\x1b[<0;80;5M"), undefined);
+    assert.equal(overlays, 0);
+    tui.terminal.columns = 160;
+    assert.deepEqual(input("\x1b[<0;140;5M"), { consume: true });
+    assert.deepEqual(input("\x1b[<0;130;5m"), { consume: true });
+    assert.equal(tui.layoutRoot.entries[2].basis, 30);
+    assert.equal(hidden, 1);
+    assert.deepEqual(input("\x1b[<0;130;5M"), { consume: true });
+    tui.terminal.columns = 100;
+    await delay(50);
+    assert.equal(hidden, 2);
+    assert.equal(input("\x1b[<0;70;5m"), undefined);
+    assert.equal(tui.layoutRoot.entries[2].basis, 30);
+    tui.terminal.columns = 160;
+    input("\x1b[<0;130;5M");
+    tui.terminal.rows = 30;
+    assert.equal(input("\x1b[<0;120;5m"), undefined);
+    assert.equal(hidden, 3);
+    assert.equal(tui.layoutRoot.entries[2].basis, 30);
+  } finally { controller.dispose(); }
+  assert.equal(listeners.size, 0);
+  assert.equal(tui.layoutRoot, root);
+});
+
+test("sidebar paints separator rows instead of leaving stale main-view colors", () => {
+  const root = { render: () => [], invalidate() {} };
+  const tui: any = {
+    [Symbol.for("@earendil-works/pi-tui/viewport")]: true,
+    terminal: { columns: 160, rows: 6 }, layoutRoot: root,
+    inputListeners: new Set(),
+    addInputListener() { return () => {}; },
+    setLayoutRoot(next: any) { this.layoutRoot = next; },
+    requestRender() {},
+  };
+  const panel = (id: string): SidebarPanelDefinition => ({
+    id,
+    create: () => ({ component: { render: () => [id], invalidate() {} } }),
+  });
+  const controller = installSidebar(
+    tui,
+    { fg: (_: string, text: string) => text } as any,
+    [panel("one"), panel("two")],
+  );
+  try {
+    const lines = tui.layoutRoot.entries[2].component.render(32);
+    assert.equal(lines[1], `\x1b[0m${" ".repeat(32)}`);
+  } finally { controller.dispose(); }
+});