zerg-ztc 0.1.0 → 0.1.2

package/dist/web/mirror_server.js

@@ -0,0 +1,177 @@
+import { createServer } from 'http';
+import { readFile, mkdir, writeFile } from 'fs/promises';
+import { resolve, join, basename } from 'path';
+import { homedir } from 'os';
+import { randomUUID } from 'crypto';
+import { computeLayout } from '../ui/core/index.js';
+export class MirrorServer {
+    clients = new Map();
+    port;
+    server = createServer(this.handleRequest.bind(this));
+    lastTree = null;
+    inputBus;
+    constructor(port, inputBus) {
+        this.port = port;
+        this.inputBus = inputBus;
+    }
+    start() {
+        this.server.listen(this.port);
+    }
+    stop() {
+        this.server.close();
+    }
+    publish(tree) {
+        this.lastTree = tree;
+        for (const client of this.clients.values()) {
+            this.sendLayout(client, tree);
+        }
+    }
+    async handleRequest(req, res) {
+        const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`);
+        if (url.pathname === '/') {
+            const htmlPath = new URL('./mirror.html', import.meta.url);
+            const html = await readFile(htmlPath, 'utf-8').catch(async () => {
+                const fallback = resolve(process.cwd(), 'src/web/mirror.html');
+                return readFile(fallback, 'utf-8');
+            });
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(html);
+            return;
+        }
+        if (url.pathname === '/mirror-favicon.svg' || url.pathname === '/favicon.svg' || url.pathname === '/favicon.ico') {
+            const iconPath = new URL('./mirror-favicon.svg', import.meta.url);
+            const icon = await readFile(iconPath, 'utf-8').catch(async () => {
+                const fallback = resolve(process.cwd(), 'src/web/mirror-favicon.svg');
+                return readFile(fallback, 'utf-8');
+            });
+            const contentType = url.pathname === '/favicon.ico' ? 'image/x-icon' : 'image/svg+xml';
+            res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
+            res.end(icon);
+            return;
+        }
+        if (url.pathname === '/events') {
+            const id = url.searchParams.get('id') || `client_${Date.now()}`;
+            res.writeHead(200, {
+                'Content-Type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                Connection: 'keep-alive'
+            });
+            res.write('\n');
+            const client = {
+                id,
+                res,
+                cols: 80,
+                rows: 24
+            };
+            this.clients.set(id, client);
+            if (this.lastTree) {
+                this.sendLayout(client, this.lastTree);
+            }
+            req.on('close', () => {
+                this.clients.delete(id);
+            });
+            return;
+        }
+        if (url.pathname === '/size' && req.method === 'POST') {
+            const id = url.searchParams.get('id');
+            if (!id || !this.clients.has(id)) {
+                res.writeHead(400);
+                res.end();
+                return;
+            }
+            const body = await new Promise(resolve => {
+                let data = '';
+                req.on('data', chunk => { data += chunk; });
+                req.on('end', () => resolve(data));
+            });
+            try {
+                const parsed = JSON.parse(body);
+                const client = this.clients.get(id);
+                if (client) {
+                    client.cols = parsed.cols;
+                    client.rows = parsed.rows;
+                    if (this.lastTree) {
+                        this.sendLayout(client, this.lastTree);
+                    }
+                }
+            }
+            catch {
+                // Ignore invalid payloads
+            }
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        if (url.pathname === '/input' && req.method === 'POST') {
+            const body = await new Promise(resolve => {
+                let data = '';
+                req.on('data', chunk => { data += chunk; });
+                req.on('end', () => resolve(data));
+            });
+            try {
+                const parsed = JSON.parse(body);
+                this.inputBus?.emit(parsed);
+            }
+            catch {
+                // Ignore invalid payloads
+            }
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        if (url.pathname === '/upload' && req.method === 'POST') {
+            const buffer = await new Promise(resolve => {
+                const chunks = [];
+                req.on('data', chunk => { chunks.push(Buffer.from(chunk)); });
+                req.on('end', () => resolve(Buffer.concat(chunks)));
+            });
+            const headerName = req.headers['x-filename'];
+            const rawName = typeof headerName === 'string' && headerName.trim().length > 0 ? headerName : 'upload.bin';
+            const safeName = basename(rawName).replace(/[^a-zA-Z0-9._-]/g, '_');
+            const dir = join(homedir(), '.ztc', 'uploads');
+            await mkdir(dir, { recursive: true });
+            const filePath = join(dir, `${Date.now()}-${randomUUID().slice(0, 8)}-${safeName}`);
+            await writeFile(filePath, buffer);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ path: filePath }));
+            return;
+        }
+        if (url.pathname === '/file' && req.method === 'GET') {
+            const rawPath = url.searchParams.get('path');
+            if (!rawPath) {
+                res.writeHead(400);
+                res.end();
+                return;
+            }
+            const allowedRoots = [
+                join(homedir(), '.ztc', 'uploads'),
+                join(homedir(), '.ztc', 'clipboard')
+            ];
+            const resolvedPath = resolve(rawPath);
+            const allowed = allowedRoots.some(root => resolvedPath.startsWith(resolve(root)));
+            if (!allowed) {
+                res.writeHead(403);
+                res.end();
+                return;
+            }
+            try {
+                const data = await readFile(resolvedPath);
+                res.writeHead(200, { 'Content-Type': 'application/octet-stream' });
+                res.end(data);
+            }
+            catch {
+                res.writeHead(404);
+                res.end();
+            }
+            return;
+        }
+        res.writeHead(404);
+        res.end();
+    }
+    sendLayout(client, tree) {
+        const frame = computeLayout(tree, client.cols, client.rows);
+        const payload = JSON.stringify(frame);
+        client.res.write(`data: ${payload}\n\n`);
+    }
+}
+//# sourceMappingURL=mirror_server.js.map

package/dist/web/mirror_server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mirror_server.js","sourceRoot":"","sources":["../../src/web/mirror_server.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zerg-ztc",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Zerg Terminal Client - CLI agent for continual AI systems",
   "type": "module",
   "bin": {

package/src/App.tsx

@@ -73,6 +73,24 @@ export const App: React.FC = () => {
   const [agent, setAgent] = useState<Agent | null>(createAgent);
   const [expandToolOutputs, setExpandToolOutputs] = useState(false);
   const [skills, setSkills] = useState<Skill[]>([]);
+
+  React.useEffect(() => {
+    let active = true;
+    configStore.load(true).then(() => {
+      if (!active) return;
+      setMessages(prev => {
+        if (
+          prev.length === 1 &&
+          prev[0]?.role === 'system' &&
+          prev[0].content.startsWith('Welcome to ZTC')
+        ) {
+          return [getWelcomeMessage()];
+        }
+        return prev;
+      });
+    }).catch(() => {});
+    return () => { active = false; };
+  }, []);
   const [inputSnapshot, setInputSnapshot] = useState<InputState>({
     segments: [],
     cursor: { index: 0, offset: 0 },

package/src/cli.tsx

@@ -4,6 +4,7 @@ import { render } from 'ink';
 import { resolve } from 'path';
 import { statSync } from 'fs';
 import { App } from './App.js';
+import { configStore } from './config.js';
 
 // --- CLI Entry Point ---
 
@@ -69,12 +70,18 @@ if (cwdIndex >= 0) {
   }
 }
 
-// Render the app
-// Note: FullScreen component handles alternate screen buffer
-const { waitUntilExit } = render(<App />);
+async function main(): Promise<void> {
+  await configStore.load(true);
 
-// Handle clean exit
-waitUntilExit().then(() => {
-  console.log('Goodbye from ZTC! 👋');
-  process.exit(0);
-});
+  // Render the app
+  // Note: FullScreen component handles alternate screen buffer
+  const { waitUntilExit } = render(<App />);
+
+  // Handle clean exit
+  waitUntilExit().then(() => {
+    console.log('Goodbye from ZTC! 👋');
+    process.exit(0);
+  });
+}
+
+void main();

package/src/components/InputArea.tsx

@@ -213,7 +213,7 @@ export const InputArea: React.FC<InputAreaProps> = ({
     if (disabled) {
       lines.push(prompt + chalk.gray(placeholder));
     } else if (overlayState.segments.length === 0) {
-      lines.push(prompt + chalk.inverse(' ') + chalk.gray(placeholder));
+      lines.push(prompt + chalk.inverse('|') + chalk.gray(placeholder));
     } else {
       wrapped.lines.forEach((lineTokens, index) => {
         const prefix = index === 0 ? prompt : '  ';
@@ -297,6 +297,10 @@ export const InputArea: React.FC<InputAreaProps> = ({
 
   const handleInput = useCallback((input: string, key: InputKey) => {
     if (disabled) return;
+    const backspaceFallback = input === '\b' || input === '\x7f';
+    if (backspaceFallback && !key.backspace && !key.delete) {
+      key.backspace = true;
+    }
 
     if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
       void handleClipboardImagePaste('state');
@@ -382,6 +386,10 @@ export const InputArea: React.FC<InputAreaProps> = ({
 
   const handleOverlayInput = useCallback((input: string, key: InputKey) => {
     if (disabled) return;
+    const backspaceFallback = input === '\b' || input === '\x7f';
+    if (backspaceFallback && !key.backspace && !key.delete) {
+      key.backspace = true;
+    }
     const current = overlayStateRef.current;
 
     if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {

package/src/ui/views/input_area.ts

@@ -185,7 +185,7 @@ export function buildInputAreaView({
       box([
         text(promptPrefix, { color: promptColor, bold: true }),
         box([
-          text(' ', { inverse: true }),
+          text('|', { inverse: true }),
           text(placeholder, { color: 'gray', dimColor: true })
         ], { flexDirection: 'row' })
       ], { flexDirection: 'row' })

package/src/ui/web/frame_render.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { LayoutNode, LayoutFrame, computeLayout } from '../core/index.js';
+
+type BadgeInfo = {
+  type: 'paste' | 'file' | 'image';
+  preview: string;
+  full: string;
+  path?: string;
+};
+
+interface FrameRendererProps {
+  node: LayoutNode;
+  cols: number;
+  rows: number;
+  cellWidth: number;
+  cellHeight: number;
+  debugBorders?: boolean;
+  onBadgeHover?: (badge: BadgeInfo, x: number, y: number) => void;
+  onBadgeLeave?: () => void;
+  onBadgeClick?: (badge: BadgeInfo, x: number, y: number) => void;
+  onBadgeDblClick?: (badge: BadgeInfo, x: number, y: number) => void;
+}
+
+function colorMap(color?: string): string {
+  const map: Record<string, string> = {
+    gray: '#9a9a9a',
+    magenta: '#c084fc',
+    yellow: '#facc15',
+    green: '#34d399',
+    red: '#f87171',
+    cyan: '#67e8f9',
+    blue: '#60a5fa',
+    white: '#e5e7eb'
+  };
+  return map[color || ''] || color || '#e6e6e6';
+}
+
+function renderFrame(
+  frame: LayoutFrame,
+  keyPrefix: string,
+  cellWidth: number,
+  cellHeight: number,
+  debugBorders: boolean,
+  onBadgeHover?: (badge: BadgeInfo, x: number, y: number) => void,
+  onBadgeLeave?: () => void,
+  onBadgeClick?: (badge: BadgeInfo, x: number, y: number) => void,
+  onBadgeDblClick?: (badge: BadgeInfo, x: number, y: number) => void,
+  offsetX = 0,
+  offsetY = 0,
+  out: React.ReactElement[] = []
+): React.ReactElement[] {
+  const x = offsetX + frame.x;
+  const y = offsetY + frame.y;
+  const keyBase = `${keyPrefix}-${x}-${y}`;
+
+  if (frame.node.type === 'text') {
+    const style = frame.node.style || {};
+    if (debugBorders) {
+      out.push(
+        <div
+          key={`${keyBase}-debug`}
+          style={{
+            position: 'absolute',
+            left: x * cellWidth,
+            top: y * cellHeight,
+            width: frame.width * cellWidth,
+            height: frame.height * cellHeight,
+            borderStyle: 'dashed',
+            borderWidth: 1,
+            borderColor: '#3a3a3a',
+            pointerEvents: 'none'
+          }}
+        />
+      );
+    }
+    const badge = style.badge;
+    out.push(
+      <span
+        key={`${keyBase}-text`}
+        style={{
+          position: 'absolute',
+          left: x * cellWidth,
+          top: y * cellHeight,
+          color: style.inverse ? '#111' : colorMap(style.color),
+          fontWeight: style.bold ? 600 : undefined,
+          opacity: style.dimColor ? 0.6 : undefined,
+          background: style.inverse ? '#e6e6e6' : undefined,
+          colorScheme: 'only light',
+          cursor: badge ? 'pointer' : undefined
+        }}
+        title={badge?.preview || undefined}
+        onMouseEnter={badge ? (evt) => onBadgeHover?.(badge, evt.clientX, evt.clientY) : undefined}
+        onMouseLeave={badge ? () => onBadgeLeave?.() : undefined}
+        onClick={badge ? (evt) => onBadgeClick?.(badge, evt.clientX, evt.clientY) : undefined}
+        onDoubleClick={badge ? (evt) => onBadgeDblClick?.(badge, evt.clientX, evt.clientY) : undefined}
+      >
+        {frame.node.text}
+      </span>
+    );
+    return out;
+  }
+
+  if (frame.node.type === 'box' && (frame.node.style?.borderStyle || debugBorders)) {
+    out.push(
+      <div
+        key={`${keyBase}-border`}
+        style={{
+          position: 'absolute',
+          left: x * cellWidth,
+          top: y * cellHeight,
+          width: frame.width * cellWidth,
+          height: frame.height * cellHeight,
+          borderStyle: frame.node.style?.borderStyle ? 'solid' : 'dashed',
+          borderWidth: 1,
+          borderColor: colorMap(frame.node.style?.borderColor || '#3a3a3a'),
+          pointerEvents: 'none'
+        }}
+      />
+    );
+  }
+
+  frame.children.forEach((child, idx) => {
+    renderFrame(child, `${keyBase}-${idx}`, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick, x, y, out);
+  });
+
+  return out;
+}
+
+export const WebFrameRenderer: React.FC<FrameRendererProps> = ({
+  node,
+  cols,
+  rows,
+  cellWidth,
+  cellHeight,
+  debugBorders = false,
+  onBadgeHover,
+  onBadgeLeave,
+  onBadgeClick,
+  onBadgeDblClick
+}) => {
+  const frame = useMemo(() => computeLayout(node, cols, rows), [node, cols, rows]);
+  const elements = useMemo(
+    () => renderFrame(frame, 'root', cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick),
+    [frame, cellWidth, cellHeight, debugBorders, onBadgeHover, onBadgeLeave, onBadgeClick, onBadgeDblClick]
+  );
+
+  return <>{elements}</>;
+};

package/src/ui/web/index.tsx

@@ -0,0 +1 @@
+export { WebNode } from './render.js';

package/src/ui/web/render.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { LayoutNode, TextNode } from '../core/types.js';
+import { toCssStyle } from '../core/style.js';
+
+const monoStyle: React.CSSProperties = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  fontSize: 14,
+  lineHeight: '16px',
+  whiteSpace: 'pre'
+};
+
+function renderText(node: TextNode): React.ReactElement {
+  const style: React.CSSProperties = {
+    ...monoStyle,
+    color: node.style?.color,
+    fontWeight: node.style?.bold ? 600 : undefined,
+    opacity: node.style?.dimColor ? 0.6 : undefined,
+    background: node.style?.inverse ? '#111' : undefined,
+    colorScheme: 'only light'
+  };
+  return <span style={style}>{node.text}</span>;
+}
+
+export function WebNode({ node }: { node: LayoutNode }): React.ReactElement {
+  if (node.type === 'text') {
+    return renderText(node);
+  }
+
+  const style = {
+    ...monoStyle,
+    ...toCssStyle(node.style)
+  } as React.CSSProperties;
+
+  return (
+    <div style={style}>
+      {node.children.map((child, index) => (
+        <WebNode key={`${child.type}-${index}`} node={child} />
+      ))}
+    </div>
+  );
+}