clawcontainer 1.0.0

package/src/event-emitter.ts

@@ -0,0 +1,28 @@
+// ─── Typed Event Emitter ────────────────────────────────────────────────────
+
+export class TypedEventEmitter<T extends Record<string, unknown[]> = Record<string, unknown[]>> {
+  private handlers = new Map<keyof T, Set<(...args: any[]) => void>>();
+
+  on<K extends keyof T>(event: K, fn: (...args: T[K]) => void): void {
+    if (!this.handlers.has(event)) this.handlers.set(event, new Set());
+    this.handlers.get(event)!.add(fn);
+  }
+
+  off<K extends keyof T>(event: K, fn: (...args: T[K]) => void): void {
+    this.handlers.get(event)?.delete(fn);
+  }
+
+  once<K extends keyof T>(event: K, fn: (...args: T[K]) => void): void {
+    const wrapper = (...args: T[K]) => {
+      this.off(event, wrapper);
+      fn(...args);
+    };
+    this.on(event, wrapper);
+  }
+
+  protected emit<K extends keyof T>(event: K, ...args: T[K]): void {
+    const set = this.handlers.get(event);
+    if (!set) return;
+    for (const fn of set) fn(...args);
+  }
+}

package/src/git-service.ts

@@ -0,0 +1,202 @@
+// ─── GitHub API Git Service ──────────────────────────────────────────────────
+// Clone repos via Trees API, push changes via Git Data API.
+// Runs entirely in-browser using fetch() — no git binary needed.
+
+export interface GitFile {
+  path: string;
+  content: string;
+}
+
+export interface RepoInfo {
+  owner: string;
+  repo: string;
+}
+
+const API_BASE = 'https://api.github.com';
+
+export class GitService {
+  private token: string;
+  private owner: string;
+  private repo: string;
+  private branch: string;
+
+  constructor(token: string, owner: string, repo: string, branch = 'main') {
+    this.token = token;
+    this.owner = owner;
+    this.repo = repo;
+    this.branch = branch;
+  }
+
+  /** Extract owner/repo from a GitHub URL. */
+  static parseRepoUrl(url: string): RepoInfo {
+    // Supports: https://github.com/owner/repo, https://github.com/owner/repo.git,
+    // github.com/owner/repo, owner/repo
+    const cleaned = url.trim().replace(/\.git\s*$/, '').replace(/\/+$/, '');
+    const ghMatch = cleaned.match(/(?:https?:\/\/)?(?:www\.)?github\.com\/([^/]+)\/([^/]+)/);
+    if (ghMatch) return { owner: ghMatch[1], repo: ghMatch[2] };
+
+    // owner/repo shorthand
+    const shortMatch = cleaned.match(/^([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+)$/);
+    if (shortMatch) return { owner: shortMatch[1], repo: shortMatch[2] };
+
+    throw new Error(`Invalid GitHub URL: ${url}`);
+  }
+
+  private headers(): Record<string, string> {
+    return {
+      'Authorization': `Bearer ${this.token}`,
+      'Accept': 'application/vnd.github+json',
+      'X-GitHub-Api-Version': '2022-11-28',
+    };
+  }
+
+  private async api<T>(path: string, init?: RequestInit): Promise<T> {
+    const resp = await fetch(`${API_BASE}${path}`, {
+      ...init,
+      headers: { ...this.headers(), ...init?.headers },
+    });
+    if (!resp.ok) {
+      const body = await resp.text().catch(() => '');
+      throw new Error(`GitHub API ${resp.status}: ${resp.statusText} — ${body.slice(0, 300)}`);
+    }
+    return resp.json() as Promise<T>;
+  }
+
+  /** Detect the default branch of the repo. */
+  async detectDefaultBranch(): Promise<string> {
+    const repo = await this.api<{ default_branch: string }>(
+      `/repos/${this.owner}/${this.repo}`,
+    );
+    this.branch = repo.default_branch;
+    return this.branch;
+  }
+
+  /** Fetch the full file tree + contents from the repo. */
+  async fetchRepoTree(): Promise<GitFile[]> {
+    // Get the tree SHA for the branch
+    const ref = await this.api<{ object: { sha: string } }>(
+      `/repos/${this.owner}/${this.repo}/git/ref/heads/${this.branch}`,
+    );
+    const commitSha = ref.object.sha;
+
+    const commit = await this.api<{ tree: { sha: string } }>(
+      `/repos/${this.owner}/${this.repo}/git/commits/${commitSha}`,
+    );
+    const treeSha = commit.tree.sha;
+
+    // Get recursive tree
+    const tree = await this.api<{
+      tree: Array<{ path: string; type: string; sha: string; size?: number }>;
+      truncated: boolean;
+    }>(`/repos/${this.owner}/${this.repo}/git/trees/${treeSha}?recursive=1`);
+
+    // Fetch blob contents for files (skip large files > 1MB)
+    const files: GitFile[] = [];
+    const blobs = tree.tree.filter(
+      (n) => n.type === 'blob' && (n.size ?? 0) < 1_048_576,
+    );
+
+    // Batch fetch in parallel (max 10 concurrent)
+    const batchSize = 10;
+    for (let i = 0; i < blobs.length; i += batchSize) {
+      const batch = blobs.slice(i, i + batchSize);
+      const results = await Promise.all(
+        batch.map(async (blob) => {
+          try {
+            const data = await this.api<{ content: string; encoding: string }>(
+              `/repos/${this.owner}/${this.repo}/git/blobs/${blob.sha}`,
+            );
+            if (data.encoding === 'base64') {
+              return { path: blob.path, content: atob(data.content.replace(/\n/g, '')) };
+            }
+            return { path: blob.path, content: data.content };
+          } catch {
+            return null; // Skip files that fail
+          }
+        }),
+      );
+      for (const r of results) {
+        if (r) files.push(r);
+      }
+    }
+
+    return files;
+  }
+
+  /**
+   * Push file changes as a single atomic commit.
+   * Creates blobs → tree → commit → updates ref.
+   */
+  async pushChanges(files: GitFile[], message: string): Promise<string> {
+    // 1. Get current commit SHA for the branch
+    const ref = await this.api<{ object: { sha: string } }>(
+      `/repos/${this.owner}/${this.repo}/git/ref/heads/${this.branch}`,
+    );
+    const parentSha = ref.object.sha;
+
+    // 2. Create blobs for each file
+    const treeEntries: Array<{ path: string; mode: string; type: string; sha: string }> = [];
+    for (const file of files) {
+      const blob = await this.api<{ sha: string }>(
+        `/repos/${this.owner}/${this.repo}/git/blobs`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: file.content, encoding: 'utf-8' }),
+        },
+      );
+      treeEntries.push({
+        path: file.path,
+        mode: '100644',
+        type: 'blob',
+        sha: blob.sha,
+      });
+    }
+
+    // 3. Create tree based on parent commit's tree
+    const parentCommit = await this.api<{ tree: { sha: string } }>(
+      `/repos/${this.owner}/${this.repo}/git/commits/${parentSha}`,
+    );
+    const newTree = await this.api<{ sha: string }>(
+      `/repos/${this.owner}/${this.repo}/git/trees`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          base_tree: parentCommit.tree.sha,
+          tree: treeEntries,
+        }),
+      },
+    );
+
+    // 4. Create commit
+    const newCommit = await this.api<{ sha: string }>(
+      `/repos/${this.owner}/${this.repo}/git/commits`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message,
+          tree: newTree.sha,
+          parents: [parentSha],
+        }),
+      },
+    );
+
+    // 5. Update ref
+    await this.api(
+      `/repos/${this.owner}/${this.repo}/git/refs/heads/${this.branch}`,
+      {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sha: newCommit.sha }),
+      },
+    );
+
+    return newCommit.sha;
+  }
+
+  get repoOwner(): string { return this.owner; }
+  get repoName(): string { return this.repo; }
+  get repoBranch(): string { return this.branch; }
+}

