@madsoftwaredev/opencode-sidebar-resize 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MadSoftwareDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,86 @@
-# Temporary Holding Version
+# @madsoftwaredev/opencode-sidebar-resize
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Resizes the **whole existing right-hand session sidebar**, including its title,
+context, MCP, subagents, usage, and footer. It does not create a panel or replace
+sidebar content. The left-hand session tabs are unchanged.
+
+## Install
+
+Add this CLI-only plugin to your global `~/.config/opencode/cli.json`:
+
+```json
+{
+  "plugins": ["@madsoftwaredev/opencode-sidebar-resize"]
+}
+```
+
+Merge the entry into your existing `plugins` list, then restart the OpenCode TUI.
+A server restart or server-side plugin reload does not load a TUI entrypoint.
+Do not also load the original local `plugins/sidebar-resize` copy: it has the
+same `sidebar-resize` plugin ID and storage keys.
+
+## Use
+
+- Drag the sidebar's **left edge**. Its two-cell handle highlights on hover.
+- Use `/sidebar-width 60` to set the width in terminal columns, or select
+  **Set sidebar width** from `Ctrl+P`.
+- Use `/sidebar-width reset` to restore the original 42-column width.
+- Width is saved across restarts and synced across TUI instances.
+- Reserves 64 columns for the transcript when displayed side by side, where
+  available. OpenCode's existing narrow-terminal overlay behavior is preserved.
+- Terminal resizing temporarily clamps the sidebar without changing the saved
+  preference; the preferred width returns when space allows.
+
+## Compatibility and limitations
+
+The supported development baseline is **OpenCode 2.0.27**, **OpenTUI 0.5.17**,
+and **Solid 1.9.12**. This is not a guarantee that every later OpenCode layout
+will work. The package exports `./tui` only and runs in the OpenCode terminal,
+not in the web or desktop UI. Its Node `>=22` engine metadata does not make the
+TypeScript/TSX entrypoint a standalone Node program.
+
+OpenCode V2 has no public sidebar-width API. This plugin uses the exposed
+OpenTUI renderer and Yoga layout tree, not a browser DOM, to locate and resize
+the original sidebar and its host pane from a `sidebar.footer` slot anchor.
+The adapter was originally inspected against OpenCode 2.0.26 and requires the
+same padded, 42-column sidebar shape, heading, scrollbox, and footer branch.
+Unrecognized layouts are left unchanged with a warning. OpenCode updates or
+other plugins that replace the footer or alter that tree can prevent attachment.
+No installed binaries or OpenCode source files are patched.
+
+The drag fallback temporarily wraps the renderer root's `processMouseEvent`
+to catch drags whose first move jumps past the handle. Cleanup restores that
+handler if it still owns it, removes the handle, and restores the original
+widths. This relies on host internals and can interact with other mouse-handler
+wrappers.
+
+Existing sections keep their own text-formatting limits; widening the container
+does not remove truncation explicitly applied by another plugin. This plugin
+does not force a hidden sidebar to open or change OpenCode's overlay threshold.
+
+OpenCode supplies the UI runtime and rewrites host imports in `tui.tsx`.
+`sidebar.ts` keeps its OpenTUI imports type-only and receives constructors from
+that entrypoint; `width.ts` has no UI runtime imports.
+
+## Development checks
+
+Install workspace dependencies once from the repository root, then run:
+
+```sh
+bun test --preload @opentui/solid/preload ./packages/sidebar-resize
+bun run --cwd packages/sidebar-resize typecheck
+bun build ./packages/sidebar-resize/tui.tsx --target=bun --external '@opencode/*' --external '@opentui/*' --external 'solid-js'
+```
+
+The preload is required for the Solid JSX integration tests. Tests use the
+native OpenTUI test renderer with a representative sidebar tree and a fake
+plugin context to check whole-sidebar resizing, dragging, persistence success
+and failure, terminal resizing, and cleanup. A runtime-import check ensures the
+TypeScript adapter does not import UI packages at runtime. These checks do not
+prove the actual layout or plugin loader in a running OpenCode TUI. The build
+command checks transpilation, not host integration. Development dependencies
+are not needed to load the plugin in OpenCode.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@madsoftwaredev/opencode-sidebar-resize",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "OpenCode V2 TUI plugin for resizing the existing session sidebar by dragging or command.",
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "sidebar",
+    "resize",
+    "tui"
+  ],
+  "license": "MIT",
+  "author": "MadSoftwareDev",
+  "type": "module",
+  "exports": {
+    "./tui": "./tui.tsx"
+  },
+  "files": [
+    "tui.tsx",
+    "sidebar.ts",
+    "width.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madsoftwaredev/opencode-plugins.git",
+    "directory": "packages/sidebar-resize"
+  },
+  "homepage": "https://github.com/madsoftwaredev/opencode-plugins/tree/main/packages/sidebar-resize#readme",
+  "bugs": {
+    "url": "https://github.com/madsoftwaredev/opencode-plugins/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "test": "bun test --preload @opentui/solid/preload",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opencode/plugin": "^2.0.27"
+  },
+  "peerDependencies": {
+    "@opentui/core": ">=0.5.17",
+    "@opentui/solid": ">=0.5.17",
+    "solid-js": ">=1.9.12"
+  },
+  "devDependencies": {
+    "@types/bun": "1.3.9",
+    "typescript": "5.8.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sidebar.ts

@@ -0,0 +1,161 @@
+import type { CliRenderer, MouseEvent, Renderable, RGBA } from "@opentui/core";
+import { clampWidth, DEFAULT_WIDTH } from "./width";
+
+// OpenCode rewrites host-runtime imports in the TSX entrypoint, not this TS
+// helper. Keep these imports type-only and receive the host's own constructors.
+type Core = Pick<typeof import("@opentui/core"), "BoxRenderable" | "ScrollBoxRenderable" | "Yoga">;
+
+type SidebarTarget = {
+  sidebar: Renderable;
+  pane: Renderable;
+  overlay: boolean;
+};
+
+// OpenCode has no public sidebar-width API. Match only the inspected V2 host
+// shape: padded sidebar containing a heading, a scrollbox, and our footer branch.
+// Never resize an arbitrary ancestor when an OpenCode update changes that shape.
+function findSidebar(anchor: Renderable, core: Core): SidebarTarget | undefined {
+  const { Edge, PositionType, Unit } = core.Yoga;
+  let branch = anchor;
+  for (let node = anchor.parent; node; branch = node, node = node.parent) {
+    const children = node.getChildren();
+    const layout = node.getLayoutNode();
+    if (
+      children.length !== 3 ||
+      !(children[1] instanceof core.ScrollBoxRenderable) ||
+      children[2] !== branch ||
+      layout.getPadding(Edge.Left).value !== 2 ||
+      layout.getPadding(Edge.Right).value !== 2 ||
+      layout.getWidth().unit !== Unit.Point ||
+      layout.getWidth().value !== DEFAULT_WIDTH
+    )
+      continue;
+
+    const pane = node.parent;
+    if (!pane) return undefined;
+    const paneLayout = pane.getLayoutNode();
+    const width = paneLayout.getWidth();
+    const overlay = paneLayout.getPositionType() === PositionType.Absolute;
+    if (overlay && width.unit === Unit.Percent && width.value === 100) {
+      return { sidebar: node, pane, overlay: true };
+    }
+    if (!overlay && width.unit === Unit.Point && width.value === DEFAULT_WIDTH) {
+      return { sidebar: node, pane, overlay: false };
+    }
+    return undefined;
+  }
+  return undefined;
+}
+
+export function attachSidebarResize(options: {
+  core: Core;
+  anchor: Renderable;
+  renderer: CliRenderer;
+  width: () => number;
+  save: (width: number) => void;
+  highlight: () => RGBA;
+}): { refresh: () => void; dispose: () => void } | undefined {
+  const target = findSidebar(options.anchor, options.core);
+  if (!target) return undefined;
+  const { sidebar, pane, overlay } = target;
+  let disposed = false;
+  let scheduled = false;
+  let drag: { right: number; offset: number; width: number } | undefined;
+
+  const available = () => (overlay ? pane.width : pane.parent?.width) || options.renderer.width;
+  const apply = (width: number) => {
+    if (disposed || sidebar.isDestroyed || pane.isDestroyed) return;
+    const next = clampWidth(width, available(), overlay);
+    // Both widths are fixed by the host. Updating only the inner box would
+    // overlap the transcript rather than give the whole sidebar more room.
+    if (sidebar.getLayoutNode().getWidth().value !== next) sidebar.width = next;
+    if (!overlay && pane.getLayoutNode().getWidth().value !== next) pane.width = next;
+  };
+  const refresh = () => apply(drag?.width ?? options.width());
+  const schedule = () => {
+    if (scheduled || disposed) return;
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      refresh();
+    });
+  };
+  const stop = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const finish = (event: MouseEvent) => {
+    if (!drag) return;
+    stop(event);
+    const width = drag.width;
+    drag = undefined;
+    handle.backgroundColor = undefined;
+    options.save(width);
+  };
+  const move = (event: MouseEvent) => {
+    if (!drag) return;
+    stop(event);
+    drag.width = clampWidth(drag.right - event.x + drag.offset, available(), overlay);
+    apply(drag.width);
+  };
+  const handle = new options.core.BoxRenderable(options.renderer, {
+    id: "sidebar-resize.handle",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: 2,
+    height: "100%",
+    zIndex: 10,
+    onMouseOver: () => {
+      handle.backgroundColor = options.highlight();
+    },
+    onMouseOut: () => {
+      if (!drag) handle.backgroundColor = undefined;
+    },
+    onMouseDown: (event) => {
+      if (event.button !== 0) return;
+      stop(event);
+      drag = {
+        right: sidebar.x + sidebar.width,
+        offset: event.x - sidebar.x,
+        width: sidebar.width,
+      };
+      handle.backgroundColor = options.highlight();
+    },
+    onMouseDrag: move,
+    onMouseDragEnd: finish,
+    onMouseUp: finish,
+  });
+  sidebar.add(handle);
+  // In the shipped OpenTUI, capture begins at the first drag's hit target,
+  // not the mouse-down target. Catch bubbled drags even when that first move
+  // jumps past the two-cell handle; preserve normal dispatch when not dragging.
+  const root = options.renderer.root;
+  const originalMouse = root.processMouseEvent;
+  const dispatchMouse = (event: MouseEvent) => {
+    if (!disposed && drag) {
+      if (event.type === "drag") return move(event);
+      if (event.type === "drag-end" || event.type === "up") return finish(event);
+    }
+    originalMouse.call(root, event);
+  };
+  root.processMouseEvent = dispatchMouse;
+  const watched = [...new Set([sidebar, pane, pane.parent].filter((node) => node !== null))];
+  for (const node of watched) node.on("resize", schedule);
+  options.renderer.on("resize", schedule);
+  refresh();
+
+  return {
+    refresh,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      for (const node of watched) node.off("resize", schedule);
+      options.renderer.off("resize", schedule);
+      if (root.processMouseEvent === dispatchMouse) root.processMouseEvent = originalMouse;
+      if (!handle.isDestroyed) handle.destroy();
+      if (!sidebar.isDestroyed) sidebar.width = DEFAULT_WIDTH;
+      if (!overlay && !pane.isDestroyed) pane.width = DEFAULT_WIDTH;
+    },
+  };
+}

