clawcontainer 1.0.0

package/dist/net-intercept.d.ts

@@ -0,0 +1,2 @@
+import { AuditLog } from './audit.js';
+export declare function installBrowserFetchInterceptor(audit: AuditLog): void;

package/dist/network-hook.d.ts

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

package/dist/plugin.d.ts

@@ -0,0 +1,20 @@
+import type { ClawContainerPlugin, ClawContainerSDK, TabDefinition } from './types.js';
+export declare class PluginManager {
+    private plugins;
+    /** Register a plugin, storing it for lifecycle dispatch. */
+    register(plugin: ClawContainerPlugin): void;
+    /** Dispatch onInit to all registered plugins in order. */
+    dispatchInit(cc: ClawContainerSDK): void;
+    /** Dispatch onReady to all registered plugins in order. */
+    dispatchReady(cc: ClawContainerSDK): void;
+    /** Dispatch onDestroy to all registered plugins in order. */
+    dispatchDestroy(cc: ClawContainerSDK): void;
+    /** Collect merged extra npm dependencies from all plugins. */
+    get mergedServices(): Record<string, string>;
+    /** Collect merged extra workspace files from all plugins. */
+    get mergedWorkspace(): Record<string, string>;
+    /** Collect merged extra env vars from all plugins. */
+    get mergedEnv(): Record<string, string>;
+    /** Collect all tab definitions from plugins. */
+    get mergedTabs(): TabDefinition[];
+}

package/dist/policy.d.ts

@@ -0,0 +1,58 @@
+export type PolicyAction = 'file.read' | 'file.write' | 'process.spawn' | 'server.bind' | 'env.configure' | 'tool.use' | 'git.clone' | 'git.push';
+export interface FileRule {
+    pattern: string;
+    allow: boolean;
+}
+export interface ProcessRule {
+    pattern: string;
+    allow: boolean;
+}
+export interface PortRule {
+    port: number | '*';
+    allow: boolean;
+}
+export interface ToolRule {
+    name: string;
+    allow: boolean;
+}
+export interface RuntimeLimits {
+    maxFileSize: number;
+    maxProcesses: number;
+    maxTurns: number;
+    timeoutSec: number;
+}
+export interface Policy {
+    version: '1';
+    mode: 'allow-all' | 'deny-all';
+    files: {
+        read: FileRule[];
+        write: FileRule[];
+    };
+    processes: ProcessRule[];
+    ports: PortRule[];
+    tools: ToolRule[];
+    limits: RuntimeLimits;
+}
+export interface CheckResult {
+    allowed: boolean;
+    rule?: string;
+    action: PolicyAction;
+    subject: string;
+}
+export declare class PolicyDeniedError extends Error {
+    action: PolicyAction;
+    subject: string;
+    rule: string;
+    constructor(action: PolicyAction, subject: string, rule: string);
+}
+export declare class PolicyEngine {
+    private policy;
+    constructor(policy?: Policy);
+    loadPolicy(policy: Policy): void;
+    getPolicy(): Policy;
+    check(action: PolicyAction, subject: string, meta?: Record<string, unknown>): CheckResult;
+    enforce(action: PolicyAction, subject: string, meta?: Record<string, unknown>): CheckResult;
+    toYaml(): string;
+    static fromYaml(yaml: string): Policy;
+    static defaultPolicy(): Policy;
+}

package/dist/sdk.d.ts