package/src/main.ts

@@ -0,0 +1,9 @@
+import { ClawContainer } from './sdk.js';
+
+// ─── Boot sequence ───────────────────────────────────────────────────────────
+
+const cc = new ClawContainer('#app');
+cc.start().catch(console.error);
+
+// Expose SDK globally for console access and external scripts
+(window as any).clawcontainer = cc;

package/src/monaco-editor.ts

@@ -0,0 +1,111 @@
+import * as monaco from 'monaco-editor';
+
+// ─── Extension → Monaco language ID ──────────────────────────────────────────
+const EXT_TO_LANG: Record<string, string> = {
+  js: 'javascript', jsx: 'javascript',
+  ts: 'typescript', tsx: 'typescript',
+  json: 'json',
+  html: 'html', htm: 'html',
+  css: 'css',
+  md: 'markdown',
+  yaml: 'yaml', yml: 'yaml',
+  xml: 'xml', svg: 'xml',
+  py: 'python',
+  rb: 'ruby',
+  go: 'go',
+  rs: 'rust',
+  sh: 'shell', bash: 'shell',
+  sql: 'sql',
+  toml: 'ini',
+  ini: 'ini', conf: 'ini',
+  vue: 'html',
+  svelte: 'html',
+};
+
+const THEME_NAME = 'clawchef-dark';
+
+let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
+const models = new Map<string, monaco.editor.ITextModel>();
+
+// ─── Theme ───────────────────────────────────────────────────────────────────
+export function initMonacoTheme(): void {
+  monaco.editor.defineTheme(THEME_NAME, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': '#161b22',
+      'editor.foreground': '#e6edf3',
+      'editorLineNumber.foreground': '#8b949e',
+      'editorLineNumber.activeForeground': '#e6edf3',
+      'editor.lineHighlightBackground': '#21262d',
+      'editorWidget.background': '#161b22',
+      'editorWidget.border': '#30363d',
+    },
+  });
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function langFromFilename(filename: string): string {
+  const ext = filename.includes('.') ? filename.split('.').pop()!.toLowerCase() : '';
+  return EXT_TO_LANG[ext] ?? 'plaintext';
+}
+
+// ─── Public API ──────────────────────────────────────────────────────────────
+
+/** Create the single editor instance (call once when the first tab opens). */
+export function createEditorInstance(container: HTMLElement): void {
+  if (editorInstance) return;
+  editorInstance = monaco.editor.create(container, {
+    theme: THEME_NAME,
+    readOnly: false,
+    automaticLayout: true,
+    minimap: { enabled: false },
+    contextmenu: false,
+    fontFamily: "'SF Mono','Fira Code','Cascadia Code',Menlo,monospace",
+    fontSize: 12,
+    lineHeight: 1.6 * 12,
+    scrollBeyondLastLine: false,
+    renderLineHighlight: 'line',
+    padding: { top: 12, bottom: 12 },
+  });
+}
+
+/** Create or reuse a model for a file, then switch the editor to it. */
+export function openFileModel(filePath: string, filename: string, content: string): void {
+  if (!editorInstance) return;
+
+  let model = models.get(filePath);
+  if (!model) {
+    const lang = langFromFilename(filename);
+    model = monaco.editor.createModel(content, lang);
+    models.set(filePath, model);
+  }
+
+  editorInstance.setModel(model);
+}
+
+/** Get the current content of a file's model. */
+export function getModelContent(filePath: string): string {
+  const model = models.get(filePath);
+  return model ? model.getValue() : '';
+}
+
+/** Dispose a single file model (when closing a tab). */
+export function closeFileModel(filePath: string): void {
+  const model = models.get(filePath);
+  if (model) {
+    model.dispose();
+    models.delete(filePath);
+  }
+}
+
+/** Dispose the editor instance and all models. */
+export function disposeAll(): void {
+  if (editorInstance) {
+    editorInstance.dispose();
+    editorInstance = null;
+  }
+  for (const model of models.values()) model.dispose();
+  models.clear();
+}

