pmx-canvas 0.1.0

package/src/client/theme/tokens.ts

@@ -0,0 +1,72 @@
+/** Canvas design tokens — reads from CSS custom properties for theme support. */
+
+export interface CanvasTokens {
+  bg: string;
+  panel: string;
+  panelSoft: string;
+  line: string;
+  text: string;
+  textSoft: string;
+  muted: string;
+  dim: string;
+  accent: string;
+  ok: string;
+  warn: string;
+  warnAlt: string;
+  danger: string;
+  purple: string;
+  thinking: string;
+  subagent: string;
+  font: string;
+  mono: string;
+}
+
+let cached: CanvasTokens | null = null;
+
+function read(prop: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+}
+
+/** Return current canvas tokens (reads computed CSS vars). */
+export function getCanvasTokens(): CanvasTokens {
+  if (cached) return cached;
+  cached = {
+    bg: read('--c-bg'),
+    panel: read('--c-panel'),
+    panelSoft: read('--c-panel-soft'),
+    line: read('--c-line'),
+    text: read('--c-text'),
+    textSoft: read('--c-text-soft'),
+    muted: read('--c-muted'),
+    dim: read('--c-dim'),
+    accent: read('--c-accent'),
+    ok: read('--c-ok'),
+    warn: read('--c-warn'),
+    warnAlt: read('--c-warn-alt'),
+    danger: read('--c-danger'),
+    purple: read('--c-purple'),
+    thinking: read('--c-thinking'),
+    subagent: read('--c-subagent'),
+    font: read('--font'),
+    mono: read('--mono'),
+  };
+  return cached;
+}
+
+/** Invalidate the cached tokens (call after theme switch). */
+export function invalidateTokenCache(): void {
+  cached = null;
+}
+
+/** Agent execution phase → CSS color mapping. Shared by StatusNode and StatusSummary. */
+export const PHASE_COLORS: Record<string, string> = {
+  idle: 'var(--c-muted)',
+  running: 'var(--c-accent)',
+  planning: 'var(--c-thinking)',
+  thinking: 'var(--c-thinking)',
+  drafting: 'var(--c-accent)',
+  tooling: 'var(--c-accent)',
+  review: 'var(--c-ok)',
+  'waiting-approval': 'var(--c-warn)',
+  waiting: 'var(--c-warn-alt)',
+};

package/src/client/types-shims.d.ts

@@ -0,0 +1,5 @@
+// Type shim: @joplin/turndown-plugin-gfm ships without bundled TS types.
+declare module '@joplin/turndown-plugin-gfm' {
+  import type TurndownService from 'turndown';
+  export function gfm(td: TurndownService): void;
+}

package/src/client/types.ts

@@ -0,0 +1,81 @@
+export interface ViewportState {
+  x: number;
+  y: number;
+  scale: number;
+}
+
+export interface CanvasNodeState {
+  id: string;
+  type:
+    | 'markdown'
+    | 'mcp-app'
+    | 'webpage'
+    | 'json-render'
+    | 'graph'
+    | 'prompt'
+    | 'response'
+    | 'status'
+    | 'context'
+    | 'ledger'
+    | 'trace'
+    | 'file'
+    | 'image'
+    | 'group';
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  zIndex: number;
+  collapsed: boolean;
+  pinned: boolean;
+  dockPosition: 'left' | 'right' | null;
+  data: Record<string, unknown>;
+}
+
+export interface CanvasEdge {
+  id: string;
+  from: string;
+  to: string;
+  type: 'relation' | 'depends-on' | 'flow' | 'references';
+  label?: string;
+  style?: 'solid' | 'dashed' | 'dotted';
+  animated?: boolean;
+}
+
+export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected';
+
+// ── Shared constants for node type display ──────────────────
+
+export const TYPE_LABELS: Record<CanvasNodeState['type'], string> = {
+  markdown: 'MD',
+  'mcp-app': 'APP',
+  webpage: 'WEB',
+  'json-render': 'UI',
+  graph: 'GRAPH',
+  prompt: 'ASK',
+  response: 'ANS',
+  status: 'STATUS',
+  context: 'CONTEXT',
+  ledger: 'LOG',
+  trace: 'TRACE',
+  file: 'FILE',
+  image: 'IMG',
+  group: 'GROUP',
+};
+
+/** Node types that support the full-viewport expand/focus overlay. */
+export const EXPANDABLE_TYPES = new Set<CanvasNodeState['type']>([
+  'markdown',
+  'mcp-app',
+  'webpage',
+  'json-render',
+  'graph',
+  'context',
+  'ledger',
+  'file',
+  'image',
+]);
+
+export interface CanvasLayout {
+  viewport: ViewportState;
+  nodes: CanvasNodeState[];
+  edges: CanvasEdge[];
+}

