editor-ts 0.0.10 → 0.0.12

package/src/core/VersionControl.ts

@@ -0,0 +1,189 @@
+import type { PageData } from '../types';
+
+export type VersionNodeMeta = {
+  source?: 'user' | 'ai' | 'system';
+  message?: string;
+};
+
+export type VersionNode = {
+  id: string;
+  parentId: string | null;
+  childrenIds: string[];
+  createdAt: number;
+  snapshot: PageData;
+  meta?: VersionNodeMeta;
+};
+
+export type VersionControlState = {
+  rootId: string;
+  currentId: string;
+  nodes: Record<string, VersionNode>;
+};
+
+export type VersionControlOptions = {
+  maxSnapshots?: number;
+};
+
+const createId = (): string => {
+  return `vc_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+};
+
+export class VersionControl {
+  private maxSnapshots: number;
+  private state: VersionControlState;
+
+  constructor(options?: VersionControlOptions) {
+    this.maxSnapshots = options?.maxSnapshots ?? 200;
+
+    const rootId = createId();
+    // Temporary placeholder; caller must init() to set snapshot.
+    this.state = {
+      rootId,
+      currentId: rootId,
+      nodes: {
+        [rootId]: {
+          id: rootId,
+          parentId: null,
+          childrenIds: [],
+          createdAt: Date.now(),
+          snapshot: { title: '', item_id: 0, body: {} },
+        },
+      },
+    };
+  }
+
+  private cloneSnapshot(snapshot: PageData): PageData {
+    return JSON.parse(JSON.stringify(snapshot)) as PageData;
+  }
+
+  init(snapshot: PageData, meta?: VersionNodeMeta): void {
+    const root = this.state.nodes[this.state.rootId];
+    if (!root) return;
+
+    root.snapshot = this.cloneSnapshot(snapshot);
+    root.meta = meta;
+    root.createdAt = Date.now();
+    this.state.currentId = root.id;
+  }
+
+  static fromState(state: VersionControlState, options?: VersionControlOptions): VersionControl {
+    const vc = new VersionControl(options);
+    vc.state = state;
+    return vc;
+  }
+
+  getState(): VersionControlState {
+    return this.state;
+  }
+
+  getCurrentId(): string {
+    return this.state.currentId;
+  }
+
+  getCurrentSnapshot(): PageData {
+    const current = this.state.nodes[this.state.currentId];
+    const snapshot = current ? current.snapshot : this.state.nodes[this.state.rootId]!.snapshot;
+    return this.cloneSnapshot(snapshot);
+  }
+
+  getRedoOptions(): string[] {
+    const current = this.state.nodes[this.state.currentId];
+    return current ? current.childrenIds.slice() : [];
+  }
+
+  canUndo(): boolean {
+    const current = this.state.nodes[this.state.currentId];
+    return !!current && current.parentId !== null;
+  }
+
+  canRedo(): boolean {
+    const current = this.state.nodes[this.state.currentId];
+    return !!current && current.childrenIds.length > 0;
+  }
+
+  commit(snapshot: PageData, meta?: VersionNodeMeta): string {
+    const parentId = this.state.currentId;
+    const parent = this.state.nodes[parentId];
+    if (!parent) {
+      throw new Error('VersionControl: missing parent node');
+    }
+
+    const id = createId();
+
+    const node: VersionNode = {
+      id,
+      parentId,
+      childrenIds: [],
+      createdAt: Date.now(),
+      snapshot: this.cloneSnapshot(snapshot),
+      meta,
+    };
+
+    this.state.nodes[id] = node;
+    parent.childrenIds.push(id);
+    this.state.currentId = id;
+
+    this.prune();
+
+    return id;
+  }
+
+  undo(): PageData | null {
+    const current = this.state.nodes[this.state.currentId];
+    if (!current || !current.parentId) return null;
+
+    const parent = this.state.nodes[current.parentId];
+    if (!parent) return null;
+
+    this.state.currentId = parent.id;
+    return this.cloneSnapshot(parent.snapshot);
+  }
+
+  redo(childId?: string): PageData | null {
+    const current = this.state.nodes[this.state.currentId];
+    if (!current || current.childrenIds.length === 0) return null;
+
+    const nextId = childId ?? current.childrenIds[current.childrenIds.length - 1]!;
+    const next = this.state.nodes[nextId];
+    if (!next) return null;
+
+    this.state.currentId = next.id;
+    return this.cloneSnapshot(next.snapshot);
+  }
+
+  checkout(id: string): PageData | null {
+    if (!this.state.nodes[id]) return null;
+    this.state.currentId = id;
+    return this.cloneSnapshot(this.state.nodes[id].snapshot);
+  }
+
+  private prune(): void {
+    const nodeIds = Object.keys(this.state.nodes);
+    if (nodeIds.length <= this.maxSnapshots) return;
+
+    const protectedIds = new Set<string>([this.state.rootId, this.state.currentId]);
+
+    const leaves = nodeIds
+      .map((id) => this.state.nodes[id])
+      .filter((n): n is VersionNode => !!n && !protectedIds.has(n.id) && n.childrenIds.length === 0);
+
+    leaves.sort((a, b) => a.createdAt - b.createdAt);
+
+    while (Object.keys(this.state.nodes).length > this.maxSnapshots && leaves.length > 0) {
+      const leaf = leaves.shift();
+      if (!leaf) break;
+
+      const parentId = leaf.parentId;
+      delete this.state.nodes[leaf.id];
+
+      if (parentId && this.state.nodes[parentId]) {
+        const parent = this.state.nodes[parentId];
+        parent.childrenIds = parent.childrenIds.filter((cid) => cid !== leaf.id);
+        if (parent.childrenIds.length === 0 && !protectedIds.has(parent.id)) {
+          leaves.push(parent);
+          leaves.sort((a, b) => a.createdAt - b.createdAt);
+        }
+      }
+    }
+  }
+}

package/src/core/aiChat.ts

@@ -0,0 +1,427 @@
+import type { OpencodeClient, Part, Event, Message, TextPart } from '@opencode-ai/sdk';
+import type { Page } from './Page';
+import type { EditorTsAiChatReplacement, EditorTsAiChatResult } from '../types';
+
+type ParsedChatResponse = {
+  replacements?: Array<{
+    path?: unknown;
+    content?: unknown;
+    content_b64?: unknown;
+  }>;
+};
+
+const stripCodeFences = (text: string): string => {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith('```')) return trimmed;
+  return trimmed.replace(/^```[a-zA-Z]*\n?/, '').replace(/```$/, '').trim();
+};
+
+const extractJsonFromText = (text: string): string | null => {
+  const trimmed = text.trim();
+
+  // Prefer fenced JSON blocks.
+  const fenceStart = trimmed.indexOf('```');
+  if (fenceStart >= 0) {
+    const fenceLangEnd = trimmed.indexOf('\n', fenceStart);
+    const contentStart = fenceLangEnd >= 0 ? fenceLangEnd + 1 : fenceStart + 3;
+    const fenceEnd = trimmed.indexOf('```', contentStart);
+    if (fenceEnd > contentStart) {
+      const inner = trimmed.slice(contentStart, fenceEnd).trim();
+      if (inner.startsWith('{') || inner.startsWith('[')) {
+        return inner;
+      }
+    }
+  }
+
+  // Fallback: scan for the first valid JSON object/array within the text.
+  const tryParseSlice = (slice: string): boolean => {
+    try {
+      JSON.parse(slice);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const scan = (open: '{' | '[', close: '}' | ']'): string | null => {
+    let depth = 0;
+    let start: number | null = null;
+    let inString = false;
+    let escaped = false;
+
+    for (let i = 0; i < trimmed.length; i++) {
+      const ch = trimmed[i] ?? '';
+
+      if (inString) {
+        if (escaped) {
+          escaped = false;
+          continue;
+        }
+        if (ch === '\\') {
+          escaped = true;
+          continue;
+        }
+        if (ch === '"') {
+          inString = false;
+        }
+        continue;
+      }
+
+      if (ch === '"') {
+        inString = true;
+        continue;
+      }
+
+      if (ch === open) {
+        if (depth === 0) start = i;
+        depth++;
+        continue;
+      }
+
+      if (ch === close && depth > 0) {
+        depth--;
+        if (depth === 0 && start !== null) {
+          const slice = trimmed.slice(start, i + 1);
+          if (tryParseSlice(slice)) return slice;
+          start = null;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  return scan('{', '}') ?? scan('[', ']');
+};
+
+const decodeBase64ToString = (b64: string): string => {
+  // Browser-safe base64 decode
+  const binary = atob(b64);
+  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+  return new TextDecoder('utf-8').decode(bytes);
+};
+
+export const parseAiChatResponse = (assistantText: string, sessionId: string): EditorTsAiChatResult => {
+  const rawText = assistantText;
+
+  const extracted = extractJsonFromText(assistantText);
+  const jsonText = extracted ?? stripCodeFences(assistantText);
+
+  const parsed = JSON.parse(jsonText) as ParsedChatResponse;
+  const rawReplacements = Array.isArray(parsed.replacements) ? parsed.replacements : [];
+
+  const replacements: EditorTsAiChatReplacement[] = [];
+  for (const item of rawReplacements) {
+    const path = typeof item?.path === 'string' ? item.path : null;
+    if (!path) continue;
+
+    if (typeof item?.content_b64 === 'string') {
+      replacements.push({ path, content: decodeBase64ToString(item.content_b64) });
+      continue;
+    }
+
+    if (typeof item?.content === 'string') {
+      replacements.push({ path, content: item.content });
+      continue;
+    }
+  }
+
+  return { replacements, rawText, sessionId };
+};
+
+export const buildAiChatSystemPrompt = (): string => {
+  return [
+    'You are an automated assistant integrated with EditorTs.',
+    'Return JSON only. No markdown. No backticks. No commentary.',
+    'Schema: { "replacements": [{ "path": string, "content_b64": string }] }',
+    'Always use content_b64 (base64 of full UTF-8 file contents).',
+    'Allowed paths: page.json, styles.css, components/<id>.js',
+    '',
+    'IMPORTANT CSS RULES:',
+    '- When writing styles.css, use valid CSS selectors.',
+    '- IDs must be prefixed with # (e.g. #hero-1, #hero-title).',
+  ].join('\n');
+};
+
+export const buildAiChatSnapshot = (pageJson: string, css: string, componentScripts: Record<string, string>): string => {
+  const scriptsList = Object.keys(componentScripts).sort();
+  const scriptLines = scriptsList.length
+    ? scriptsList.map((p) => `- ${p}`).join('\n')
+    : '- (none)';
+
+  return [
+    'WORKSPACE TREE:',
+    '- page.json',
+    '- styles.css',
+    '- index.html (derived; do not edit)',
+    '- components/<id>.js',
+    '',
+    'COMPONENT SCRIPTS:',
+    scriptLines,
+    '',
+    'FILES:',
+    `page.json:\n${pageJson}`,
+    `\nstyles.css:\n${css}`,
+  ].join('\n');
+};
+
+export const normalizeOpencodeModelId = (providerID: string, modelID: string): string => {
+  if (providerID !== 'opencode') return modelID;
+  if (modelID === 'claude-sonnet-4-5-20250929') return 'claude-sonnet-4-5';
+  return modelID;
+};
+
+export const chooseChatModel = async (client: OpencodeClient): Promise<{ providerID: string; modelID: string } | undefined> => {
+  const configResult = await client.config.get();
+  const configured = configResult.data?.model;
+  if (configured) {
+    const [providerID, ...rest] = configured.split('/');
+    if (providerID && rest.length > 0) {
+      const modelID = rest.join('/');
+      return { providerID, modelID: normalizeOpencodeModelId(providerID, modelID) };
+    }
+  }
+
+  const providersResult = await client.config.providers();
+  if (!providersResult.data) return undefined;
+
+  const modelID = providersResult.data.default?.opencode;
+  if (modelID) return { providerID: 'opencode', modelID };
+
+  return undefined;
+};
+
+export const requestAiReplacements = async (args: {
+  client: OpencodeClient;
+  prompt: string;
+  pageJson: string;
+  css: string;
+  componentScripts: Record<string, string>;
+  sessionId?: string;
+  sessionTitle?: string;
+  model?: {
+    providerID: string;
+    modelID: string;
+  };
+  stream?: boolean;
+  onStream?: (delta: string) => void;
+}): Promise<EditorTsAiChatResult> => {
+  const {
+    client,
+    prompt,
+    pageJson,
+    css,
+    componentScripts,
+    sessionId: existingSessionId,
+    sessionTitle,
+    model: selectedModel,
+    stream,
+    onStream,
+  } = args;
+
+  let sessionId = existingSessionId;
+
+  if (!sessionId) {
+    const sessionResult = await client.session.create({ body: { title: sessionTitle ?? 'EditorTs Chat' } });
+    if (!sessionResult.data) {
+      throw new Error(`Failed to create session: ${String(sessionResult.error)}`);
+    }
+    sessionId = sessionResult.data.id;
+  }
+
+  const system = buildAiChatSystemPrompt();
+  const snapshot = buildAiChatSnapshot(pageJson, css, componentScripts);
+
+  const model = selectedModel ?? await chooseChatModel(client);
+
+  if (stream && typeof onStream === 'function') {
+    // Fire-and-forget the prompt (async), then listen to SSE for message part deltas.
+    const sendResult = await client.session.promptAsync({
+      path: { id: sessionId },
+      body: {
+        ...(model ? { model } : {}),
+        system,
+        parts: [
+          { type: 'text', text: snapshot },
+          { type: 'text', text: `\nREQUEST:\n${prompt}` },
+        ],
+      },
+    });
+
+    if (sendResult.error) {
+      throw new Error(`Prompt failed: ${String(sendResult.error)}`);
+    }
+
+    const events = await client.event.subscribe();
+
+    let assembled = '';
+    let targetSessionId: string | null = null;
+    let doneMessageId: string | null = null;
+
+    const isMessage = (value: unknown): value is Message => {
+      if (!value || typeof value !== 'object') return false;
+      return typeof (value as { id?: unknown }).id === 'string' && typeof (value as { role?: unknown }).role === 'string';
+    };
+
+    const isTextPart = (value: unknown): value is TextPart => {
+      if (!value || typeof value !== 'object') return false;
+      return (value as { type?: unknown }).type === 'text' && typeof (value as { text?: unknown }).text === 'string';
+    };
+
+    const isEventMessageUpdated = (value: unknown): value is Extract<Event, { type: 'message.updated' }> => {
+      if (!value || typeof value !== 'object') return false;
+      return (value as { type?: unknown }).type === 'message.updated';
+    };
+
+    const isEventMessagePartUpdated = (value: unknown): value is Extract<Event, { type: 'message.part.updated' }> => {
+      if (!value || typeof value !== 'object') return false;
+      return (value as { type?: unknown }).type === 'message.part.updated';
+    };
+
+    const waitForResult = async (): Promise<string> => {
+      // Bound the streaming loop so we don't hang forever if the connection dies.
+      const timeoutMs = 90_000;
+      const timeoutAt = Date.now() + timeoutMs;
+
+      for await (const payload of events.stream) {
+        if (Date.now() > timeoutAt) {
+          throw new Error('Streaming timed out waiting for assistant response.');
+        }
+
+        const globalEvent = payload as unknown;
+        const eventPayload = (globalEvent as { payload?: unknown }).payload;
+        if (!eventPayload || typeof eventPayload !== 'object') continue;
+
+        if (isEventMessageUpdated(eventPayload)) {
+          const info = (eventPayload as { properties?: unknown }).properties as { info?: unknown } | undefined;
+          if (!info || !isMessage(info.info)) continue;
+
+          const msg = info.info;
+
+          // Track the first assistant message for this session that has a completion.
+          if (msg.role === 'assistant' && typeof msg.sessionID === 'string' && msg.sessionID === sessionId) {
+            targetSessionId = msg.sessionID;
+
+            // We only know we're done once the assistant message has completed.
+            const completed = (msg as { time?: { completed?: number } }).time?.completed;
+            if (typeof completed === 'number') {
+              doneMessageId = msg.id;
+              break;
+            }
+          }
+        }
+
+        if (isEventMessagePartUpdated(eventPayload)) {
+          const properties = (eventPayload as { properties?: unknown }).properties as { part?: unknown; delta?: unknown } | undefined;
+          if (!properties) continue;
+
+          const part = properties.part;
+          if (!isTextPart(part)) continue;
+
+          const rawSessionId = (part as { sessionID?: unknown }).sessionID;
+          const partSessionId = typeof rawSessionId === 'string' ? rawSessionId : null;
+
+          if (!targetSessionId) {
+            targetSessionId = partSessionId ?? sessionId;
+          }
+
+          if (targetSessionId && partSessionId && partSessionId !== targetSessionId) continue;
+
+          const delta = typeof properties.delta === 'string' ? properties.delta : null;
+          if (delta && delta.length > 0) {
+            assembled += delta;
+            onStream(delta);
+            continue;
+          }
+
+          // Some servers may send the full text instead of delta.
+          if (typeof part.text === 'string' && part.text.length > assembled.length) {
+            const next = part.text.slice(assembled.length);
+            assembled = part.text;
+            if (next.length > 0) {
+              onStream(next);
+            }
+          }
+        }
+      }
+
+      // If we didn't gather anything via deltas, fetch full message parts as fallback.
+      if (!assembled.trim() && doneMessageId) {
+        const message = await client.session.message({ path: { id: sessionId, messageID: doneMessageId } });
+        if (!message.data) {
+          throw new Error(`Failed to fetch message: ${String(message.error)}`);
+        }
+        const parts = Array.isArray(message.data.parts) ? (message.data.parts as Part[]) : [];
+        assembled = parts
+          .filter((p) => p.type === 'text')
+          .map((p) => (p.type === 'text' ? p.text ?? '' : ''))
+          .join('');
+      }
+
+      return assembled;
+    };
+
+    const assistantText = await waitForResult();
+
+    if (!assistantText.trim()) {
+      throw new Error('No assistant text returned.');
+    }
+
+    return parseAiChatResponse(assistantText, sessionId);
+  }
+
+  const result = await client.session.prompt({
+    path: { id: sessionId },
+    body: {
+      ...(model ? { model } : {}),
+      system,
+      parts: [
+        { type: 'text', text: snapshot },
+        { type: 'text', text: `\nREQUEST:\n${prompt}` },
+      ],
+    },
+  });
+
+  if (!result.data) {
+    throw new Error(`Prompt failed: ${String(result.error)}`);
+  }
+
+  const parts = Array.isArray(result.data.parts) ? (result.data.parts as Part[]) : [];
+  const assistantText = parts
+    .filter((p) => p.type === 'text')
+    .map((p) => (p.type === 'text' ? p.text ?? '' : ''))
+    .join('');
+
+  if (!assistantText.trim()) {
+    throw new Error('No assistant text returned.');
+  }
+
+  return parseAiChatResponse(assistantText, sessionId);
+};
+
+export const applyAiReplacementsToPage = async (args: {
+  page: Page;
+  replacements: EditorTsAiChatReplacement[];
+  saveJson: (json: string) => Promise<void>;
+  saveCss: (css: string) => Promise<void>;
+  saveComponentScript: (id: string, script: string) => Promise<void>;
+}): Promise<void> => {
+  const { replacements, saveJson, saveCss, saveComponentScript } = args;
+
+  for (const r of replacements) {
+    if (r.path === 'page.json') {
+      await saveJson(r.content);
+      continue;
+    }
+
+    if (r.path === 'styles.css') {
+      await saveCss(r.content);
+      continue;
+    }
+
+    if (r.path.startsWith('components/') && r.path.endsWith('.js')) {
+      const id = r.path.slice('components/'.length, -3);
+      await saveComponentScript(id, r.content);
+    }
+  }
+};