package/src/net-intercept.ts

@@ -0,0 +1,74 @@
+// ─── Browser-side fetch interceptor ──────────────────────────────────────────
+// Monkey-patches window.fetch to log all outbound requests to the audit log.
+
+import { AuditLog } from './audit.js';
+
+export function installBrowserFetchInterceptor(audit: AuditLog): void {
+  const originalFetch = window.fetch;
+
+  window.fetch = async function patchedFetch(
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<Response> {
+    const startMs = performance.now();
+
+    // Normalize URL
+    let url: string;
+    if (input instanceof Request) {
+      url = input.url;
+    } else if (input instanceof URL) {
+      url = input.href;
+    } else {
+      url = input;
+    }
+
+    // Normalize method + headers
+    const method = (init?.method ?? (input instanceof Request ? input.method : 'GET')).toUpperCase();
+
+    const rawHeaders: Record<string, string> = {};
+    const headerSource = init?.headers ?? (input instanceof Request ? input.headers : undefined);
+    if (headerSource instanceof Headers) {
+      headerSource.forEach((v, k) => { rawHeaders[k] = v; });
+    } else if (headerSource && typeof headerSource === 'object') {
+      for (const [k, v] of Object.entries(headerSource)) {
+        rawHeaders[k] = String(v);
+      }
+    }
+
+    // Capture request body
+    let bodyPreview: string | undefined;
+    const bodySource = init?.body ?? (input instanceof Request ? input.body : undefined);
+    if (typeof bodySource === 'string') {
+      bodyPreview = AuditLog.truncateBody(bodySource);
+    }
+
+    // Log request
+    audit.log('net.request', url, {
+      origin: 'browser',
+      method,
+      headers: AuditLog.maskHeaders(rawHeaders),
+      ...(bodyPreview ? { bodyPreview } : {}),
+    }, { source: 'system' });
+
+    // Call original
+    const resp = await originalFetch.call(window, input, init);
+
+    const durationMs = Math.round(performance.now() - startMs);
+
+    // Collect response headers
+    const respHeaders: Record<string, string> = {};
+    resp.headers.forEach((v, k) => { respHeaders[k] = v; });
+
+    // Log response
+    audit.log('net.response', url, {
+      origin: 'browser',
+      method,
+      status: resp.status,
+      statusText: resp.statusText,
+      headers: respHeaders,
+      durationMs,
+    }, { source: 'system' });
+
+    return resp;
+  };
+}

package/src/network-hook.ts

@@ -0,0 +1,248 @@
+// ─── Container-side network hook ─────────────────────────────────────────────
+// Exported as a string constant, mounted into the WebContainer as network-hook.cjs
+// and loaded via NODE_OPTIONS=--require ./network-hook.cjs.
+// Patches Node.js http/https/fetch to emit __NET_AUDIT__ markers on stderr.
+
+export const NETWORK_HOOK_CJS = `'use strict';
+// ── network-hook.cjs ── injected via NODE_OPTIONS=--require ──
+
+// Skip logging when running inside npm to avoid flooding with registry requests
+if (process.env.npm_execpath || process.env.npm_lifecycle_event) {
+  return;
+}
+
+(function () {
+  var MARKER = '__NET_AUDIT__:';
+
+  function maskVal(v) {
+    if (!v || typeof v !== 'string') return '****';
+    if (v.length <= 12) return '****';
+    return v.slice(0, 7) + '...' + v.slice(-4);
+  }
+
+  var SENSITIVE = /^(authorization|x-api-key|api-key|x-goog-api-key)$/i;
+  var SENSITIVE_PARTIAL = /secret|token/i;
+
+  function maskHeaders(h) {
+    if (!h || typeof h !== 'object') return {};
+    var out = {};
+    var keys = Object.keys(h);
+    for (var i = 0; i < keys.length; i++) {
+      var k = keys[i];
+      var v = typeof h[k] === 'string' ? h[k] : String(h[k]);
+      if (SENSITIVE.test(k) || SENSITIVE_PARTIAL.test(k)) {
+        out[k] = maskVal(v);
+      } else {
+        out[k] = v;
+      }
+    }
+    return out;
+  }
+
+  function emit(obj) {
+    try {
+      process.stderr.write(MARKER + JSON.stringify(obj) + '\\n');
+    } catch (_) {
+      // never crash the host process
+    }
+  }
+
+  function buildUrl(opts) {
+    if (typeof opts === 'string') return opts;
+    if (opts && opts.href) return opts.href;
+    if (!opts) return '<unknown>';
+    var proto = opts.protocol || 'https:';
+    var host = opts.hostname || opts.host || 'localhost';
+    var port = opts.port ? ':' + opts.port : '';
+    var path = opts.path || '/';
+    return proto + '//' + host + port + path;
+  }
+
+  var BODY_MAX = 2000;
+
+  // ── Patch http/https ──
+
+  function patchModule(modName) {
+    try {
+      var mod = require(modName);
+    } catch (_) {
+      return;
+    }
+
+    var origRequest = mod.request;
+    var origGet = mod.get;
+
+    function wrapRequest(orig) {
+      return function patchedRequest(urlOrOpts, optsOrCb, maybeCb) {
+        var opts, cb;
+        if (typeof urlOrOpts === 'string' || (urlOrOpts && typeof urlOrOpts.href === 'string')) {
+          opts = typeof optsOrCb === 'object' ? optsOrCb : {};
+          cb = typeof optsOrCb === 'function' ? optsOrCb : maybeCb;
+        } else {
+          opts = urlOrOpts || {};
+          cb = typeof optsOrCb === 'function' ? optsOrCb : maybeCb;
+        }
+
+        var url = buildUrl(urlOrOpts) !== '<unknown>' ? buildUrl(urlOrOpts) : buildUrl(opts);
+        var method = (opts.method || 'GET').toUpperCase();
+        var hdrs = opts.headers ? maskHeaders(opts.headers) : {};
+        var startTime = Date.now();
+
+        emit({
+          type: 'request',
+          url: url,
+          method: method,
+          headers: hdrs,
+          ts: new Date().toISOString(),
+        });
+
+        var req = orig.apply(this, arguments);
+
+        // Capture request body
+        var bodyChunks = [];
+        var bodyLen = 0;
+        var origWrite = req.write;
+        var origEnd = req.end;
+
+        req.write = function (chunk) {
+          if (bodyLen < BODY_MAX && chunk) {
+            var s = typeof chunk === 'string' ? chunk : chunk.toString('utf-8');
+            bodyChunks.push(s.slice(0, BODY_MAX - bodyLen));
+            bodyLen += s.length;
+          }
+          return origWrite.apply(req, arguments);
+        };
+
+        req.end = function (chunk) {
+          if (bodyLen < BODY_MAX && chunk && typeof chunk !== 'function') {
+            var s = typeof chunk === 'string' ? chunk : (Buffer.isBuffer(chunk) ? chunk.toString('utf-8') : '');
+            if (s) {
+              bodyChunks.push(s.slice(0, BODY_MAX - bodyLen));
+              bodyLen += s.length;
+            }
+          }
+
+          if (bodyChunks.length > 0) {
+            var body = bodyChunks.join('');
+            emit({
+              type: 'request.body',
+              url: url,
+              method: method,
+              bodyPreview: body.length > BODY_MAX ? body.slice(0, BODY_MAX) + '...[truncated]' : body,
+              ts: new Date().toISOString(),
+            });
+          }
+
+          return origEnd.apply(req, arguments);
+        };
+
+        // Capture response
+        req.on('response', function (res) {
+          var durationMs = Date.now() - startTime;
+          emit({
+            type: 'response',
+            url: url,
+            method: method,
+            status: res.statusCode,
+            headers: maskHeaders(res.headers),
+            durationMs: durationMs,
+            ts: new Date().toISOString(),
+          });
+        });
+
+        req.on('error', function (err) {
+          var durationMs = Date.now() - startTime;
+          emit({
+            type: 'response',
+            url: url,
+            method: method,
+            error: err.message,
+            durationMs: durationMs,
+            ts: new Date().toISOString(),
+          });
+        });
+
+        return req;
+      };
+    }
+
+    mod.request = wrapRequest(origRequest);
+    mod.get = wrapRequest(origGet);
+  }
+
+  patchModule('http');
+  patchModule('https');
+
+  // ── Patch globalThis.fetch (Node 18+) ──
+
+  if (typeof globalThis.fetch === 'function') {
+    var origFetch = globalThis.fetch;
+
+    globalThis.fetch = function patchedFetch(input, init) {
+      var url = typeof input === 'string' ? input
+        : (input && input.url) ? input.url
+        : String(input);
+      var method = ((init && init.method) || (input && input.method) || 'GET').toUpperCase();
+
+      var rawHeaders = {};
+      var hdrSrc = (init && init.headers) || (input && input.headers);
+      if (hdrSrc && typeof hdrSrc === 'object') {
+        if (typeof hdrSrc.forEach === 'function') {
+          hdrSrc.forEach(function (v, k) { rawHeaders[k] = v; });
+        } else {
+          var keys = Object.keys(hdrSrc);
+          for (var i = 0; i < keys.length; i++) rawHeaders[keys[i]] = String(hdrSrc[keys[i]]);
+        }
+      }
+
+      var bodyPreview;
+      var bodySrc = (init && init.body) || (input && input.body);
+      if (typeof bodySrc === 'string') {
+        bodyPreview = bodySrc.length > BODY_MAX ? bodySrc.slice(0, BODY_MAX) + '...[truncated]' : bodySrc;
+      }
+
+      var startTime = Date.now();
+
+      emit({
+        type: 'request',
+        url: url,
+        method: method,
+        headers: maskHeaders(rawHeaders),
+        bodyPreview: bodyPreview,
+        ts: new Date().toISOString(),
+      });
+
+      return origFetch.apply(globalThis, arguments).then(function (resp) {
+        var durationMs = Date.now() - startTime;
+        var respHeaders = {};
+        if (resp.headers && typeof resp.headers.forEach === 'function') {
+          resp.headers.forEach(function (v, k) { respHeaders[k] = v; });
+        }
+
+        emit({
+          type: 'response',
+          url: url,
+          method: method,
+          status: resp.status,
+          headers: respHeaders,
+          durationMs: durationMs,
+          ts: new Date().toISOString(),
+        });
+
+        return resp;
+      }, function (err) {
+        var durationMs = Date.now() - startTime;
+        emit({
+          type: 'response',
+          url: url,
+          method: method,
+          error: err.message,
+          durationMs: durationMs,
+          ts: new Date().toISOString(),
+        });
+        throw err;
+      });
+    };
+  }
+})();
+`;