opencode-responsive-tables 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mrm007
+
+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

@@ -0,0 +1,56 @@
+# opencode-responsive-tables
+
+An [OpenCode](https://opencode.ai) plugin that makes markdown tables readable on any screen. Tables that fit your terminal are left alone — tables that don't are reformatted as stacked cards.
+
+## Before / After
+
+A table too wide for the terminal:
+
+```
+| Name  | Age | City     | Country | Email             |
+| ----- | --- | -------- | ------- | ----------------- |
+| Alice | 30  | New York | USA     | alice@example.com |
+| Bob   | 25  | London   | UK      | bob@example.com   |
+```
+
+Becomes:
+
+```
+**Name**: Alice
+**Age**: 30
+**City**: New York
+**Country**: USA
+**Email**: alice@example.com
+────────────────────────
+**Name**: Bob
+**Age**: 25
+**City**: London
+**Country**: UK
+**Email**: bob@example.com
+```
+
+Tables that fit are passed through unchanged. Tables inside code fences are never touched.
+
+## Install
+
+```json
+{
+  "plugin": ["opencode-responsive-tables"]
+}
+```
+
+## How it works
+
+1. Detects markdown tables in assistant output
+2. Measures each table's display width (markdown-aware — bold, links, and code are measured by their rendered width, not their raw syntax)
+3. If the table fits the terminal → pass through as-is
+4. If the table overflows → reformat as stacked key-value cards with `─` separators
+5. No terminal width (e.g. OpenCode web) → all tables pass through
+
+## Pairs well with
+
+Works great alongside [`@franlol/opencode-md-table-formatter`](https://github.com/franlol/opencode-md-table-formatter), which aligns and prettifies tables that fit. This plugin picks up where that one leaves off — reformatting the tables that are still too wide as stacked cards.
+
+## License
+
+[MIT](LICENSE)

package/index.ts

@@ -0,0 +1,233 @@
+import type { Plugin, Hooks } from "@opencode-ai/plugin";
+
+const stringWidth = Bun.stringWidth;
+
+// ── Plugin Entry ──────────────────────────────────────────────────
+
+export const ResponsiveTables: Plugin = async () => {
+  return {
+    "experimental.text.complete": async (
+      _input: { sessionID: string; messageID: string; partID: string },
+      output: { text: string },
+    ) => {
+      if (typeof output.text !== "string") return;
+
+      try {
+        output.text = formatResponsiveTables(output.text);
+      } catch {}
+    },
+  } as Hooks;
+};
+
+// ── Width ─────────────────────────────────────────────────────────
+
+function getMaxWidth(): number {
+  const termWidth = process.stdout.columns;
+  if (!termWidth) return Infinity;
+  return termWidth - 10;
+}
+
+// ── Table Detection (from @franlol/opencode-md-table-formatter) ───
+
+function isTableRow(line: string): boolean {
+  const trimmed = line.trim();
+  return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.split("|").length > 2;
+}
+
+function isSeparatorRow(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed.startsWith("|") || !trimmed.endsWith("|")) return false;
+  const cells = trimmed.split("|").slice(1, -1);
+  return cells.length > 0 && cells.every((cell) => /^\s*:?-+:?\s*$/.test(cell));
+}
+
+function isValidTable(lines: string[]): boolean {
+  if (lines.length < 2) return false;
+  const rows = lines.map((line) =>
+    line
+      .split("|")
+      .slice(1, -1)
+      .map((cell) => cell.trim()),
+  );
+  if (rows.length === 0 || rows[0].length === 0) return false;
+  const colCount = rows[0].length;
+  if (!rows.every((row) => row.length === colCount)) return false;
+  return lines.some((line) => isSeparatorRow(line));
+}
+
+function isCodeFenceLine(line: string): boolean {
+  return /^\s*(`{3,}|~{3,})/.test(line);
+}
+
+// ── Table Parsing ─────────────────────────────────────────────────
+
+interface ParsedTable {
+  headers: string[];
+  dataRows: string[][];
+}
+
+function parseTable(lines: string[]): ParsedTable {
+  const rows = lines.map((line) =>
+    line
+      .split("|")
+      .slice(1, -1)
+      .map((cell) => cell.trim()),
+  );
+
+  let headers: string[] = [];
+  const dataRows: string[][] = [];
+  let headerFound = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    if (isSeparatorRow(lines[i])) continue;
+    if (!headerFound) {
+      headers = rows[i];
+      headerFound = true;
+    } else {
+      dataRows.push(rows[i]);
+    }
+  }
+
+  return { headers, dataRows };
+}
+
+// ── Width Measurement (from @franlol/opencode-md-table-formatter)
+
+const widthCache = new Map<string, number>();
+let cacheOps = 0;
+
+function getDisplayWidth(text: string): number {
+  const cached = widthCache.get(text);
+  if (cached !== undefined) return cached;
+  const width = measureStringWidth(text);
+  widthCache.set(text, width);
+  return width;
+}
+
+// Concealment mode: strip markdown syntax that OpenCode hides
+// but preserve content inside backticks (rendered as literal text)
+function measureStringWidth(text: string): number {
+  const codeBlocks: string[] = [];
+  let withPlaceholders = text.replace(/`(.+?)`/g, (_match, content) => {
+    codeBlocks.push(content);
+    return `\x00CODE${codeBlocks.length - 1}\x00`;
+  });
+
+  let visual = withPlaceholders;
+  let prev = "";
+  while (visual !== prev) {
+    prev = visual;
+    visual = visual
+      .replace(/\*\*\*(.+?)\*\*\*/g, "$1")
+      .replace(/\*\*(.+?)\*\*/g, "$1")
+      .replace(/\*(.+?)\*/g, "$1")
+      .replace(/~~(.+?)~~/g, "$1")
+      .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, "$1")
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1 ($2)");
+  }
+
+  visual = visual.replace(/\x00CODE(\d+)\x00/g, (_match, index) => {
+    return codeBlocks[parseInt(index)];
+  });
+
+  return stringWidth(visual);
+}
+
+function getTableDisplayWidth(lines: string[]): number {
+  let max = 0;
+  for (const line of lines) {
+    max = Math.max(max, getDisplayWidth(line));
+  }
+  return max;
+}
+
+// ── Stacked Cards ─────────────────────────────────────────────────
+
+function formatStacked(table: ParsedTable, maxWidth: number): string[] {
+  const { headers, dataRows } = table;
+  const cards: string[][] = [];
+  let maxLineWidth = 0;
+
+  for (const row of dataRows) {
+    const card: string[] = [];
+    for (let col = 0; col < headers.length; col++) {
+      const value = row[col] ?? "";
+      card.push(`**${headers[col]}**: ${value}`);
+      maxLineWidth = Math.max(
+        maxLineWidth,
+        getDisplayWidth(headers[col]) + 2 + getDisplayWidth(value),
+      );
+    }
+    cards.push(card);
+  }
+
+  const separatorWidth = Math.min(maxLineWidth, maxWidth);
+  const separator = "\u2500".repeat(separatorWidth);
+  const result: string[] = [];
+
+  for (let i = 0; i < cards.length; i++) {
+    result.push(...cards[i]);
+    if (i < cards.length - 1) {
+      result.push(separator);
+    }
+  }
+
+  return result;
+}
+
+// ── Orchestrator ──────────────────────────────────────────────────
+
+export function formatResponsiveTables(text: string): string {
+  const maxWidth = getMaxWidth();
+  const lines = text.split("\n");
+  const result: string[] = [];
+  let i = 0;
+  let insideCodeBlock = false;
+
+  while (i < lines.length) {
+    if (isCodeFenceLine(lines[i])) {
+      insideCodeBlock = !insideCodeBlock;
+      result.push(lines[i]);
+      i++;
+      continue;
+    }
+
+    if (!insideCodeBlock && isTableRow(lines[i])) {
+      const tableLines: string[] = [lines[i]];
+      i++;
+      while (i < lines.length && isTableRow(lines[i])) {
+        tableLines.push(lines[i]);
+        i++;
+      }
+
+      if (isValidTable(tableLines)) {
+        const parsed = parseTable(tableLines);
+        const tableWidth = getTableDisplayWidth(tableLines);
+
+        if (parsed.dataRows.length === 0 || tableWidth <= maxWidth) {
+          result.push(...tableLines);
+        } else {
+          result.push(...formatStacked(parsed, maxWidth));
+        }
+      } else {
+        result.push(...tableLines);
+      }
+    } else {
+      result.push(lines[i]);
+      i++;
+    }
+  }
+
+  incrementCacheOps();
+  return result.join("\n");
+}
+
+// ── Cache ─────────────────────────────────────────────────────────
+
+function incrementCacheOps() {
+  cacheOps++;
+  if (cacheOps > 100 || widthCache.size > 1000) {
+    widthCache.clear();
+    cacheOps = 0;
+  }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "opencode-responsive-tables",
+  "version": "0.0.1",
+  "description": "Responsive Markdown table formatter for OpenCode — aligned tables when they fit, stacked cards when they don't",
+  "keywords": [
+    "formatter",
+    "markdown",
+    "opencode",
+    "plugin",
+    "responsive",
+    "table"
+  ],
+  "homepage": "https://github.com/mrm007/opencode-responsive-tables",
+  "license": "MIT",
+  "author": "mrm007",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/mrm007/opencode-responsive-tables.git"
+  },
+  "files": [
+    "index.ts",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "scripts": {
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.9",
+    "@types/node": "^25.3.0"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": ">=0.13.7"
+  }
+}