@@ -0,0 +1,61 @@
+import type { WebContainer } from '@webcontainer/api';
+import { TerminalManager } from './terminal.js';
+import { type AuditEntry, type AuditSource, type AuditLevel, type AuditEvent } from './audit.js';
+import { TypedEventEmitter } from './event-emitter.js';
+import type { ClawContainerOptions, ClawContainerPlugin, ClawContainerEvents, ClawContainerSDK, TabDefinition } from './types.js';
+import { type ContainerTemplate } from './templates.js';
+export declare class ClawContainer extends TypedEventEmitter<ClawContainerEvents> implements ClawContainerSDK {
+    private static _templateRegistry;
+    /** Registered templates (read-only). */
+    static get templates(): Map<string, ContainerTemplate>;
+    /** Register a named template for reuse. */
+    static registerTemplate(template: ContainerTemplate): void;
+    /** Parse a YAML string into a ContainerTemplate. */
+    static parseTemplate(yaml: string): ContainerTemplate;
+    private _container;
+    private _terminal;
+    private _ui;
+    private _audit;
+    private _policy;
+    private _plugins;
+    private _tabs;
+    private _options;
+    private _selector;
+    private _started;
+    constructor(selector: string, options?: ClawContainerOptions);
+    /** Raw WebContainer instance for direct access. */
+    get container(): WebContainer | null;
+    /** Terminal manager instance. */
+    get terminal(): TerminalManager;
+    start(): Promise<void>;
+    stop(): Promise<void>;
+    restart(): Promise<void>;
+    /** Run any shell command and return stdout. */
+    exec(cmd: string): Promise<string>;
+    /** Open a raw interactive shell. */
+    shell(): Promise<void>;
+    /** Write data to the active process stdin. */
+    sendInput(data: string): Promise<void>;
+    fs: {
+        read: (path: string) => Promise<string>;
+        write: (path: string, content: string) => Promise<void>;
+        list: (dir?: string) => Promise<string[]>;
+        mkdir: (path: string) => Promise<void>;
+        remove: (path: string) => Promise<void>;
+    };
+    git: {
+        clone: (url: string, token: string) => Promise<void>;
+        push: (message?: string) => Promise<string>;
+    };
+    /** Get audit log entries, optionally filtered. */
+    logs(filter?: {
+        source?: AuditSource;
+        level?: AuditLevel;
+        event?: AuditEvent;
+    }): AuditEntry[];
+    /** Register a plugin. Must be called before start(). */
+    use(plugin: ClawContainerPlugin): void;
+    addTab(def: TabDefinition): void;
+    removeTab(id: string): void;
+    private waitForConfig;
+}

package/dist/tab-manager.d.ts

@@ -0,0 +1,11 @@
+import type { TabDefinition } from './types.js';
+import type { UIManager } from './ui.js';
+export declare class TabManager {
+    private ui;
+    private customTabs;
+    constructor(ui: UIManager);
+    /** Add a custom tab to the UI. Delegates to UIManager's addCustomTab. */
+    addTab(def: TabDefinition): void;
+    /** Remove a custom tab from the UI. */
+    removeTab(id: string): void;
+}

package/dist/templates.d.ts

@@ -0,0 +1,46 @@
+import type { AgentConfig, ClawContainerOptions, TabDefinition } from './types.js';
+/** A named, reusable container configuration preset. */
+export interface ContainerTemplate {
+    name: string;
+    description?: string;
+    agent?: AgentConfig | false;
+    workspace?: Record<string, string>;
+    services?: Record<string, string>;
+    env?: Record<string, string>;
+    startupScript?: string;
+    tabs?: TabDefinition[];
+}
+/** Built-in gitclaw template — mirrors the previous hardcoded defaults. */
+export declare const GITCLAW_TEMPLATE: ContainerTemplate;
+export declare class TemplateRegistry {
+    private templates;
+    constructor();
+    register(template: ContainerTemplate): void;
+    get(name: string): ContainerTemplate | undefined;
+    has(name: string): boolean;
+    list(): string[];
+    /** Expose the internal map (read-only use). */
+    get all(): Map<string, ContainerTemplate>;
+}
+/**
+ * Resolve a template input to a concrete ContainerTemplate.
+ * - string → lookup by name in registry
+ * - object → use directly
+ * - undefined → default to 'gitclaw'
+ */
+export declare function resolveTemplate(input: string | ContainerTemplate | undefined, registry: TemplateRegistry): ContainerTemplate;
+/**
+ * Merge a resolved template with user-supplied ClawContainerOptions.
+ * Options win for conflicts. Record fields (workspace, services, env) are merged per-key.
+ * Scalar fields (agent, startupScript) are replaced when present in options.
+ */
+export declare function mergeTemplateWithOptions(template: ContainerTemplate, options: ClawContainerOptions): ClawContainerOptions;
+/**
+ * Parse a YAML string into a ContainerTemplate.
+ * Supports the simple subset needed for template definitions:
+ * - Top-level scalar keys (name, description, startupScript)
+ * - Top-level `agent:` with nested scalar keys + args/env
+ * - Top-level Record sections (workspace, services, env)
+ * - `agent: false` to skip agent launch
+ */
+export declare function parseTemplateYaml(yaml: string): ContainerTemplate;