package/tui.tsx

@@ -0,0 +1,107 @@
+/** @jsxImportSource @opentui/solid */
+
+import { Plugin } from "@opencode/plugin/tui";
+import { BoxRenderable, ScrollBoxRenderable, Yoga } from "@opentui/core";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { attachSidebarResize } from "./sidebar";
+import { DEFAULT_WIDTH, parseWidth, preferredWidth } from "./width";
+
+export default Plugin.define({
+  id: "sidebar-resize",
+  setup(context) {
+    const [settings, update] = context.storage.store<{ width: number }>("settings", {
+      initial: { width: DEFAULT_WIDTH },
+    });
+    const [width, setWidth] = createSignal(preferredWidth(settings.width));
+    createEffect(() => setWidth(preferredWidth(settings.width)));
+    const save = async (width: number) => {
+      setWidth(width);
+      try {
+        await update((draft) => {
+          draft.width = width;
+        });
+      } catch (error) {
+        setWidth(preferredWidth(settings.width));
+        console.warn("[sidebar-resize] Could not save width", error);
+        context.ui.toast.show({ message: "Could not save sidebar width.", variant: "error" });
+      }
+    };
+    const unregister = context.ui.slot({
+      append: "sidebar.footer",
+      render: () => {
+        // Hidden anchor adds no row or footer gap. The drag handle is attached
+        // directly to the original sidebar, outside its scrolling contents.
+        let anchor: BoxRenderable | undefined;
+        let attachment: ReturnType<typeof attachSidebarResize>;
+        onMount(() => {
+          if (!anchor) return;
+          attachment = attachSidebarResize({
+            core: { BoxRenderable, ScrollBoxRenderable, Yoga },
+            anchor,
+            renderer: context.renderer,
+            width,
+            save: (width) => {
+              void save(width);
+            },
+            highlight: () => context.theme.background.raised.high,
+          });
+          if (!attachment) {
+            context.ui.toast.show({
+              message: "Sidebar resize: unsupported OpenCode layout; sidebar left unchanged.",
+              variant: "warning",
+            });
+          }
+        });
+        createEffect(() => {
+          width();
+          attachment?.refresh();
+        });
+        onCleanup(() => attachment?.dispose());
+        return (
+          <box
+            ref={(node) => {
+              anchor = node;
+            }}
+            id="sidebar-resize.anchor"
+            visible={false}
+            width={0}
+            height={0}
+          />
+        );
+      },
+    });
+
+    context.keymap.layer(() => ({
+      mode: "global",
+      commands: [
+        {
+          id: "sidebar-resize.width",
+          title: "Set sidebar width",
+          group: "Appearance",
+          palette: true,
+          slash: { name: "sidebar-width", arguments: true },
+          run: async (input) => {
+            const value =
+              input ??
+              (await context.ui.dialog.prompt({
+                title: "Sidebar width (columns)",
+                value: String(width()),
+              }));
+            if (value === undefined) return;
+            const nextWidth = value.trim() === "reset" ? DEFAULT_WIDTH : parseWidth(value);
+            if (nextWidth === undefined) {
+              context.ui.toast.show({
+                message: "Use a positive whole number, or /sidebar-width reset.",
+                variant: "error",
+              });
+              return;
+            }
+            await save(nextWidth);
+          },
+        },
+      ],
+      bindings: ["sidebar-resize.width"],
+    }));
+    return unregister;
+  },
+});

package/width.ts

@@ -0,0 +1,21 @@
+export const DEFAULT_WIDTH = 42;
+const MIN_WIDTH = 28;
+const TRANSCRIPT_WIDTH = 64;
+
+export function preferredWidth(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? Math.round(value)
+    : DEFAULT_WIDTH;
+}
+
+export function clampWidth(preferred: number, available: number, overlay: boolean): number {
+  const maximum = Math.max(1, Math.floor(available) - (overlay ? 2 : TRANSCRIPT_WIDTH));
+  return Math.max(Math.min(MIN_WIDTH, maximum), Math.min(preferredWidth(preferred), maximum));
+}
+
+export function parseWidth(input: string): number | undefined {
+  const value = input.trim();
+  if (!/^\d+$/.test(value)) return undefined;
+  const width = Number(value);
+  return Number.isSafeInteger(width) && width > 0 ? width : undefined;
+}