@treenity/mods 3.0.1

package/sim/view.tsx

@@ -0,0 +1,446 @@
+// AgentSim views — World map + Agent card + Item card
+// WorldView: controls, spatial map with entities + proximity links, event log
+// AgentView: profile, editable prompt, memory, event inbox
+// ItemView: description card
+
+import { getComponent, type NodeData, register } from '@treenity/core';
+import { useCurrentNode } from '@treenity/react/context';
+import { useChildren } from '@treenity/react/hooks';
+import { trpc } from '@treenity/react/trpc';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  type EventEntry,
+  SimAi,
+  SimConfig,
+  SimDescriptive,
+  SimEvents,
+  SimMemory,
+  SimNearby,
+  SimPosition,
+  SimRound,
+} from './types';
+
+type Link = { x1: number; y1: number; x2: number; y2: number; opacity: number };
+
+function buildLinks(entities: NodeData[]): Link[] {
+  const posByName = new Map<string, SimPosition & { $type: string }>();
+  for (const a of entities) {
+    const d = getComponent(a, SimDescriptive);
+    const p = getComponent(a, SimPosition);
+    if (d && p) posByName.set(d.name, p);
+  }
+  const links: Link[] = [];
+  const seen = new Set<string>();
+  for (const a of entities) {
+    const desc = getComponent(a, SimDescriptive);
+    const pos = getComponent(a, SimPosition);
+    const nearby = getComponent(a, SimNearby);
+    if (!desc || !pos || !nearby?.agents) continue;
+    for (const other of nearby.agents) {
+      const key = [desc.name, other].sort().join('|');
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const op = posByName.get(other);
+      if (!op) continue;
+      const d = Math.sqrt((pos.x - op.x) ** 2 + (pos.y - op.y) ** 2);
+      const maxR = Math.max(pos.radius, op.radius);
+      links.push({
+        x1: pos.x, y1: pos.y, x2: op.x, y2: op.y,
+        opacity: maxR > 0 ? 0.15 + 0.35 * (1 - d / maxR) : 0.3,
+      });
+    }
+  }
+  return links;
+}
+
+const btn = {
+  padding: '4px 12px',
+  borderRadius: 'var(--radius)',
+  border: '1px solid var(--border)',
+  background: 'var(--surface)',
+  color: 'var(--text)',
+  cursor: 'pointer',
+  fontSize: 11,
+} as const;
+
+function formatAction(e: EventEntry): string {
+  const msg = (e.data as any)?.message;
+  if (e.action.startsWith('speak') && msg) return `"${msg}"`;
+  if (e.action === 'move') return `→ (${(e.data as any).x}, ${(e.data as any).y})`;
+  if (e.action.includes('→')) return e.action;
+  return e.action;
+}
+
+// ── WorldView ──
+
+function errMsg(e: unknown): string {
+  if (e instanceof Error) return e.message;
+  return String(e);
+}
+
+function WorldView() {
+  const node = useCurrentNode();
+  const children = useChildren(node.$path, { watchNew: true });
+  const [selected, setSelected] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const mapRef = useRef<HTMLDivElement>(null);
+
+  const call = useCallback((p: Parameters<typeof trpc.execute.mutate>[0]) => {
+    setError(null);
+    trpc.execute.mutate(p).catch((e) => setError(errMsg(e)));
+  }, []);
+
+  const cfg = getComponent(node, SimConfig);
+  const round = getComponent(node, SimRound);
+  const entities = children.filter((n: NodeData) => n.$type === 'sim.agent' || n.$type === 'sim.item');
+  const W = cfg?.width ?? 600;
+  const H = cfg?.height ?? 400;
+  const log = round?.log ?? [];
+  const lastRound = (round?.current ?? 1) - 1;
+  const links = useMemo(() => buildLinks(entities), [entities]);
+
+  const toggle = useCallback(() => {
+    call({ path: node.$path, action: cfg?.running ? 'stop' : 'start' });
+  }, [node.$path, cfg?.running, call]);
+
+  const onMapClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!selected || !mapRef.current) return;
+      const rect = mapRef.current.getBoundingClientRect();
+      const x = Math.round(e.clientX - rect.left);
+      const y = Math.round(e.clientY - rect.top);
+      call({ path: selected, action: 'move', data: { x, y } });
+    },
+    [selected, call],
+  );
+
+  const setSpeed = useCallback(
+    (delay: number) => {
+      call({ path: node.$path, action: 'set-config', data: { roundDelay: delay } });
+    },
+    [node.$path, call],
+  );
+
+  return (
+    <div style={{ fontFamily: 'var(--mono)', fontSize: 13 }}>
+      {/* Controls */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+        <button
+          onClick={toggle}
+          style={{
+            ...btn,
+            background: cfg?.running ? 'var(--danger, #c44)' : 'var(--accent)',
+            color: '#fff',
+            fontWeight: 600,
+          }}
+        >
+          {cfg?.running ? 'Stop' : 'Start'}
+        </button>
+        <span style={{ color: 'var(--text-2)' }}>R{round?.current ?? 0}</span>
+        {round?.phase === 'thinking' && (
+          <span style={{ color: 'var(--accent)' }}>thinking...</span>
+        )}
+        <span style={{ color: 'var(--text-3)', fontSize: 11 }}>|</span>
+        {[1000, 3000, 5000, 10000].map((d) => (
+          <button
+            key={d}
+            onClick={() => setSpeed(d)}
+            style={{
+              ...btn,
+              background: cfg?.roundDelay === d ? 'var(--accent)' : 'var(--surface)',
+              color: cfg?.roundDelay === d ? '#fff' : 'var(--text-2)',
+            }}
+          >
+            {d / 1000}s
+          </button>
+        ))}
+        <span style={{ color: 'var(--text-3)', marginLeft: 'auto', fontSize: 11 }}>
+          {entities.length} entities
+          {selected && ` · click map to move`}
+        </span>
+      </div>
+
+      {error && (
+        <div onClick={() => setError(null)} style={{ padding: '6px 12px', marginBottom: 8, background: 'var(--danger, #c44)', color: '#fff', borderRadius: 'var(--radius)', fontSize: 12, cursor: 'pointer' }}>
+          {error}
+        </div>
+      )}
+
+      {/* Map */}
+      <div
+        ref={mapRef}
+        onClick={onMapClick}
+        style={{
+          position: 'relative',
+          width: W,
+          height: H,
+          background: 'var(--surface)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius)',
+          overflow: 'hidden',
+          cursor: selected ? 'crosshair' : 'default',
+        }}
+      >
+        <svg
+          style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1 }}
+          width={W}
+          height={H}
+        >
+          {links.map((l, i) => (
+            <line
+              key={i}
+              x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2}
+              stroke="var(--accent, #6366f1)"
+              strokeWidth={1.5}
+              opacity={l.opacity}
+            />
+          ))}
+        </svg>
+
+        {entities.map((a: NodeData) => {
+          const pos = getComponent(a, SimPosition);
+          const desc = getComponent(a, SimDescriptive);
+          if (!pos) return null;
+          const isSel = selected === a.$path;
+          const isItem = a.$type === 'sim.item';
+          return (
+            <div key={a.$path}>
+              <div
+                style={{
+                  position: 'absolute',
+                  left: pos.x - pos.radius,
+                  top: pos.y - pos.radius,
+                  width: pos.radius * 2,
+                  height: pos.radius * 2,
+                  borderRadius: '50%',
+                  border: `1px dashed ${isSel ? 'var(--accent)' : 'var(--border)'}`,
+                  opacity: isSel ? 0.5 : 0.2,
+                  pointerEvents: 'none',
+                }}
+              />
+              <div
+                onClick={(e) => { e.stopPropagation(); setSelected(isSel ? null : a.$path); }}
+                style={{
+                  position: 'absolute',
+                  left: pos.x - (isItem ? 12 : 16),
+                  top: pos.y - (isItem ? 12 : 16),
+                  width: isItem ? 24 : 32,
+                  height: isItem ? 24 : 32,
+                  borderRadius: isItem ? 'var(--radius)' : '50%',
+                  background: isItem ? 'var(--surface)' : 'var(--accent)',
+                  border: isSel ? '2px solid #fff' : `1px solid ${isItem ? 'var(--border)' : 'transparent'}`,
+                  boxShadow: isSel ? '0 0 0 2px var(--accent)' : 'none',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: isItem ? 14 : 16,
+                  zIndex: 2,
+                  cursor: 'pointer',
+                }}
+                title={`${desc?.name} (${pos.x}, ${pos.y}) r=${pos.radius} [${a.$type}]`}
+              >
+                {desc?.icon ?? '?'}
+              </div>
+              <div
+                style={{
+                  position: 'absolute',
+                  left: pos.x,
+                  top: pos.y + (isItem ? 14 : 18),
+                  transform: 'translateX(-50%)',
+                  fontSize: 10,
+                  color: isSel ? 'var(--accent)' : 'var(--text-2)',
+                  fontWeight: isSel ? 600 : 400,
+                  whiteSpace: 'nowrap',
+                  zIndex: 2,
+                  pointerEvents: 'none',
+                }}
+              >
+                {desc?.name}
+              </div>
+            </div>
+          );
+        })}
+
+        {entities.length === 0 && (
+          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-3)' }}>
+            No entities — add sim.agent or sim.item children
+          </div>
+        )}
+      </div>
+
+      {/* Event Log */}
+      <div style={{ marginTop: 12, maxHeight: 240, overflowY: 'auto' }}>
+        <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>
+          Event Log ({log.length})
+        </div>
+        {log.length === 0 && (
+          <div style={{ color: 'var(--text-3)', padding: 8 }}>No events yet — press Start</div>
+        )}
+        {[...log].reverse().map((e, i) => (
+          <div
+            key={`${e.ts}-${i}`}
+            style={{
+              display: 'flex',
+              gap: 8,
+              padding: '4px 8px',
+              background: e.round === lastRound ? 'var(--accent-bg, rgba(99,102,241,0.08))' : 'transparent',
+              borderRadius: 'var(--radius)',
+              fontSize: 12,
+            }}
+          >
+            <span style={{ minWidth: 28, color: 'var(--text-3)' }}>R{e.round}</span>
+            <span>{e.icon}</span>
+            <span style={{ color: 'var(--accent)', minWidth: 48 }}>{e.agent}</span>
+            <span style={{ color: 'var(--text-2)', flex: 1 }}>{formatAction(e)}</span>
+            {e.heardBy?.length ? (
+              <span style={{ color: 'var(--text-3)', fontSize: 10 }}>
+                heard: {e.heardBy.join(', ')}
+              </span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── AgentView ──
+
+function AgentView() {
+  const node = useCurrentNode();
+  const desc = getComponent(node, SimDescriptive);
+  const pos = getComponent(node, SimPosition);
+  const mem = getComponent(node, SimMemory);
+  const ai = getComponent(node, SimAi);
+  const events = getComponent(node, SimEvents)?.entries ?? [];
+
+  const [editPrompt, setEditPrompt] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const savePrompt = useCallback(() => {
+    if (editPrompt === null) return;
+    setError(null);
+    trpc.execute.mutate({ path: node.$path, action: 'update', data: { systemPrompt: editPrompt } })
+      .catch((e) => setError(errMsg(e)));
+    setEditPrompt(null);
+  }, [node.$path, editPrompt]);
+
+  return (
+    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, maxWidth: 500 }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
+        <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>
+          {desc?.icon ?? '?'}
+        </div>
+        <div>
+          <div style={{ fontSize: 16, fontWeight: 600 }}>{desc?.name ?? 'Agent'}</div>
+          <div style={{ color: 'var(--text-2)', fontSize: 12 }}>{desc?.description}</div>
+        </div>
+      </div>
+
+      {error && (
+        <div onClick={() => setError(null)} style={{ padding: '6px 12px', marginBottom: 8, background: 'var(--danger, #c44)', color: '#fff', borderRadius: 'var(--radius)', fontSize: 12, cursor: 'pointer' }}>
+          {error}
+        </div>
+      )}
+
+      {pos && (
+        <div style={{ marginBottom: 12, padding: '8px 12px', background: 'var(--surface)', borderRadius: 'var(--radius)' }}>
+          Position: ({pos.x}, {pos.y}) &middot; Radius: {pos.radius}
+        </div>
+      )}
+
+      {/* System Prompt */}
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
+          System Prompt
+          {editPrompt === null && (
+            <button onClick={() => setEditPrompt(ai?.systemPrompt ?? '')} style={{ ...btn, fontSize: 10, padding: '2px 8px' }}>Edit</button>
+          )}
+        </div>
+        {editPrompt !== null ? (
+          <div>
+            <textarea
+              value={editPrompt}
+              onChange={(e) => setEditPrompt(e.target.value)}
+              style={{ width: '100%', minHeight: 80, padding: 8, borderRadius: 'var(--radius)', border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text)', fontFamily: 'var(--mono)', fontSize: 12, resize: 'vertical' }}
+              autoFocus
+            />
+            <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
+              <button onClick={savePrompt} style={{ ...btn, background: 'var(--accent)', color: '#fff' }}>Save</button>
+              <button onClick={() => setEditPrompt(null)} style={btn}>Cancel</button>
+            </div>
+          </div>
+        ) : (
+          <div style={{ padding: '4px 8px', fontSize: 12, color: 'var(--text-2)', whiteSpace: 'pre-wrap' }}>
+            {ai?.systemPrompt ?? '(none)'}
+          </div>
+        )}
+      </div>
+
+      {/* Event Inbox */}
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>
+          Event Inbox ({events.length})
+        </div>
+        {events.length === 0 && <div style={{ color: 'var(--text-3)', padding: 8 }}>No events yet</div>}
+        {[...events].reverse().slice(0, 15).map((e, i) => (
+          <div key={i} style={{ padding: '3px 8px', fontSize: 11, color: 'var(--text-2)', display: 'flex', gap: 6 }}>
+            <span style={{ color: 'var(--text-3)', minWidth: 24 }}>R{e.round}</span>
+            <span style={{ color: 'var(--accent)' }}>{e.from}</span>
+            <span>{e.type}{e.to ? `→${e.to}` : ''}</span>
+            <span style={{ flex: 1, color: 'var(--text-3)' }}>
+              {(e.data as any)?.message ? `"${(e.data as any).message}"` : JSON.stringify(e.data).slice(0, 60)}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Memory */}
+      <div>
+        <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>
+          Memory ({mem?.entries?.length ?? 0})
+        </div>
+        {(!mem?.entries || mem.entries.length === 0) && (
+          <div style={{ color: 'var(--text-3)', padding: 8 }}>Empty memory</div>
+        )}
+        {mem?.entries?.map((e, i) => (
+          <div key={i} style={{ padding: '4px 8px', fontSize: 12, color: 'var(--text-2)', background: i === (mem.entries.length ?? 0) - 1 ? 'var(--accent-bg, rgba(99,102,241,0.08))' : 'transparent', borderRadius: 'var(--radius)' }}>
+            {e}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── ItemView ──
+
+function ItemView() {
+  const node = useCurrentNode();
+  const desc = getComponent(node, SimDescriptive);
+  const pos = getComponent(node, SimPosition);
+
+  return (
+    <div style={{ fontFamily: 'var(--mono)', fontSize: 13, maxWidth: 400 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
+        <div style={{ width: 40, height: 40, borderRadius: 'var(--radius)', background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>
+          {desc?.icon ?? '?'}
+        </div>
+        <div>
+          <div style={{ fontSize: 14, fontWeight: 600 }}>{desc?.name ?? 'Item'}</div>
+          <div style={{ color: 'var(--text-2)', fontSize: 12 }}>{desc?.description}</div>
+        </div>
+      </div>
+      {pos && (
+        <div style={{ padding: '8px 12px', background: 'var(--surface)', borderRadius: 'var(--radius)', fontSize: 12, color: 'var(--text-2)' }}>
+          Position: ({pos.x}, {pos.y}) &middot; Radius: {pos.radius}
+        </div>
+      )}
+    </div>
+  );
+}
+
+register('sim.world', 'react', WorldView as any);
+register('sim.agent', 'react', AgentView as any);
+register('sim.item', 'react', ItemView as any);

package/table/client.ts

@@ -0,0 +1,3 @@
+import './types';
+import './view';
+import './edit';

package/table/edit.tsx

@@ -0,0 +1,241 @@
+import { type ComponentData, isComponent, type NodeData, register } from '@treenity/core';
+import type { TypeSchema } from '@treenity/core/schema/types';
+import { useCurrentNode } from '@treenity/react/context';
+import { useChildren } from '@treenity/react/hooks';
+import { useSchema } from '@treenity/react/schema-loader';
+import { Button } from '@treenity/react/ui/button';
+import { Checkbox } from '@treenity/react/ui/checkbox';
+import { Input } from '@treenity/react/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@treenity/react/ui/select';
+import { useMemo, useState } from 'react';
+import type { UITable } from './types';
+
+// ── Field tree types ──
+
+type FieldNode = {
+  key: string;
+  label: string;
+  type?: string;
+  children?: FieldNode[];
+};
+
+// ── Build field tree from schema + data sample ──
+
+function buildFieldTree(schema: TypeSchema | null, sample: Record<string, unknown>[]): FieldNode[] {
+  const nodes: FieldNode[] = [];
+  const seen = new Set<string>();
+
+  if (schema?.properties) {
+    for (const [key, prop] of Object.entries(schema.properties)) {
+      if (key.startsWith('$')) continue;
+      seen.add(key);
+      nodes.push({ key, label: (prop as any).title || key });
+    }
+  }
+
+  for (const row of sample.slice(0, 10)) {
+    for (const [key, val] of Object.entries(row)) {
+      if (key.startsWith('$') || seen.has(key)) continue;
+      seen.add(key);
+
+      if (isComponent(val)) {
+        const children = Object.keys(val)
+          .filter(k => !k.startsWith('$'))
+          .map(k => ({ key: `${key}.${k}`, label: k }));
+        nodes.push({ key, label: key, type: val.$type, children });
+      } else {
+        nodes.push({ key, label: key });
+      }
+    }
+  }
+
+  return nodes;
+}
+
+// ── Helpers ──
+
+function resolveDisplayType(child: NodeData, field: string): string {
+  if (!field) return child.$type;
+  const val = (child as any)[field];
+  return val?.$type ?? '';
+}
+
+// ── Edit View ──
+
+function TableEditView({ value, onChange }: { value: ComponentData; onChange?: (next: ComponentData) => void }) {
+  const node = useCurrentNode();
+  const children = useChildren(node.$path, { watch: true, limit: 1000 });
+
+  const state = value as unknown as UITable;
+  const emit = (patch: Partial<UITable>) => {
+    if (!onChange) return;
+    onChange({ ...value, ...patch } as ComponentData);
+  };
+
+  // Detect types
+  const { types, typeMap } = useMemo(() => {
+    const map = new Map<string, NodeData[]>();
+    for (const child of children) {
+      const dt = resolveDisplayType(child, state.field ?? '');
+      if (!dt) continue;
+      const arr = map.get(dt) ?? [];
+      arr.push(child);
+      map.set(dt, arr);
+    }
+    return { typeMap: map, types: [...map.keys()] };
+  }, [children, state.field]);
+
+  const activeType = state.displayType && types.includes(state.displayType)
+    ? state.displayType
+    : types[0] ?? '';
+
+  const sample = useMemo(() => {
+    const matched = typeMap.get(activeType) ?? [];
+    return matched.slice(0, 10) as Record<string, unknown>[];
+  }, [typeMap, activeType]);
+
+  const schema = useSchema(activeType);
+  const fieldTree = useMemo(() => buildFieldTree(schema ?? null, sample), [schema, sample]);
+
+  const savedColumns = state.columns?.[activeType] ?? [];
+  const hasCustomColumns = savedColumns.length > 0;
+
+  const toggleField = (key: string, label: string) => {
+    let cols = savedColumns.length > 0 ? [...savedColumns] : fieldTree.map(f => ({ field: f.key, label: f.label, visible: true }));
+    const idx = cols.findIndex(c => c.field === key);
+    if (idx >= 0) {
+      cols[idx] = { ...cols[idx], visible: !cols[idx].visible };
+    } else {
+      cols.push({ field: key, label, visible: true });
+    }
+    emit({ columns: { ...state.columns, [activeType]: cols } });
+  };
+
+  const resetColumns = () => {
+    const next = { ...state.columns };
+    delete next[activeType];
+    emit({ columns: next });
+  };
+
+  const isFieldVisible = (key: string) => {
+    if (!hasCustomColumns) return true;
+    const col = savedColumns.find(c => c.field === key);
+    return col?.visible !== false;
+  };
+
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const toggleExpand = (key: string) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      next.has(key) ? next.delete(key) : next.add(key);
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-3 text-xs">
+      <div className="flex flex-col gap-2">
+        <label className="flex items-center gap-2">
+          <span className="w-20 text-muted-foreground">Page size</span>
+          <Input
+            type="number"
+            min={1}
+            max={1000}
+            className="h-7 w-20 text-xs"
+            value={state.pageSize ?? 25}
+            onChange={e => emit({ pageSize: Number(e.target.value) || 25 })}
+          />
+        </label>
+
+        <label className="flex items-center gap-2">
+          <span className="w-20 text-muted-foreground">Field</span>
+          <Input
+            type="text"
+            placeholder="(node itself)"
+            className="h-7 flex-1 text-xs"
+            value={state.field ?? ''}
+            onChange={e => emit({ field: e.target.value })}
+          />
+        </label>
+
+        {types.length > 1 && (
+          <div className="flex items-center gap-2">
+            <span className="w-20 text-muted-foreground">Type</span>
+            <Select value={activeType} onValueChange={v => emit({ displayType: v })}>
+              <SelectTrigger className="h-7 flex-1 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {types.map(t => (
+                  <SelectItem key={t} value={t}>{t} ({typeMap.get(t)?.length ?? 0})</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center justify-between">
+          <span className="font-medium text-muted-foreground">Columns{activeType ? ` — ${activeType}` : ''}</span>
+          {hasCustomColumns && (
+            <Button variant="ghost" size="sm" className="h-5 text-[10px]" onClick={resetColumns}>
+              reset
+            </Button>
+          )}
+        </div>
+
+        {fieldTree.length === 0 && (
+          <div className="py-2 text-muted-foreground">No fields detected</div>
+        )}
+
+        <div className="flex flex-col gap-0.5">
+          {fieldTree.map(field => (
+            <div key={field.key}>
+              <div className="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/50">
+                {field.children ? (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-4 w-4 p-0 text-muted-foreground"
+                    onClick={() => toggleExpand(field.key)}
+                  >
+                    {expanded.has(field.key) ? '▾' : '▸'}
+                  </Button>
+                ) : (
+                  <span className="w-4" />
+                )}
+                <label className="flex flex-1 cursor-pointer items-center gap-1.5">
+                  <Checkbox
+                    checked={isFieldVisible(field.key)}
+                    onChange={() => toggleField(field.key, field.label)}
+                  />
+                  <span>{field.label}</span>
+                  {field.type && (
+                    <span className="text-[10px] text-muted-foreground/50">{field.type}</span>
+                  )}
+                </label>
+              </div>
+
+              {field.children && expanded.has(field.key) && (
+                <div className="ml-5 flex flex-col gap-0.5">
+                  {field.children.map(sub => (
+                    <label key={sub.key} className="flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/50">
+                      <Checkbox
+                        checked={isFieldVisible(sub.key)}
+                        onChange={() => toggleField(sub.key, sub.label)}
+                      />
+                      <span>{sub.label}</span>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+register('ui.table', 'react:edit', TableEditView as any);

package/table/server.ts

@@ -0,0 +1 @@
+import './types';