package/dist/terminal.d.ts

@@ -0,0 +1,19 @@
+import { Terminal } from '@xterm/xterm';
+export declare class TerminalManager {
+    readonly xterm: Terminal;
+    private readonly fitAddon;
+    private resizeObserver;
+    constructor();
+    /** Mount the terminal into a DOM element and start auto-resize. */
+    mount(container: HTMLElement): void;
+    /** Write text/bytes to the terminal display (not to stdin). */
+    write(data: string | Uint8Array): void;
+    /** Register a handler for user keystrokes (sent to shell stdin). */
+    onData(handler: (data: string) => void): void;
+    /** Current terminal dimensions for pty resize. */
+    get dimensions(): {
+        cols: number;
+        rows: number;
+    };
+    dispose(): void;
+}

package/dist/types.d.ts

@@ -0,0 +1,109 @@
+import type { WebContainer } from '@webcontainer/api';
+import type { AuditEntry, AuditSource, AuditLevel, AuditEvent } from './audit.js';
+import type { ContainerTemplate } from './templates.js';
+/** Configuration for launching an agent inside the container. */
+export interface AgentConfig {
+    /** npm package name (e.g. 'gitclaw') */
+    package: string;
+    /** Package version (e.g. '1.1.4'). Defaults to 'latest'. */
+    version?: string;
+    /** Entry file relative to the package directory (e.g. 'dist/index.js') */
+    entry: string;
+    /** Extra CLI args passed to node */
+    args?: string[];
+    /** Extra environment variables for the agent process */
+    env?: Record<string, string>;
+}
+/** Options for creating a ClawContainer instance. */
+export interface ClawContainerOptions {
+    /** Agent to launch. Pass `false` to skip agent launch entirely. Default: gitclaw. */
+    agent?: AgentConfig | false;
+    /** Extra workspace files to mount: flat map of relative path → content */
+    workspace?: Record<string, string>;
+    /** Extra npm dependencies to install: package → version */
+    services?: Record<string, string>;
+    /** Environment variables injected into the container */
+    env?: Record<string, string>;
+    /** Shell script to run after install, before agent launch */
+    startupScript?: string;
+    /** Template to use: name of a registered template, or a ContainerTemplate object. Default: 'gitclaw'. */
+    template?: string | ContainerTemplate;
+    /** Plugins to register before start */
+    plugins?: ClawContainerPlugin[];
+    /** Custom tabs to add on start */
+    tabs?: TabDefinition[];
+}
+/** Definition for a custom UI tab. */
+export interface TabDefinition {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Display label in the tab bar */
+    label: string;
+    /** HTML content or a callback that receives the content container */
+    render: string | ((container: HTMLDivElement) => void);
+}
+/** Plugin lifecycle hooks. All are optional. */
+export interface ClawContainerPlugin {
+    /** Plugin name (for debugging) */
+    name: string;
+    /** Extra npm deps this plugin needs */
+    services?: Record<string, string>;
+    /** Extra workspace files to merge */
+    workspace?: Record<string, string>;
+    /** Extra env vars to inject */
+    env?: Record<string, string>;
+    /** Custom tabs to register */
+    tabs?: TabDefinition[];
+    /** Called after plugin is registered, before container boot */
+    onInit?(cc: ClawContainerSDK): void;
+    /** Called after container is ready */
+    onReady?(cc: ClawContainerSDK): void;
+    /** Called when container is stopped */
+    onDestroy?(cc: ClawContainerSDK): void;
+}
+/** Event map for ClawContainer typed events. */
+export type ClawContainerEvents = {
+    ready: [];
+    error: [error: Error];
+    status: [status: string];
+    'file.change': [path: string];
+    'process.exit': [code: number];
+    'server.ready': [port: number, url: string];
+    log: [entry: AuditEntry];
+};
+/**
+ * Public surface of the SDK passed to plugins.
+ * This is the same as ClawContainer but expressed as an interface
+ * so plugins don't depend on the concrete class.
+ */
+export interface ClawContainerSDK {
+    readonly container: WebContainer | null;
+    start(): Promise<void>;
+    stop(): Promise<void>;
+    restart(): Promise<void>;
+    exec(cmd: string): Promise<string>;
+    shell(): Promise<void>;
+    sendInput(data: string): Promise<void>;
+    fs: {
+        read(path: string): Promise<string>;
+        write(path: string, content: string): Promise<void>;
+        list(dir?: string): Promise<string[]>;
+        mkdir(path: string): Promise<void>;
+        remove(path: string): Promise<void>;
+    };
+    git: {
+        clone(url: string, token: string): Promise<void>;
+        push(message?: string): Promise<string>;
+    };
+    logs(filter?: {
+        source?: AuditSource;
+        level?: AuditLevel;
+        event?: AuditEvent;
+    }): AuditEntry[];
+    use(plugin: ClawContainerPlugin): void;
+    addTab(def: TabDefinition): void;
+    removeTab(id: string): void;
+    on<K extends keyof ClawContainerEvents>(event: K, fn: (...args: ClawContainerEvents[K]) => void): void;
+    off<K extends keyof ClawContainerEvents>(event: K, fn: (...args: ClawContainerEvents[K]) => void): void;
+    once<K extends keyof ClawContainerEvents>(event: K, fn: (...args: ClawContainerEvents[K]) => void): void;
+}