package/src/client/utils/ext-app-tool-result.ts

@@ -0,0 +1,4 @@
+export {
+  normalizeExtAppToolResult,
+  type NormalizeExtAppToolResultInput,
+} from '../../shared/ext-app-tool-result.js';

package/src/client/utils/placement.ts

@@ -0,0 +1,4 @@
+export {
+  findOpenCanvasPosition,
+  type CanvasPlacementRect,
+} from '../../shared/placement.js';

package/src/client/utils/platform.ts

@@ -0,0 +1,2 @@
+export const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+export const MOD_KEY = isMac ? '\u2318' : 'Ctrl';

package/src/json-render/catalog.ts

@@ -0,0 +1,256 @@
+/**
+ * json-render catalog definition for PMX Canvas.
+ *
+ * Uses the shadcn component set from @json-render/shadcn/catalog plus local
+ * chart components. The catalog validates specs before they are stored in
+ * canvas node state or rendered in the browser viewer.
+ */
+
+import { defineCatalog } from '@json-render/core';
+import { schema } from './schema.js';
+import { shadcnComponentDefinitions } from '@json-render/shadcn/catalog';
+import { chartComponentDefinitions } from './charts/definitions';
+import { extraChartComponentDefinitions } from './charts/extra-definitions';
+
+export const allComponentDefinitions = {
+  ...shadcnComponentDefinitions,
+  ...chartComponentDefinitions,
+  ...extraChartComponentDefinitions,
+};
+
+export const catalog = defineCatalog(schema as never, {
+  components: allComponentDefinitions,
+} as never);
+
+export interface JsonRenderIssue {
+  path?: PropertyKey[];
+  message?: string;
+}
+
+export interface JsonRenderPropDescriptor {
+  name: string;
+  type: string;
+  required: boolean;
+  nullable: boolean;
+}
+
+export interface JsonRenderComponentDescriptor {
+  type: string;
+  description: string;
+  slots: string[];
+  example: unknown;
+  props: JsonRenderPropDescriptor[];
+}
+
+interface JsonRenderValidationResult {
+  success: boolean;
+  data?: unknown;
+  error?: {
+    issues?: JsonRenderIssue[];
+  };
+}
+
+interface ZodishSchema {
+  shape?: Record<string, unknown>;
+  isOptional?: () => boolean;
+  isNullable?: () => boolean;
+  safeParse(value: unknown): {
+    success: boolean;
+    error?: {
+      issues?: JsonRenderIssue[];
+    };
+  };
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value && typeof value === 'object' ? (value as Record<string, unknown>) : null;
+}
+
+function hasSafeParse(value: unknown): value is ZodishSchema {
+  return typeof value === 'object' && value !== null && 'safeParse' in value;
+}
+
+function schemaTypeName(value: unknown): string {
+  const record = asRecord(value);
+  const def = asRecord(record?._def) ?? asRecord(record?.def);
+  const typeName = def?.typeName ?? def?.type;
+  return typeof typeName === 'string' ? typeName : '';
+}
+
+function isOptionalSchema(value: unknown): boolean {
+  if (typeof (value as ZodishSchema | null)?.isOptional === 'function') {
+    return (value as ZodishSchema).isOptional?.() === true;
+  }
+  const typeName = schemaTypeName(value);
+  return typeName === 'ZodOptional' || typeName === 'optional';
+}
+
+function isNullableSchema(value: unknown): boolean {
+  if (typeof (value as ZodishSchema | null)?.isNullable === 'function') {
+    return (value as ZodishSchema).isNullable?.() === true;
+  }
+  const typeName = schemaTypeName(value);
+  return typeName === 'ZodNullable' || typeName === 'nullable';
+}
+
+function unwrapSchema(value: unknown): {
+  schema: unknown;
+  required: boolean;
+  nullable: boolean;
+} {
+  let current = value;
+  let required = true;
+  let nullable = false;
+
+  while (current) {
+    if (isOptionalSchema(current)) {
+      required = false;
+    }
+    if (isNullableSchema(current)) {
+      nullable = true;
+    }
+
+    const record = asRecord(current);
+    const def = asRecord(record?._def) ?? asRecord(record?.def);
+    const inner =
+      def?.innerType ??
+      def?.schema ??
+      def?.type ??
+      def?.out ??
+      def?.in;
+
+    if (!inner || inner === current || (!isOptionalSchema(current) && !isNullableSchema(current))) {
+      break;
+    }
+    current = inner;
+  }
+
+  return { schema: current, required, nullable };
+}
+
+function schemaTypeLabel(value: unknown): string {
+  const { schema, nullable } = unwrapSchema(value);
+  const record = asRecord(schema);
+  const def = asRecord(record?._def) ?? asRecord(record?.def);
+  const typeName = schemaTypeName(schema);
+
+  let label = 'unknown';
+  if (typeName === 'ZodString' || typeName === 'string') {
+    label = 'string';
+  } else if (typeName === 'ZodNumber' || typeName === 'number') {
+    label = 'number';
+  } else if (typeName === 'ZodBoolean' || typeName === 'boolean') {
+    label = 'boolean';
+  } else if (typeName === 'ZodArray' || typeName === 'array') {
+    const element = def?.type ?? def?.element ?? def?.schema;
+    label = `${schemaTypeLabel(element)}[]`;
+  } else if (typeName === 'ZodObject' || typeName === 'object') {
+    label = 'object';
+  } else if (typeName === 'ZodRecord' || typeName === 'record') {
+    label = 'record';
+  } else if (typeName === 'ZodEnum' || typeName === 'enum') {
+    const rawValues = Array.isArray(def?.values)
+      ? def.values
+      : Array.isArray(def?.entries)
+        ? def.entries
+        : Array.isArray(def?.options)
+          ? def.options
+          : [];
+    label = rawValues.length > 0
+      ? rawValues.map((entry) => JSON.stringify(entry)).join(' | ')
+      : 'enum';
+  } else if (typeName === 'ZodLiteral' || typeName === 'literal') {
+    label = JSON.stringify(def?.value ?? def?.literal ?? 'literal');
+  } else if (typeName === 'ZodAny' || typeName === 'any') {
+    label = 'any';
+  }
+
+  return nullable ? `${label} | null` : label;
+}
+
+function describePropsSchema(propsSchema: ZodishSchema): JsonRenderPropDescriptor[] {
+  const shape = propsSchema.shape;
+  if (!shape || typeof shape !== 'object') return [];
+
+  return Object.entries(shape)
+    .map(([name, schema]) => {
+      const unwrapped = unwrapSchema(schema);
+      return {
+        name,
+        type: schemaTypeLabel(unwrapped.schema),
+        required: unwrapped.required && !unwrapped.nullable,
+        nullable: unwrapped.nullable,
+      };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function describeJsonRenderCatalog(): JsonRenderComponentDescriptor[] {
+  return Object.entries(allComponentDefinitions)
+    .map(([type, definition]) => ({
+      type,
+      description: definition.description ?? '',
+      slots: 'slots' in definition && Array.isArray(definition.slots) ? [...definition.slots] : [],
+      example: 'example' in definition ? definition.example : undefined,
+      props: hasSafeParse(definition.props) ? describePropsSchema(definition.props) : [],
+    }))
+    .sort((a, b) => a.type.localeCompare(b.type));
+}
+
+function normalizePropsForSchema(
+  propsSchema: ZodishSchema,
+  rawProps: Record<string, unknown>,
+): Record<string, unknown> {
+  const shape = propsSchema.shape;
+  if (!shape || typeof shape !== 'object') return rawProps;
+
+  const normalizedProps = { ...rawProps };
+  for (const [key, fieldSchema] of Object.entries(shape)) {
+    if (!(key in normalizedProps)) {
+      if (isNullableSchema(fieldSchema)) {
+        normalizedProps[key] = null;
+      } else if (isOptionalSchema(fieldSchema)) {
+        normalizedProps[key] = undefined;
+      }
+    }
+  }
+  return normalizedProps;
+}
+
+export function validateShadcnElementProps(spec: unknown): JsonRenderValidationResult {
+  const specRecord = asRecord(spec);
+  const elements = asRecord(specRecord?.elements);
+  if (!elements) {
+    return { success: true, data: spec };
+  }
+
+  const issues: JsonRenderIssue[] = [];
+  for (const [elementKey, rawElement] of Object.entries(elements)) {
+    const element = asRecord(rawElement);
+    if (!element || typeof element.type !== 'string') continue;
+
+    const definition = allComponentDefinitions[element.type as keyof typeof allComponentDefinitions];
+    if (!definition || !hasSafeParse(definition.props)) continue;
+
+    const parsed = definition.props.safeParse(
+      normalizePropsForSchema(definition.props, asRecord(element.props) ?? {}),
+    );
+    if (parsed.success) continue;
+
+    for (const issue of parsed.error?.issues ?? []) {
+      const issuePath = Array.isArray(issue.path)
+        ? issue.path.map((segment) => (typeof segment === 'symbol' ? String(segment) : segment))
+        : [];
+      issues.push({
+        path: ['elements', elementKey, 'props', ...issuePath],
+        message: issue.message ?? 'invalid value',
+      });
+    }
+  }
+
+  if (issues.length > 0) {
+    return { success: false, error: { issues } };
+  }
+
+  return { success: true, data: spec };
+}

package/src/json-render/charts/components.tsx

@@ -0,0 +1,198 @@
+/** @jsxImportSource react */
+
+/**
+ * Chart component implementations for json-render.
+ *
+ * Built on Recharts, following the same pattern as the Vercel json-render
+ * chat example. Each component receives BaseComponentProps<T> and renders
+ * a responsive chart inside a styled container.
+ */
+
+import type { ReactNode } from 'react';
+import type { BaseComponentProps } from '@json-render/react';
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart as RechartsLineChart,
+  Pie,
+  PieChart as RechartsPieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+// Fallbacks mirror the light-theme palette in renderer/index.css so the
+// chart still reads as on-brand if the Tailwind bundle fails to load.
+export const CHART_COLORS = [
+  'var(--chart-1, #1A7ABF)',
+  'var(--chart-2, #1a9f55)',
+  'var(--chart-3, #c89b2a)',
+  'var(--chart-4, #7c4dff)',
+  'var(--chart-5, #d32f2f)',
+  'var(--chart-6, #00838F)',
+];
+
+export type AggregateMode = 'sum' | 'count' | 'avg';
+
+const AGGREGATE_FNS: Record<AggregateMode, (values: number[]) => number> = {
+  sum: (v) => v.reduce((a, b) => a + b, 0),
+  count: (v) => v.length,
+  avg: (v) => v.reduce((a, b) => a + b, 0) / v.length,
+};
+
+export function processChartData(
+  data: Record<string, unknown>[],
+  xKey: string,
+  yKey: string,
+  aggregate: AggregateMode | null | undefined,
+): Record<string, unknown>[] {
+  if (!aggregate) return data;
+
+  const groups = new Map<string, number[]>();
+  for (const row of data) {
+    const key = String(row[xKey] ?? '');
+    const val = Number(row[yKey] ?? 0);
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(isNaN(val) ? 0 : val);
+  }
+
+  const result: Record<string, unknown>[] = [];
+  for (const [key, values] of groups) {
+    result.push({ [xKey]: key, [yKey]: AGGREGATE_FNS[aggregate](values) });
+  }
+  return result;
+}
+
+export interface CartesianChartProps {
+  title?: string | null;
+  data: Record<string, unknown>[];
+  xKey: string;
+  yKey: string;
+  aggregate?: AggregateMode | null;
+  color?: string | null;
+  height?: number | null;
+}
+
+interface PieChartProps {
+  title?: string | null;
+  data: Record<string, unknown>[];
+  nameKey: string;
+  valueKey: string;
+  height?: number | null;
+}
+
+export const axisStyle = {
+  fontSize: 12,
+  fill: 'var(--muted-foreground, #666)',
+};
+
+export const tooltipStyle = {
+  backgroundColor: 'var(--popover, #fff)',
+  border: '1px solid var(--border, #e5e5e5)',
+  borderRadius: 'var(--radius, 0.5rem)',
+  color: 'var(--popover-foreground, #111)',
+  fontSize: 13,
+};
+
+/** Shared wrapper for cartesian charts (Line + Bar). */
+export function CartesianChart({
+  props,
+  children,
+}: {
+  props: CartesianChartProps;
+  children: (data: Record<string, unknown>[]) => ReactNode;
+}) {
+  const chartData = processChartData(props.data ?? [], props.xKey, props.yKey, props.aggregate);
+  const h = props.height ?? 300;
+
+  return (
+    <div className="pmx-chart">
+      {props.title && <div className="pmx-chart__title">{props.title}</div>}
+      <ResponsiveContainer width="100%" height={h}>
+        {children(chartData)}
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function ChartLineChart({ props }: BaseComponentProps<CartesianChartProps>) {
+  const stroke = props.color ?? CHART_COLORS[0];
+  return (
+    <CartesianChart props={props}>
+      {(data) => (
+        <RechartsLineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
+          <XAxis dataKey={props.xKey} tick={axisStyle} />
+          <YAxis tick={axisStyle} />
+          <Tooltip contentStyle={tooltipStyle} />
+          <Line
+            type="monotone"
+            dataKey={props.yKey}
+            stroke={stroke}
+            strokeWidth={2}
+            dot={{ r: 4, fill: stroke }}
+            activeDot={{ r: 6 }}
+          />
+        </RechartsLineChart>
+      )}
+    </CartesianChart>
+  );
+}
+
+function ChartBarChart({ props }: BaseComponentProps<CartesianChartProps>) {
+  const fill = props.color ?? CHART_COLORS[0];
+  return (
+    <CartesianChart props={props}>
+      {(data) => (
+        <RechartsBarChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border, #e5e5e5)" />
+          <XAxis dataKey={props.xKey} tick={axisStyle} />
+          <YAxis tick={axisStyle} />
+          <Tooltip contentStyle={tooltipStyle} cursor={false} />
+          <Bar dataKey={props.yKey} fill={fill} radius={[4, 4, 0, 0]} />
+        </RechartsBarChart>
+      )}
+    </CartesianChart>
+  );
+}
+
+function ChartPieChart({ props }: BaseComponentProps<PieChartProps>) {
+  const data = props.data ?? [];
+  const h = props.height ?? 300;
+
+  return (
+    <div className="pmx-chart">
+      {props.title && <div className="pmx-chart__title">{props.title}</div>}
+      <ResponsiveContainer width="100%" height={h}>
+        <RechartsPieChart>
+          <Tooltip contentStyle={tooltipStyle} />
+          <Legend />
+          <Pie
+            data={data}
+            dataKey={props.valueKey}
+            nameKey={props.nameKey}
+            cx="50%"
+            cy="50%"
+            outerRadius="80%"
+            label
+          >
+            {data.map((_, i) => (
+              <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+            ))}
+          </Pie>
+        </RechartsPieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export const chartComponents = {
+  LineChart: ChartLineChart,
+  BarChart: ChartBarChart,
+  PieChart: ChartPieChart,
+};