From 77562957564200ae48d1b95eb45b10448750f02f Mon Sep 17 00:00:00 2001
From: Tofik Hasanov <annexcies@gmail.com>
Date: Tue, 23 Jun 2026 13:43:23 -0400
Subject: [PATCH 1/3] feat(framework-editor): resizable columns persisted to a
 cookie (FRAME-17)

Drag the divider on a column's right edge to resize it; widths are saved to a
cookie (per the ticket) and restored on the next visit. Applied to both tables
Joe asked for:

- Requirements view (when viewing a framework): tanstack-native column resizing
  with handles on every column (except the actions column), table-layout: fixed
  so widths hold, and the Description column's max width raised so long text can
  be read inline once widened.
- Frameworks list: the unified tree table gets a colgroup + fixed layout, drag
  handles, and per-column widths.

Shared helpers: a cookie load/save util (column-widths-cookie) and a
useResizableColumns hook + ColumnResizeHandle for plain tables. Tests cover the
width sanitisation and cookie round-trip.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MGwXoPb6qHxuHy8miVmyxT
---
 .../FrameworkRequirementsClientPage.tsx       | 59 ++++++++++++--
 .../components/FrameworksTreeTable.tsx        | 76 ++++++++++++++----
 .../table/column-widths-cookie.test.ts        | 48 ++++++++++++
 .../components/table/column-widths-cookie.ts  | 45 +++++++++++
 .../components/table/resizable-columns.tsx    | 78 +++++++++++++++++++
 5 files changed, 283 insertions(+), 23 deletions(-)
 create mode 100644 apps/framework-editor/app/components/table/column-widths-cookie.test.ts
 create mode 100644 apps/framework-editor/app/components/table/column-widths-cookie.ts
 create mode 100644 apps/framework-editor/app/components/table/resizable-columns.tsx

diff --git a/apps/framework-editor/app/(pages)/frameworks/[frameworkId]/FrameworkRequirementsClientPage.tsx b/apps/framework-editor/app/(pages)/frameworks/[frameworkId]/FrameworkRequirementsClientPage.tsx
index aae08cffa5..f63f98c664 100644
--- a/apps/framework-editor/app/(pages)/frameworks/[frameworkId]/FrameworkRequirementsClientPage.tsx
+++ b/apps/framework-editor/app/(pages)/frameworks/[frameworkId]/FrameworkRequirementsClientPage.tsx
@@ -1,6 +1,10 @@
 'use client';
 
 import { apiClient } from '@/app/lib/api-client';