package/dist/ui.d.ts

@@ -0,0 +1,81 @@
+import type { ContainerManager, ContainerStatus } from './container.js';
+import type { AuditLog } from './audit.js';
+import { PolicyEngine } from './policy.js';
+import type { TabDefinition } from './types.js';
+export declare class UIManager {
+    private container;
+    private audit;
+    private policy;
+    private activePanelId;
+    private refreshTimer;
+    private tabs;
+    private activeTabPath;
+    private auditUnsubscribe;
+    private syncInProgress;
+    private autoSyncTimer;
+    private cloneInProgress;
+    private customTabPaths;
+    constructor(container: ContainerManager, audit: AuditLog, policy: PolicyEngine);
+    init(): void;
+    /** Auto-open the browser preview tab on initial load. */
+    openPreviewOnLoad(): void;
+    setStatus(status: ContainerStatus): void;
+    getSavedConfig(): {
+        provider: string;
+        model: string;
+        envVars: Record<string, string>;
+    } | null;
+    showConfigPanel(): void;
+    private bindKeyboard;
+    private bindResizeHandles;
+    private initHResize;
+    private initVResize;
+    private bindFileTree;
+    private htmlWatcherStarted;
+    private startHtmlFileWatcher;
+    private openHtmlInPreview;
+    private startFileTreeRefresh;
+    private refreshFileTree;
+    private openFile;
+    private closeTab;
+    private switchTab;
+    private renderTabBar;
+    private saveActiveFile;
+    private previewBound;
+    private openPreviewTab;
+    private cloudBrowserBound;
+    private openCloudBrowserTab;
+    /** Show editor-container, preview-container, audit-container, policy-container, cloud-browser-container, or custom tab based on active tab type. */
+    private updateContentVisibility;
+    private openAuditTab;
+    private bindAuditFilters;
+    private matchesAuditFilters;
+    private renderAuditLog;
+    private createAuditRow;
+    private escHtml;
+    private bindTopbarButtons;
+    private bindRepoControls;
+    private handleClone;
+    private handleSync;
+    private startAutoSync;
+    private stopAutoSync;
+    private bindConfigPanel;
+    private populateModelOptions;
+    /** Ensure the first env row key matches the selected provider. */
+    private syncDefaultEnvKey;
+    private addEnvRow;
+    private getEnvRows;
+    private restoreConfig;
+    private saveConfig;
+    private openPolicyTab;
+    private bindPolicyPanel;
+    private loadPolicyYaml;
+    private applyPolicyYaml;
+    private resetPolicy;
+    private togglePanel;
+    private openPanel;
+    /** Add a custom tab with user-defined content. */
+    addCustomTab(def: TabDefinition): void;
+    /** Remove a custom tab by its definition id. */
+    removeCustomTab(id: string): void;
+}

package/dist/workspace.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Default workspace files mounted into the WebContainer /workspace directory.
+ */
+export declare const DEFAULT_AGENT_YAML = "spec_version: \"0.1.0\"\nname: my-agent\nversion: 1.0.0\nmodel:\n  preferred: \"\"   # set via API config panel\n  fallback: []\ntools: [cli, read, write, memory]\nruntime:\n  max_turns: 50\n  timeout: 120\n";
+export declare const DEFAULT_SOUL_MD = "# Agent Soul\n\nYou are a helpful, thoughtful AI assistant running inside ClawContainer.\nYou can read and write files, run commands, and remember things.\n";
+export declare const DEFAULT_RULES_MD = "# Agent Rules\n\n1. Be concise and accurate.\n2. Ask for clarification before taking irreversible actions.\n3. Prefer small, focused changes over large rewrites.\n4. Always explain what you are doing and why.\n";
+export declare const DEFAULT_MEMORY_MD = "# Memory Index\n\nNo memories saved yet.\n";
+/**
+ * Node.js script that acts as a git stub.
+ * npm will create node_modules/.bin/git → ../../git-stub.js with execute bit set.
+ */
+export declare const GIT_STUB_JS = "#!/usr/bin/env node\nconst [,, cmd, ...args] = process.argv;\nif (cmd === 'init') {\n  const fs = require('fs');\n  if (!fs.existsSync('.git')) {\n    fs.mkdirSync('.git/objects', { recursive: true });\n    fs.mkdirSync('.git/refs/heads', { recursive: true });\n    fs.writeFileSync('.git/HEAD', 'ref: refs/heads/main\\n');\n    fs.writeFileSync('.git/config', '[core]\\n\\trepositoryformatversion = 0\\n\\tbare = false\\n');\n  }\n  console.log('Initialized empty Git repository in ' + process.cwd() + '/.git/');\n} else if (cmd === '--version' || cmd === 'version') {\n  console.log('git version 2.39.0');\n} else if (cmd === 'rev-parse') {\n  if (args.includes('--show-toplevel')) process.stdout.write(process.cwd() + '\\n');\n  else process.stdout.write('\\n');\n}\n// add, commit, status, log, etc. silently succeed (exit 0)\nprocess.exit(0);\n";
+/** Returns the FileSystem tree to mount under /workspace inside WebContainer. */
+export declare function buildWorkspaceFiles(extra?: Record<string, string>): Record<string, any>;
+/** Returns the inner-container package.json that requests gitclaw. */
+export declare function buildContainerPackageJson(extraDeps?: Record<string, string>): string;