+import {
+  loadColumnWidths,
+  saveColumnWidths,
+} from '@/app/components/table/column-widths-cookie';
 import {
   createColumnHelper,
   flexRender,
@@ -12,7 +16,7 @@ import {
 import { Button } from '@trycompai/ui';
 import { ArrowDown, ArrowUp, ArrowUpDown, Download, PencilIcon, Plus, Trash2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { ComboboxCell, DateCell, EditableCell, RelationalCell } from '../../../components/table';
 import { EditFrameworkDialog } from './components/EditFrameworkDialog';
@@ -67,6 +71,9 @@ async function unlinkControlFromRequirement(requirementId: string, controlId: st
 
 const columnHelper = createColumnHelper<RequirementGridRow>();
 
+// FRAME-17: cookie key for this table's persisted column widths.
+const REQUIREMENTS_COLS_COOKIE = 'fwk-requirements-col-widths';
+
 export function FrameworkRequirementsClientPage({
   frameworkDetails,
   initialRequirements,
@@ -191,7 +198,9 @@ export function FrameworkRequirementsClientPage({
       columnHelper.accessor('description', {
         header: 'Description',
         size: 300,
-        maxSize: 300,
+        // FRAME-17: allow widening well past the default so long requirement
+        // text is readable inline once the column is resized.
+        maxSize: 1200,
         cell: ({ row, getValue }) => {
           const { identifier, name } = row.original;
           const titleSuffix = [identifier, name].filter(Boolean).join(' - ');
@@ -251,6 +260,7 @@ export function FrameworkRequirementsClientPage({
         id: 'actions',
         header: '',
         size: 50,
+        enableResizing: false,
         cell: ({ row }) => (
           <Button
             variant="ghost"
@@ -270,16 +280,37 @@ export function FrameworkRequirementsClientPage({
   // come first; unset rows fall back to identifier order and sort last.
   const [sorting, setSorting] = useState<SortingState>([{ id: 'sortOrder', desc: false }]);
 
+  // FRAME-17: persisted, drag-resizable column widths (cookie-backed). Loaded
+  // after mount (cookie is client-only) to avoid an SSR hydration mismatch.
+  const [columnSizing, setColumnSizing] = useState<Record<string, number>>({});
+  useEffect(() => {
+    const saved = loadColumnWidths(REQUIREMENTS_COLS_COOKIE);
+    if (Object.keys(saved).length > 0) setColumnSizing(saved);
+  }, []);
+
   const table = useReactTable({
     data,
     columns,
-    state: { sorting },
+    state: { sorting, columnSizing },
     onSortingChange: setSorting,
+    onColumnSizingChange: setColumnSizing,
+    columnResizeMode: 'onChange',
+    defaultColumn: { minSize: 60 },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   });
 
+  // Persist widths once a drag ends (not on every mouse move).
+  const resizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+  const wasResizing = useRef(false);
+  useEffect(() => {
+    if (wasResizing.current && !resizingColumn) {
+      saveColumnWidths(REQUIREMENTS_COLS_COOKIE, table.getState().columnSizing);
+    }
+    wasResizing.current = Boolean(resizingColumn);
+  }, [resizingColumn, table]);
+
   const handleAddRow = useCallback(() => {
     addRow({
       id: simpleUUID(),
@@ -384,15 +415,18 @@ export function FrameworkRequirementsClientPage({
       </div>
 
       <div className="scrollbar-primary border-border min-h-0 flex-1 overflow-auto rounded-xs border">
-        <table className="w-full border-collapse">
+        <table
+          className="border-collapse"
+          style={{ tableLayout: 'fixed', width: table.getTotalSize() }}
+        >
           <thead className="bg-muted/50">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    className="border-border text-muted-foreground border-b px-2 py-2 text-left text-xs font-medium"
-                    style={{ width: header.getSize(), maxWidth: header.column.columnDef.maxSize }}
+                    className="border-border text-muted-foreground relative border-b px-2 py-2 text-left text-xs font-medium"
+                    style={{ width: header.getSize() }}
                   >
                     {header.isPlaceholder ? null : header.column.getCanSort() ? (
                       <button
@@ -411,6 +445,15 @@ export function FrameworkRequirementsClientPage({
                     ) : (
                       flexRender(header.column.columnDef.header, header.getContext())
                     )}
+                    {/* FRAME-17: drag handle to resize this column. */}
+                    {header.column.getCanResize() && (
+                      <div
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        onClick={(event) => event.stopPropagation()}
+                        className="hover:bg-primary/50 absolute top-0 right-0 z-10 h-full w-1.5 cursor-col-resize select-none"
+                      />
+                    )}
                   </th>
                 ))}
               </tr>
@@ -429,8 +472,8 @@ export function FrameworkRequirementsClientPage({
                 {row.getVisibleCells().map((cell) => (
                   <td
                     key={cell.id}
-                    className="p-0"
-                    style={{ width: cell.column.getSize(), maxWidth: cell.column.columnDef.maxSize }}
+                    className="overflow-hidden p-0"
+                    style={{ width: cell.column.getSize() }}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
diff --git a/apps/framework-editor/app/(pages)/frameworks/components/FrameworksTreeTable.tsx b/apps/framework-editor/app/(pages)/frameworks/components/FrameworksTreeTable.tsx
index 8d71d9f9d2..476a57c50f 100644
--- a/apps/framework-editor/app/(pages)/frameworks/components/FrameworksTreeTable.tsx
+++ b/apps/framework-editor/app/(pages)/frameworks/components/FrameworksTreeTable.tsx
@@ -1,5 +1,9 @@
 'use client';
 
+import {
+  ColumnResizeHandle,
+  useResizableColumns,
+} from '@/app/components/table/resizable-columns';
 import { Button } from '@trycompai/ui/button';
 import { ChevronDown, ChevronRight, FileText, Folder, Pencil, Trash2 } from 'lucide-react';
 import Link from 'next/link';
@@ -19,6 +23,30 @@ interface FrameworksTreeTableProps {
   onDeleteFamily: (family: FrameworkFamilyWithCount) => void;
 }
 
+// FRAME-17: resizable columns, persisted to a cookie.
+const COOKIE_NAME = 'fwk-frameworks-list-col-widths';
+const COLUMNS: {
+  key: string;
+  label: string;
+  defaultWidth: number;
+  align: 'left' | 'center';
+  resizable: boolean;
+}[] = [
+  { key: 'name', label: 'Name', defaultWidth: 360, align: 'left', resizable: true },
+  { key: 'version', label: 'Version', defaultWidth: 120, align: 'center', resizable: true },
+  { key: 'status', label: 'Status', defaultWidth: 140, align: 'center', resizable: true },
+  {
+    key: 'requirements',
+    label: 'Requirements',
+    defaultWidth: 150,
+    align: 'center',
+    resizable: true,
+  },
+  { key: 'controls', label: 'Controls', defaultWidth: 120, align: 'center', resizable: true },
+  { key: 'actions', label: '', defaultWidth: 88, align: 'center', resizable: false },
+];
+const DEFAULT_WIDTHS = Object.fromEntries(COLUMNS.map((c) => [c.key, c.defaultWidth]));
+
 // Frameworks nested in a family indent ~6 characters past the root, like a file
 // inside a folder in Finder / Windows Explorer.
 const NESTED_INDENT_PX = 48;
@@ -30,23 +58,41 @@ export function FrameworksTreeTable({
   onEditFamily,
   onDeleteFamily,
 }: FrameworksTreeTableProps) {
+  const { widths, startResize } = useResizableColumns(COOKIE_NAME, DEFAULT_WIDTHS);
+  const totalWidth = COLUMNS.reduce((sum, c) => sum + (widths[c.key] ?? c.defaultWidth), 0);
+
   return (
     <div className="scrollbar-primary border-border overflow-x-auto rounded-xs border">
-      <table className="w-full border-collapse text-sm">
+      <table
+        className="border-collapse text-sm"
+        style={{ tableLayout: 'fixed', width: totalWidth, minWidth: '100%' }}
+      >
+        <colgroup>
+          {COLUMNS.map((c) => (
+            <col key={c.key} style={{ width: widths[c.key] ?? c.defaultWidth }} />
+          ))}
+        </colgroup>
         <thead className="bg-muted/50">
           <tr className="text-muted-foreground text-xs">
-            <th className="px-3 py-2 text-left font-medium">Name</th>
-            <th className="px-3 py-2 text-center font-medium">Version</th>
-            <th className="px-3 py-2 text-center font-medium">Status</th>
-            <th className="px-3 py-2 text-center font-medium">Requirements</th>
-            <th className="px-3 py-2 text-center font-medium">Controls</th>
-            <th className="w-20 px-3 py-2" />
+            {COLUMNS.map((c) => (
+              <th
+                key={c.key}
+                className={`relative px-3 py-2 font-medium ${
+                  c.align === 'center' ? 'text-center' : 'text-left'
+                }`}
+              >
+                {c.label}
+                {c.resizable && (
+                  <ColumnResizeHandle onResizeStart={(e) => startResize(c.key, e)} />
+                )}
+              </th>
+            ))}
           </tr>
         </thead>
         <tbody>
           {rows.length === 0 && (
             <tr>
-              <td colSpan={6} className="text-muted-foreground py-8 text-center">
+              <td colSpan={COLUMNS.length} className="text-muted-foreground py-8 text-center">
                 No frameworks yet.
               </td>
             </tr>
@@ -96,12 +142,12 @@ function FamilyRow({
 
   return (
     <tr className="border-border hover:bg-muted/30 border-b transition-colors">
-      <td className="px-3 py-2">
-        <div className="flex items-center gap-1.5">
+      <td className="overflow-hidden px-3 py-2">
+        <div className="flex min-w-0 items-center gap-1.5">
           <button
             type="button"
             onClick={() => onToggle(family.id)}
-            className="text-muted-foreground hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground shrink-0"
             aria-label={expanded ? 'Collapse family' : 'Expand family'}
           >
             {expanded ? (
@@ -111,7 +157,7 @@ function FamilyRow({
             )}
           </button>
           <Folder className="text-muted-foreground h-4 w-4 shrink-0" />
-          <span className="font-medium">{family.name}</span>
+          <span className="truncate font-medium">{family.name}</span>
         </div>
       </td>
       <td className={`${CENTER_CELL} text-muted-foreground`}>{countLabel}</td>
@@ -157,15 +203,15 @@ function FrameworkRow({
 }) {
   return (
     <tr className="border-border hover:bg-muted/30 border-b transition-colors">
-      <td className="px-3 py-2">
+      <td className="overflow-hidden px-3 py-2">
         <div
-          className="flex items-center gap-1.5"
+          className="flex min-w-0 items-center gap-1.5"
           style={{ paddingLeft: indented ? NESTED_INDENT_PX : 0 }}
         >
           {/* Spacer matching the family chevron so names line up. */}
           <span className="inline-block w-4 shrink-0" />
           <FileText className="text-muted-foreground h-4 w-4 shrink-0" />
-          <Link href={`/frameworks/${framework.id}`} className="hover:underline">
+          <Link href={`/frameworks/${framework.id}`} className="truncate hover:underline">
             {framework.name}
           </Link>
         </div>
diff --git a/apps/framework-editor/app/components/table/column-widths-cookie.test.ts b/apps/framework-editor/app/components/table/column-widths-cookie.test.ts
new file mode 100644
index 0000000000..a3ea4da5f4
--- /dev/null
+++ b/apps/framework-editor/app/components/table/column-widths-cookie.test.ts
@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { loadColumnWidths, sanitizeWidths, saveColumnWidths } from './column-widths-cookie';
+
+describe('sanitizeWidths', () => {
+  it('keeps finite positive numbers (rounded) and drops everything else', () => {
+    expect(
+      sanitizeWidths({
+        a: 100,
+        b: 12.7,
+        c: -5,
+        d: 0,
+        e: Number.NaN,
+        f: Number.POSITIVE_INFINITY,
+        g: 'x',
+        h: null,
+      }),
+    ).toEqual({ a: 100, b: 13 });
+  });
+
+  it('returns {} for non-objects', () => {
+    expect(sanitizeWidths(null)).toEqual({});
+    expect(sanitizeWidths('nope')).toEqual({});
+    expect(sanitizeWidths(42)).toEqual({});
+  });
+});
+
+describe('column width cookie round-trip', () => {
+  beforeEach(() => {
+    document.cookie = 'fwk-test-cols=; path=/; max-age=0';
+  });
+
+  it('saves and loads widths', () => {
+    saveColumnWidths('fwk-test-cols', { name: 200, version: 80 });
+    expect(loadColumnWidths('fwk-test-cols')).toEqual({ name: 200, version: 80 });
+  });
+
+  it('drops malformed widths on save', () => {
+    saveColumnWidths('fwk-test-cols', { name: 200, bad: -10, worse: Number.NaN } as Record<
+      string,
+      number
+    >);
+    expect(loadColumnWidths('fwk-test-cols')).toEqual({ name: 200 });
+  });
+
+  it('returns {} when there is no cookie', () => {
+    expect(loadColumnWidths('fwk-missing-cookie')).toEqual({});
+  });
+});
diff --git a/apps/framework-editor/app/components/table/column-widths-cookie.ts b/apps/framework-editor/app/components/table/column-widths-cookie.ts
new file mode 100644
index 0000000000..c8cbb3996d
--- /dev/null
+++ b/apps/framework-editor/app/components/table/column-widths-cookie.ts
@@ -0,0 +1,45 @@
+/**
+ * Persisted column widths for resizable tables (FRAME-17). Stored in a cookie
+ * (per the ticket) keyed by column id, so resizing persists across sessions.
+ */
+
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+const MIN_WIDTH = 1;
+
+/** Keep only finite, positive numeric widths — drops anything malformed. */
+export function sanitizeWidths(value: unknown): Record<string, number> {
+  if (typeof value !== 'object' || value === null) return {};
+  const out: Record<string, number> = {};
+  for (const [key, raw] of Object.entries(value as Record<string, unknown>)) {
+    if (typeof raw === 'number' && Number.isFinite(raw) && raw >= MIN_WIDTH) {
+      out[key] = Math.round(raw);
+    }
+  }
+  return out;
+}
+
+function readCookie(name: string): string | null {
+  const match = document.cookie.split('; ').find((row) => row.startsWith(`${name}=`));
+  return match ? match.slice(name.length + 1) : null;
+}
+
+export function loadColumnWidths(cookieName: string): Record<string, number> {
+  if (typeof document === 'undefined') return {};
+  try {
+    const raw = readCookie(cookieName);
+    if (!raw) return {};
+    return sanitizeWidths(JSON.parse(decodeURIComponent(raw)));
+  } catch {
+    return {};
+  }
+}
+
+export function saveColumnWidths(cookieName: string, widths: Record<string, number>): void {
+  if (typeof document === 'undefined') return;
+  try {
+    const value = encodeURIComponent(JSON.stringify(sanitizeWidths(widths)));
+    document.cookie = `${cookieName}=${value}; path=/; max-age=${ONE_YEAR_SECONDS}; samesite=lax`;
+  } catch {
+    // Ignore — resizing still works in-session even if the cookie can't be set.
+  }
+}
diff --git a/apps/framework-editor/app/components/table/resizable-columns.tsx b/apps/framework-editor/app/components/table/resizable-columns.tsx
new file mode 100644
index 0000000000..af0c79aed6
--- /dev/null
+++ b/apps/framework-editor/app/components/table/resizable-columns.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { loadColumnWidths, saveColumnWidths } from './column-widths-cookie';
+
+// Columns can't be dragged narrower than this.
+const MIN_COLUMN_WIDTH = 60;
+
+/**
+ * FRAME-17: drag-to-resize column widths for a plain `<table>`, persisted to a
+ * cookie. Apply `widths` via a `<colgroup>` with `table-layout: fixed`, and put
+ * a {@link ColumnResizeHandle} on each header cell.
+ */
+export function useResizableColumns(cookieName: string, defaults: Record<string, number>) {
+  const [widths, setWidths] = useState<Record<string, number>>(defaults);
+
+  // Cookies are client-only; hydrate after mount to avoid an SSR mismatch.
+  useEffect(() => {
+    const saved = loadColumnWidths(cookieName);
+    if (Object.keys(saved).length > 0) {
+      setWidths((prev) => ({ ...prev, ...saved }));
+    }
+  }, [cookieName]);
+
+  // Latest widths for the drag handlers without re-binding them every render.
+  const widthsRef = useRef(widths);
+  widthsRef.current = widths;
+
+  const startResize = useCallback(
+    (key: string, event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const startX = event.clientX;
+      const startWidth = widthsRef.current[key] ?? 150;
+
+      const handleMove = (moveEvent: MouseEvent) => {
+        const next = Math.max(
+          MIN_COLUMN_WIDTH,
+          Math.round(startWidth + (moveEvent.clientX - startX)),
+        );
+        setWidths((prev) => (prev[key] === next ? prev : { ...prev, [key]: next }));
+      };
+
+      const handleUp = () => {
+        document.removeEventListener('mousemove', handleMove);
+        document.removeEventListener('mouseup', handleUp);
+        document.body.style.userSelect = '';
+        saveColumnWidths(cookieName, widthsRef.current);
+      };
+
+      // Suppress text selection while dragging.
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', handleMove);
+      document.addEventListener('mouseup', handleUp);
+    },
+    [cookieName],
+  );
+
+  return { widths, startResize };
+}
+
+/** A draggable divider rendered at the right edge of a (relative) header cell. */
+export function ColumnResizeHandle({
+  onResizeStart,
+}: {
+  onResizeStart: (event: React.MouseEvent) => void;
+}) {
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      onMouseDown={onResizeStart}
+      // Don't let a drag on the divider trigger the header's sort click.
+      onClick={(event) => event.stopPropagation()}
+      className="hover:bg-primary/50 absolute top-0 right-0 z-10 h-full w-1.5 cursor-col-resize select-none"
+    />
+  );
+}

From b75be840b38428b9d29062ae88910b1a679dfb96 Mon Sep 17 00:00:00 2001
From: Tofik Hasanov <annexcies@gmail.com>
Date: Tue, 23 Jun 2026 14:22:15 -0400
Subject: [PATCH 2/3] fix(framework-editor): clean up resize listeners on
 unmount (FRAME-17 review)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cubic review: startResize attached document mousemove/mouseup listeners and set
body.userSelect = 'none', but had no fallback if the component unmounted before
mouseup — leaking the listeners and leaving text selection disabled. Store the
drag teardown in a ref and run it from an unmount effect as well as from
mouseup. Adds tests for both teardown paths.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MGwXoPb6qHxuHy8miVmyxT
---
 .../table/resizable-columns.test.tsx          | 41 +++++++++++++++++++
 .../components/table/resizable-columns.tsx    | 16 +++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 apps/framework-editor/app/components/table/resizable-columns.test.tsx

diff --git a/apps/framework-editor/app/components/table/resizable-columns.test.tsx b/apps/framework-editor/app/components/table/resizable-columns.test.tsx
new file mode 100644
index 0000000000..309b26b7d4
--- /dev/null
+++ b/apps/framework-editor/app/components/table/resizable-columns.test.tsx
@@ -0,0 +1,41 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import { useResizableColumns } from './resizable-columns';
+
+afterEach(() => {
+  document.body.style.userSelect = '';
+});
+
+const mouseDown = (clientX = 0) =>
+  ({
+    preventDefault() {},
+    stopPropagation() {},
+    clientX,
+  }) as unknown as ReactMouseEvent;
+
+describe('useResizableColumns drag teardown', () => {
+  it('restores text selection if the component unmounts mid-drag', () => {
+    const { result, unmount } = renderHook(() =>
+      useResizableColumns('fwk-test-resize-unmount', { name: 200 }),
+    );
+    act(() => result.current.startResize('name', mouseDown(10)));
+    expect(document.body.style.userSelect).toBe('none');
+
+    unmount();
+    expect(document.body.style.userSelect).toBe('');
+  });
+
+  it('restores text selection when the drag ends normally (mouseup)', () => {
+    const { result } = renderHook(() =>
+      useResizableColumns('fwk-test-resize-mouseup', { name: 200 }),
+    );
+    act(() => result.current.startResize('name', mouseDown(10)));
+    expect(document.body.style.userSelect).toBe('none');
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mouseup'));
+    });
+    expect(document.body.style.userSelect).toBe('');
+  });
+});
diff --git a/apps/framework-editor/app/components/table/resizable-columns.tsx b/apps/framework-editor/app/components/table/resizable-columns.tsx
index af0c79aed6..e4773464be 100644
--- a/apps/framework-editor/app/components/table/resizable-columns.tsx
+++ b/apps/framework-editor/app/components/table/resizable-columns.tsx
@@ -26,6 +26,9 @@ export function useResizableColumns(cookieName: string, defaults: Record<string,
   const widthsRef = useRef(widths);
   widthsRef.current = widths;
 
+  // Teardown for an in-progress drag, so it can also run if we unmount mid-drag.
+  const activeCleanupRef = useRef<(() => void) | null>(null);
+
   const startResize = useCallback(
     (key: string, event: React.MouseEvent) => {
       event.preventDefault();
@@ -41,10 +44,16 @@ export function useResizableColumns(cookieName: string, defaults: Record<string,
         setWidths((prev) => (prev[key] === next ? prev : { ...prev, [key]: next }));
       };
 
-      const handleUp = () => {
+      // Detach listeners + restore selection. Safe to call from mouseup or unmount.
+      const detach = () => {
         document.removeEventListener('mousemove', handleMove);
         document.removeEventListener('mouseup', handleUp);
         document.body.style.userSelect = '';
+        activeCleanupRef.current = null;
+      };
+
+      const handleUp = () => {
+        detach();
         saveColumnWidths(cookieName, widthsRef.current);
       };
 
@@ -52,10 +61,15 @@ export function useResizableColumns(cookieName: string, defaults: Record<string,
       document.body.style.userSelect = 'none';
       document.addEventListener('mousemove', handleMove);
       document.addEventListener('mouseup', handleUp);
+      activeCleanupRef.current = detach;
     },
     [cookieName],
   );
 
+  // Fallback: unmounting mid-drag tears down the global listeners and restores
+  // text selection so nothing leaks.
+  useEffect(() => () => activeCleanupRef.current?.(), []);
+
   return { widths, startResize };
 }
 

From 7d7792d29bc481fa790708e3ccfe69a245f16f49 Mon Sep 17 00:00:00 2001
From: Tofik Hasanov <annexcies@gmail.com>
Date: Tue, 23 Jun 2026 16:02:53 -0400
Subject: [PATCH 3/3] feat(integration-platform): capture + surface OAuth
 connect failures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Today an OAuth connect failure is invisible after the moment it happens: the
shared callback logs the error to ephemeral server logs and redirects to the app
with `?error=...&error_description=...`, but the frontend only handled
`?success=` and ignored the error — and nothing was persisted. So "the
integration won't connect" had no error to look up (the QuickBooks /
CalendarBridge case).

This captures the error WITHOUT touching the shared OAuth callback flow:
- Frontend: the redirect handlers on the integrations grid (PlatformIntegrations)
  and the provider-detail page (ProviderDetailView) now also read
  `?error=`/`?error_description=`, show the user the real reason (toast), record
  it best-effort, and clean the URL. Additive `error` branch alongside the
  existing `success` branch — the success path is unchanged.
- New table `IntegrationOAuthError` (CREATE TABLE only; no FK relations because a
  connect failure has no IntegrationConnection yet). Never stores the auth `code`
  or tokens — only provider, error code, description, org/user, timestamp.
- New session-authed write endpoint `POST /v1/integrations/oauth-errors` that the
  frontend posts to. This is a brand-new controller — the shared `oauthCallback`
  is not touched.
- New internal read endpoint `GET /v1/internal/integration-debug/oauth-errors`
  so a failed connect is diagnosable by org/provider via the internal API.

Tests: oauth-errors.controller.spec (2) + a listOAuthErrors service test (1);
11/11 integration-platform debug/oauth tests pass. Touched API + frontend files
typecheck clean (remaining app typecheck errors are pre-existing on main).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AU5798EG3PQdRuYSPJgXmy
---
 .../internal-integration-debug.controller.ts  | 18 +++++
 .../oauth-errors.controller.spec.ts           | 65 +++++++++++++++++++
 .../controllers/oauth-errors.controller.ts    | 60 +++++++++++++++++
 .../integration-platform.module.ts            |  2 +
 ...internal-integration-debug.service.spec.ts | 33 ++++++++++
 .../internal-integration-debug.service.ts     | 26 ++++++++
 .../[slug]/components/ProviderDetailView.tsx  | 28 ++++++++
 .../components/PlatformIntegrations.tsx       | 34 ++++++++++
 .../migration.sql                             | 18 +++++
 .../schema/integration-oauth-error.prisma     | 24 +++++++
 10 files changed, 308 insertions(+)
 create mode 100644 apps/api/src/integration-platform/controllers/oauth-errors.controller.spec.ts
 create mode 100644 apps/api/src/integration-platform/controllers/oauth-errors.controller.ts
 create mode 100644 packages/db/prisma/migrations/20260623120000_add_integration_oauth_error/migration.sql
 create mode 100644 packages/db/prisma/schema/integration-oauth-error.prisma

diff --git a/apps/api/src/integration-platform/controllers/internal-integration-debug.controller.ts b/apps/api/src/integration-platform/controllers/internal-integration-debug.controller.ts
index 91d1e3e1fc..7b59512f98 100644
--- a/apps/api/src/integration-platform/controllers/internal-integration-debug.controller.ts
+++ b/apps/api/src/integration-platform/controllers/internal-integration-debug.controller.ts
@@ -125,4 +125,22 @@ export class InternalIntegrationDebugController {
       checkId: body.checkId,
     });
   }
+
+  /**
+   * Read recently captured OAuth callback errors (recorded by the frontend on a
+   * failed connect). Use this to diagnose "the integration won't connect" for
+   * any org/provider — the exact provider error is here instead of lost.
+   */
+  @Get('oauth-errors')
+  async listOAuthErrors(
+    @Query('organizationId') organizationId?: string,
+    @Query('providerSlug') providerSlug?: string,
+    @Query('limit') limit?: string,
+  ) {
+    return this.debugService.listOAuthErrors({
+      organizationId,
+      providerSlug,
+      limit: parseOptionalInt(limit),
+    });
+  }
 }
diff --git a/apps/api/src/integration-platform/controllers/oauth-errors.controller.spec.ts b/apps/api/src/integration-platform/controllers/oauth-errors.controller.spec.ts
new file mode 100644
index 0000000000..79c9ab61ea
--- /dev/null
+++ b/apps/api/src/integration-platform/controllers/oauth-errors.controller.spec.ts
@@ -0,0 +1,65 @@
+jest.mock('@db', () => ({
+  db: { integrationOAuthError: { create: jest.fn() } },
+}));
+// The real auth guards import better-auth, which fails to load under jest's ESM
+// shim. Mock them so the controller module can be imported; they're not under
+// test here (we test the record() handler logic).
+jest.mock('../../auth/hybrid-auth.guard', () => ({ HybridAuthGuard: class {} }));
+jest.mock('../../auth/permission.guard', () => ({ PermissionGuard: class {} }));
+jest.mock('../../auth/require-permission.decorator', () => ({
+  RequirePermission: () => () => undefined,
+}));
+jest.mock('../../auth/auth-context.decorator', () => ({
+  OrganizationId: () => () => undefined,
+  UserId: () => () => undefined,
+}));
+
+import { db } from '@db';
+import { OAuthErrorsController } from './oauth-errors.controller';
+
+const mockedDb = db as unknown as {
+  integrationOAuthError: { create: jest.Mock };
+};
+
+describe('OAuthErrorsController', () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it('records an OAuth error scoped to the org + user', async () => {
+    mockedDb.integrationOAuthError.create.mockResolvedValue({});
+    const controller = new OAuthErrorsController();
+
+    const res = await controller.record('org_1', 'user_1', {
+      providerSlug: 'quickbooks-online',
+      error: 'token_exchange_failed',
+      errorDescription: 'Sandbox app not allowed',
+    });
+
+    expect(res).toEqual({ recorded: true });
+    expect(mockedDb.integrationOAuthError.create).toHaveBeenCalledWith({
+      data: {
+        organizationId: 'org_1',
+        userId: 'user_1',
+        providerSlug: 'quickbooks-online',
+        errorCode: 'token_exchange_failed',
+        errorDescription: 'Sandbox app not allowed',
+      },
+    });
+  });
+
+  it('handles a missing user and missing optional fields (nulls, no secrets)', async () => {
+    mockedDb.integrationOAuthError.create.mockResolvedValue({});
+    const controller = new OAuthErrorsController();
+
+    await controller.record('org_2', undefined, { providerSlug: 'zoho-crm' });
+
+    expect(mockedDb.integrationOAuthError.create).toHaveBeenCalledWith({
+      data: {
+        organizationId: 'org_2',
+        userId: null,
+        providerSlug: 'zoho-crm',
+        errorCode: null,
+        errorDescription: null,
+      },
+    });
+  });
+});
diff --git a/apps/api/src/integration-platform/controllers/oauth-errors.controller.ts b/apps/api/src/integration-platform/controllers/oauth-errors.controller.ts
new file mode 100644
index 0000000000..1d641087db
--- /dev/null
+++ b/apps/api/src/integration-platform/controllers/oauth-errors.controller.ts
@@ -0,0 +1,60 @@
+import { Body, Controller, Post, UseGuards } from '@nestjs/common';
+import { ApiExcludeController } from '@nestjs/swagger';
+import { IsOptional, IsString, MaxLength } from 'class-validator';
+import { db } from '@db';
+import { HybridAuthGuard } from '../../auth/hybrid-auth.guard';
+import { PermissionGuard } from '../../auth/permission.guard';
+import { RequirePermission } from '../../auth/require-permission.decorator';
+import { OrganizationId, UserId } from '../../auth/auth-context.decorator';
+
+class RecordOAuthErrorDto {
+  @IsString()
+  @MaxLength(100)
+  providerSlug!: string;
+
+  /** OAuth error code from the provider redirect (e.g. "access_denied"). */
+  @IsOptional()
+  @IsString()
+  @MaxLength(200)
+  error?: string;
+
+  /** Human-readable error description from the provider redirect. */
+  @IsOptional()
+  @IsString()
+  @MaxLength(2000)
+  errorDescription?: string;
+}
+
+/**
+ * Records an OAuth callback error that the frontend captured from the redirect
+ * URL (`?error=...&error_description=...`). This is the *capture* side of OAuth
+ * error visibility — it does NOT touch the shared OAuth callback flow. The
+ * stored rows are read back via the internal debug API
+ * (`GET /internal/integration-debug/oauth-errors`).
+ *
+ * Never receives or stores secrets: the frontend only forwards the error code +
+ * description, never the auth `code` or any token.
+ */
+@ApiExcludeController()
+@Controller({ path: 'integrations/oauth-errors', version: '1' })
+@UseGuards(HybridAuthGuard, PermissionGuard)
+export class OAuthErrorsController {
+  @Post()
+  @RequirePermission('integration', 'create')
+  async record(
+    @OrganizationId() organizationId: string,
+    @UserId() userId: string | undefined,
+    @Body() body: RecordOAuthErrorDto,
+  ): Promise<{ recorded: true }> {
+    await db.integrationOAuthError.create({
+      data: {
+        organizationId,
+        userId: userId ?? null,
+        providerSlug: body.providerSlug,
+        errorCode: body.error ?? null,
+        errorDescription: body.errorDescription ?? null,
+      },
+    });
+    return { recorded: true };
+  }
+}
diff --git a/apps/api/src/integration-platform/integration-platform.module.ts b/apps/api/src/integration-platform/integration-platform.module.ts
index 23fc72dd4d..aa9c2a6954 100644
--- a/apps/api/src/integration-platform/integration-platform.module.ts
+++ b/apps/api/src/integration-platform/integration-platform.module.ts
@@ -3,6 +3,7 @@ import { AuthModule } from '../auth/auth.module';
 import { CloudSecurityModule } from '../cloud-security/cloud-security.module';
 import { OAuthController } from './controllers/oauth.controller';
 import { OAuthAppsController } from './controllers/oauth-apps.controller';
+import { OAuthErrorsController } from './controllers/oauth-errors.controller';
 import { ConnectionsController } from './controllers/connections.controller';
 import { AdminIntegrationsController } from './controllers/admin-integrations.controller';
 import { DynamicIntegrationsController } from './controllers/dynamic-integrations.controller';
@@ -42,6 +43,7 @@ import { GenericDeviceSyncService } from './services/generic-device-sync.service
   controllers: [
     OAuthController,
     OAuthAppsController,
+    OAuthErrorsController,
     ConnectionsController,
     AdminIntegrationsController,
     DynamicIntegrationsController,
diff --git a/apps/api/src/integration-platform/services/internal-integration-debug.service.spec.ts b/apps/api/src/integration-platform/services/internal-integration-debug.service.spec.ts
index 8e6d6f0177..7fad14f7ab 100644
--- a/apps/api/src/integration-platform/services/internal-integration-debug.service.spec.ts
+++ b/apps/api/src/integration-platform/services/internal-integration-debug.service.spec.ts
@@ -3,6 +3,7 @@ jest.mock('@db', () => ({
     integrationConnection: { findMany: jest.fn(), findUnique: jest.fn() },
     integrationCredentialVersion: { findUnique: jest.fn(), findMany: jest.fn() },
     integrationCheckRun: { findFirst: jest.fn(), findMany: jest.fn() },
+    integrationOAuthError: { findMany: jest.fn() },
   },
 }));
 
@@ -22,6 +23,7 @@ const mockedDb = db as unknown as {
   integrationConnection: { findMany: jest.Mock; findUnique: jest.Mock };
   integrationCredentialVersion: { findUnique: jest.Mock; findMany: jest.Mock };
   integrationCheckRun: { findFirst: jest.Mock; findMany: jest.Mock };
+  integrationOAuthError: { findMany: jest.Mock };
 };
 
 const makeService = (runner: Partial<ConnectionCheckRunnerService> = {}) =>
@@ -267,4 +269,35 @@ describe('InternalIntegrationDebugService', () => {
       expect(runCandidateCheck).not.toHaveBeenCalled();
     });
   });
+
+  describe('listOAuthErrors', () => {
+    it('filters by org + provider and clamps a non-numeric limit', async () => {
+      mockedDb.integrationOAuthError.findMany.mockResolvedValue([
+        {
+          id: 'ioe_1',
+          organizationId: 'org_1',
+          providerSlug: 'quickbooks-online',
+          errorCode: 'token_exchange_failed',
+          errorDescription: 'sandbox',
+          createdAt: new Date(),
+        },
+      ]);
+      const service = makeService();
+
+      const { errors, total } = await service.listOAuthErrors({
+        organizationId: 'org_1',
+        providerSlug: 'quickbooks-online',
+        limit: Number('nope'),
+      });
+
+      expect(total).toBe(1);
+      expect(errors[0].errorCode).toBe('token_exchange_failed');
+      const args = mockedDb.integrationOAuthError.findMany.mock.calls[0][0];
+      expect(args.where).toEqual({
+        organizationId: 'org_1',
+        providerSlug: 'quickbooks-online',
+      });
+      expect(Number.isFinite(args.take)).toBe(true);
+    });
+  });
 });
diff --git a/apps/api/src/integration-platform/services/internal-integration-debug.service.ts b/apps/api/src/integration-platform/services/internal-integration-debug.service.ts
index f1b74fd8c5..2055f73865 100644
--- a/apps/api/src/integration-platform/services/internal-integration-debug.service.ts
+++ b/apps/api/src/integration-platform/services/internal-integration-debug.service.ts
@@ -313,4 +313,30 @@ export class InternalIntegrationDebugService {
       checkId,
     });
   }
+
+  /**
+   * Read recently captured OAuth callback errors (recorded by the frontend when
+   * a connect redirects back with an error). Makes a failed connect diagnosable
+   * after the fact instead of being invisible.
+   */
+  async listOAuthErrors(params: {
+    organizationId?: string;
+    providerSlug?: string;
+    limit?: number;
+  }) {
+    const { organizationId, providerSlug } = params;
+    const rawLimit = params.limit ?? NaN;
+    const limit = Number.isFinite(rawLimit)
+      ? Math.min(Math.max(rawLimit, 1), 200)
+      : 50;
+    const errors = await db.integrationOAuthError.findMany({
+      where: {
+        ...(organizationId ? { organizationId } : {}),
+        ...(providerSlug ? { providerSlug } : {}),
+      },
+      orderBy: { createdAt: 'desc' },
+      take: limit,
+    });
+    return { errors, total: errors.length };
+  }
 }
diff --git a/apps/app/src/app/(app)/[orgId]/integrations/[slug]/components/ProviderDetailView.tsx b/apps/app/src/app/(app)/[orgId]/integrations/[slug]/components/ProviderDetailView.tsx
index 89504c5b59..d793abbab6 100644
--- a/apps/app/src/app/(app)/[orgId]/integrations/[slug]/components/ProviderDetailView.tsx
+++ b/apps/app/src/app/(app)/[orgId]/integrations/[slug]/components/ProviderDetailView.tsx
@@ -112,6 +112,7 @@ export function ProviderDetailView({
   const [gcpSelectedProjectIds, setGcpSelectedProjectIds] = useState<string[]>([]);
   const oauthBootstrapHandledRef = useRef(false);
   const settingsQueryHandledRef = useRef(false);
+  const oauthErrorHandledRef = useRef(false);
 
   // OAuth return (?success=true): strip query, detect org/projects (NOT services yet — user must select projects first)
   useEffect(() => {
@@ -226,6 +227,33 @@ export function ProviderDetailView({
     router.replace(`/${orgId}/integrations/${provider.id}`, { scroll: false });
   }, [orgId, provider.id, router, searchParams, selectedConnection?.id]);
 
+  // Surface + record an OAuth failure that lands on the provider page. The
+  // backend redirects with `?error=...&error_description=...`; show the user the
+  // real reason and record it (best-effort) so failed connects are diagnosable.
+  useEffect(() => {
+    if (oauthErrorHandledRef.current) return;
+    const error = searchParams.get('error');
+    if (!error) return;
+
+    oauthErrorHandledRef.current = true;
+    const errorDescription = searchParams.get('error_description');
+    toast.error(`Connection failed: ${errorDescription || error}`);
+
+    void api
+      .post(
+        '/v1/integrations/oauth-errors',
+        {
+          providerSlug: provider.id,
+          error,
+          errorDescription: errorDescription ?? undefined,
+        },
+        orgId,
+      )
+      .catch(() => {});
+
+    router.replace(`/${orgId}/integrations/${provider.id}`, { scroll: false });
+  }, [orgId, provider.id, router, searchParams]);
+
   return (
     <>
       <Stack gap="lg">
diff --git a/apps/app/src/app/(app)/[orgId]/integrations/components/PlatformIntegrations.tsx b/apps/app/src/app/(app)/[orgId]/integrations/components/PlatformIntegrations.tsx
index f7457e2abb..d53c655249 100644
--- a/apps/app/src/app/(app)/[orgId]/integrations/components/PlatformIntegrations.tsx
+++ b/apps/app/src/app/(app)/[orgId]/integrations/components/PlatformIntegrations.tsx
@@ -7,6 +7,7 @@ import {
   useIntegrationMutations,
   useIntegrationProviders,
 } from '@/hooks/use-integration-platform';
+import { api } from '@/lib/api-client';
 import { usePermissions } from '@/hooks/use-permissions';
 import { useVendors } from '@/hooks/use-vendors';
 import { Badge } from '@trycompai/ui/badge';
@@ -129,6 +130,7 @@ export function PlatformIntegrations({ className, taskTemplates }: PlatformInteg
   const [selectedCategory, setSelectedCategory] = useState<IntegrationCategory | 'All'>('All');
   const [connectingProvider, setConnectingProvider] = useState<string | null>(null);
   const hasHandledOAuthRef = useRef(false);
+  const hasHandledOAuthErrorRef = useRef(false);
 
   // Custom integration dialog state
   const [selectedCustomIntegration, setSelectedCustomIntegration] = useState<Integration | null>(
@@ -329,6 +331,38 @@ export function PlatformIntegrations({ className, taskTemplates }: PlatformInteg
     window.history.replaceState({}, '', url.toString());
   }, [searchParams, providers, loadingProviders, router, orgId]);
 
+  // Surface + record OAuth failures that land back here. The backend redirects
+  // with `?error=...&error_description=...`; previously that was shown to no one
+  // and stored nowhere. Now we tell the user the real reason and record it so a
+  // failed connect is diagnosable later (read via the internal debug API).
+  useEffect(() => {
+    if (hasHandledOAuthErrorRef.current) return;
+
+    const error = searchParams.get('error');
+    if (!error) return;
+
+    hasHandledOAuthErrorRef.current = true;
+    const errorDescription = searchParams.get('error_description');
+    const providerSlug = searchParams.get('provider') || 'unknown';
+
+    toast.error(`Connection failed: ${errorDescription || error}`);
+
+    // Best-effort — never let recording (or its failure) affect the UI.
+    void api
+      .post(
+        '/v1/integrations/oauth-errors',
+        { providerSlug, error, errorDescription: errorDescription ?? undefined },
+        orgId,
+      )
+      .catch(() => {});
+
+    const url = new URL(window.location.href);
+    url.searchParams.delete('error');
+    url.searchParams.delete('error_description');
+    url.searchParams.delete('provider');
+    window.history.replaceState({}, '', url.toString());
+  }, [searchParams, orgId]);
+
   // Create a map from templateId to taskId for quick lookup
   const templateToTaskMap = useMemo(
     () => new Map(taskTemplates.map((t) => [t.id, t.taskId])),
diff --git a/packages/db/prisma/migrations/20260623120000_add_integration_oauth_error/migration.sql b/packages/db/prisma/migrations/20260623120000_add_integration_oauth_error/migration.sql
new file mode 100644
index 0000000000..7d8d9f98df
--- /dev/null
+++ b/packages/db/prisma/migrations/20260623120000_add_integration_oauth_error/migration.sql
@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "IntegrationOAuthError" (
+    "id" TEXT NOT NULL DEFAULT generate_prefixed_cuid('ioe'::text),
+    "organizationId" TEXT NOT NULL,
+    "userId" TEXT,
+    "providerSlug" TEXT NOT NULL,
+    "errorCode" TEXT,
+    "errorDescription" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "IntegrationOAuthError_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "IntegrationOAuthError_organizationId_providerSlug_idx" ON "IntegrationOAuthError"("organizationId", "providerSlug");
+
+-- CreateIndex
+CREATE INDEX "IntegrationOAuthError_createdAt_idx" ON "IntegrationOAuthError"("createdAt");
diff --git a/packages/db/prisma/schema/integration-oauth-error.prisma b/packages/db/prisma/schema/integration-oauth-error.prisma
new file mode 100644
index 0000000000..df521613e3
--- /dev/null
+++ b/packages/db/prisma/schema/integration-oauth-error.prisma
@@ -0,0 +1,24 @@
+// ===== Integration OAuth error capture =====
+// Append-only diagnostic log of OAuth callback errors, recorded by the frontend
+// when an OAuth connect redirects back with `?error=...&error_description=...`.
+// This makes failed connects diagnosable after the fact (the redirect error was
+// previously shown to no one and stored nowhere). No FK relations — it must be
+// writable even when no IntegrationConnection exists yet (connect failed before
+// one was created). Never stores secrets (no auth `code`, no tokens).
+model IntegrationOAuthError {
+  id               String   @id @default(dbgenerated("generate_prefixed_cuid('ioe'::text)"))
+  /// Organization that initiated the OAuth flow.
+  organizationId   String
+  /// User that initiated it (from the session), if available.
+  userId           String?
+  /// Provider slug (e.g. "quickbooks-online", "zoho-crm").
+  providerSlug     String
+  /// OAuth error code from the provider redirect (e.g. "access_denied", "token_exchange_failed").
+  errorCode        String?
+  /// Human-readable error description from the provider redirect.
+  errorDescription String?
+  createdAt        DateTime @default(now())
+
+  @@index([organizationId, providerSlug])
+  @@index([createdAt])
+}