package/index.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ClawLess — A ClawContainer for AI Agents</title>
+    <link rel="icon" type="image/png" href="/logo.png" />
+    <link rel="stylesheet" href="/node_modules/@xterm/xterm/css/xterm.css" />
+    <link rel="stylesheet" href="/src/style.css" />
+  </head>
+  <body>
+    <!-- Loading overlay -->
+    <div id="loading-overlay">
+      <div class="loading-inner">
+        <div class="claw-logo"><img src="data:image/png;base64,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" alt="ClawContainer" width="64" height="64" class="loading-logo" /></div>
+        <p style="margin:0 0 4px;font-size:11px;opacity:.6;letter-spacing:.5px">Built by Shreyas Kapale @ Lyzr</p>
+        <h2>ClawLess</h2>
+        <p id="loading-status">Booting WebContainer…</p>
+        <div class="progress-bar"><div id="progress-fill"></div></div>
+      </div>
+    </div>
+
+    <!-- Main layout -->
+    <div id="app">
+      <!-- Header bar -->
+      <header id="topbar">
+        <div class="topbar-left">
+          <span class="logo"><img src="/logo.png" alt="ClawLess" width="20" height="20" class="topbar-logo" /> ClawLess</span>
+          <span id="container-status" class="status-badge status-booting">booting</span>
+          <span class="topbar-sep">|</span>
+          <span class="topbar-gitagent">supports agents built on <a href="https://gitagent.sh" target="_blank" rel="noopener noreferrer">GitAgent</a> standard</span>
+        </div>
+        <div class="topbar-center">
+          <input id="repo-url-input" type="text" placeholder="https://github.com/owner/repo" />
+          <button id="btn-clone" class="btn-icon" title="Clone Repository"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
+          <button id="btn-sync" class="btn-icon" title="Sync to Repository" disabled><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></button>
+          <label class="auto-sync-toggle" title="Auto-sync on file changes">
+            <input id="auto-sync-checkbox" type="checkbox" />
+            <span>Auto</span>
+          </label>
+        </div>
+        <div class="topbar-right">
+          <button id="btn-preview" class="btn-icon" title="Preview (localhost:3333)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></button>
+          <button id="btn-audit" class="btn-icon" title="Audit Log Viewer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></button>
+          <button id="btn-config" class="btn-icon" title="API Keys &amp; Config"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
+          <!-- Cloud Browser disabled for now -->
+          <button id="btn-cloud-browser" class="btn-icon" title="Cloud Browser (Browserbase)" style="display:none"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></button>
+          <button id="btn-policy" class="btn-icon" title="Policy / Guardrails"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></button>
+        </div>
+      </header>
+
+      <!-- Body: filetree | main-content | sidebar -->
+      <div id="body">
+        <!-- Always-on file tree -->
+        <aside id="filetree">
+          <div class="filetree-header">
+            <span>WORKSPACE</span>
+            <button id="btn-refresh-tree" title="Refresh"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></button>
+          </div>
+          <div id="filetree-list"></div>
+        </aside>
+
+        <div class="resize-handle resize-h" id="resize-filetree"></div>
+
+        <!-- Main content: editor panel + terminal -->
+        <div id="main-content">
+          <div id="editor-panel" class="hidden">
+            <div id="tab-bar"></div>
+            <div id="editor-container"></div>
+            <div id="preview-container" class="hidden">
+              <div id="preview-toolbar">
+                <button id="preview-back" class="preview-nav-btn" title="Back">&#8592;</button>
+                <button id="preview-forward" class="preview-nav-btn" title="Forward">&#8594;</button>
+                <button id="preview-reload" class="preview-nav-btn" title="Reload">&#8635;</button>
+                <input id="preview-url" type="text" placeholder="Enter URL…" />
+              </div>
+              <div id="preview-viewport">
+                <div id="preview-loading">Loading…</div>
+                <iframe id="preview-iframe" allow="microphone; camera; autoplay"></iframe>
+              </div>
+            </div>
+            <div id="audit-container" class="hidden">
+              <div id="audit-toolbar">
+                <input id="audit-search" type="text" placeholder="Search logs…" />
+                <select id="audit-filter-source"><option value="">All Sources</option><option value="boot">boot</option><option value="user">user</option><option value="agent">agent</option><option value="system">system</option><option value="policy">policy</option></select>
+                <select id="audit-filter-level"><option value="">All Levels</option><option value="info">info</option><option value="warn">warn</option><option value="error">error</option></select>
+                <select id="audit-filter-event"><option value="">All Events</option><option value="process.spawn">process.spawn</option><option value="process.exit">process.exit</option><option value="file.read">file.read</option><option value="file.write">file.write</option><option value="io.stdout">io.stdout</option><option value="io.stdin">io.stdin</option><option value="env.configure">env.configure</option><option value="server.ready">server.ready</option><option value="status.change">status.change</option><option value="policy.deny">policy.deny</option><option value="policy.load">policy.load</option><option value="boot.mount">boot.mount</option><option value="net.request">net.request</option><option value="net.response">net.response</option><option value="git.clone">git.clone</option><option value="git.push">git.push</option></select>
+                <input id="audit-date-from" type="datetime-local" title="From" />
+                <input id="audit-date-to" type="datetime-local" title="To" />
+                <button id="btn-audit-download" class="btn-icon" title="Download Logs"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button>
+              </div>
+              <div id="audit-log-list"></div>
+            </div>
+            <div id="policy-container" class="hidden">
+              <div class="policy-editor-wrap">
+                <p class="panel-hint">Define what agents can and cannot do. YAML format.</p>
+                <textarea id="policy-yaml-editor" spellcheck="false"></textarea>
+                <div class="policy-actions">
+                  <button id="btn-apply-policy" class="btn-primary">Apply Policy</button>
+                  <button id="btn-reset-policy" class="btn-secondary">Reset to Default</button>
+                </div>
+                <div id="policy-message" class="message"></div>
+              </div>
+            </div>
+            <div id="cloud-browser-container" class="hidden">
+              <div id="cloud-browser-toolbar">
+                <button id="cloud-browser-reload" class="preview-nav-btn" title="Reload">&#8635;</button>
+                <input id="cloud-browser-url" type="text" placeholder="Enter URL to browse…" />
+                <button id="cloud-browser-go" class="btn-primary">Go</button>
+                <span id="cloud-browser-status"></span>
+              </div>
+              <div id="cloud-browser-viewport">
+                <div id="cloud-browser-loading">Starting cloud browser…</div>
+                <iframe id="cloud-browser-iframe" credentialless allow="clipboard-read; clipboard-write"></iframe>
+              </div>
+            </div>
+          </div>
+          <div class="resize-handle resize-v" id="resize-editor-terminal"></div>
+          <div id="terminal-panel">
+            <div id="terminal-container"></div>
+          </div>
+        </div>
+
+        <div class="resize-handle resize-h" id="resize-sidebar"></div>
+
+        <!-- Toggleable config/agent sidebar -->
+        <aside id="sidebar" class="sidebar-hidden">
+          <!-- Config Panel -->
+          <section id="config-panel" class="panel">
+            <h3>Generic API Key</h3>
+
+            <label for="provider-select">Provider</label>
+            <select id="provider-select">
+              <option value="anthropic">Anthropic</option>
+              <option value="openai">OpenAI</option>
+              <option value="google">Google (Gemini)</option>
+            </select>
+
+            <label for="model-select">Model</label>
+            <select id="model-select"></select>
+
+            <div class="env-section">
+              <label>Environment Variables</label>
+              <div id="env-rows"></div>
+              <button id="btn-add-env" class="btn-secondary">+ Add Variable</button>
+            </div>
+
+            <button id="btn-save-config" class="btn-primary">Save &amp; Connect</button>
+            <div id="config-message" class="message"></div>
+          </section>
+
+        </aside>
+      </div>
+      <div id="bottom-bar"><img src="/logo.png" alt="" width="14" height="14" style="vertical-align:middle" /> <span class="bottom-bar-text">ClawLess</span> <span class="bottom-bar-sep">|</span> <span class="bottom-bar-desc">A ClawContainer — serverless AI agent runtime in your browser</span></div>
+    </div>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>