@dyyz1993/create-agent 1.9.0

package/templates/chat/src/mainview/stores/use-notification-store.ts

@@ -0,0 +1,82 @@
+import { create } from "zustand";
+
+export type NotificationLevel = "info" | "warning" | "error";
+
+export interface AppNotification {
+  id: string;
+  message: string;
+  level: NotificationLevel;
+  timestamp: number;
+  sessionId?: string;
+  read: boolean;
+}
+
+interface NotificationState {
+  notifications: AppNotification[];
+  panelOpen: boolean;
+
+  push: (n: Omit<AppNotification, "id" | "timestamp" | "read">) => void;
+  markRead: (id: string) => void;
+  markAllRead: () => void;
+  dismiss: (id: string) => void;
+  clearAll: () => void;
+  togglePanel: () => void;
+  setPanelOpen: (open: boolean) => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set) => ({
+  notifications: [],
+  panelOpen: false,
+
+  push(n) {
+    const entry: AppNotification = {
+      ...n,
+      id: `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      timestamp: Date.now(),
+      read: false,
+    };
+    set((s) => ({
+      notifications: [entry, ...s.notifications],
+    }));
+
+    if (n.level === "info") {
+      setTimeout(() => {
+        set((s) => ({
+          notifications: s.notifications.filter((x) => x.id !== entry.id),
+        }));
+      }, 5000);
+    }
+  },
+
+  markRead(id) {
+    set((s) => ({
+      notifications: s.notifications.map((n) =>
+        n.id === id ? { ...n, read: true } : n,
+      ),
+    }));
+  },
+
+  markAllRead() {
+    set((s) => ({
+      notifications: s.notifications.map((n) => ({ ...n, read: true })),
+    }));
+  },
+
+  dismiss(id) {
+    set((s) => ({
+      notifications: s.notifications.filter((n) => n.id !== id),
+    }));
+  },
+
+  clearAll() {
+    set({ notifications: [] });
+  },
+
+  togglePanel() {
+    set((s) => ({ panelOpen: !s.panelOpen }));
+  },
+
+  setPanelOpen(open) {
+    set({ panelOpen: open });
+  },
+}));

package/templates/chat/src/mainview/stores/use-sidebar-store.ts

@@ -0,0 +1,98 @@
+import { create } from "zustand";
+
+export type SidebarPanelId = never;
+export type Breakpoint = "mobile" | "tablet" | "desktop";
+
+const PINNED_KEY = "sidebar-pinned";
+const WIDTH_KEY = "sidebar-width";
+export const SIDEBAR_MIN_WIDTH = 180;
+export const SIDEBAR_MAX_WIDTH = 480;
+const DEFAULT_WIDTH = 240;
+
+function getBreakpoint(width: number): Breakpoint {
+  if (width < 768) return "mobile";
+  if (width < 1024) return "tablet";
+  return "desktop";
+}
+
+interface SidebarState {
+  activePanel: SidebarPanelId | null;
+  isPinned: boolean;
+  drawerOpen: boolean;
+  sidebarWidth: number;
+  breakpoint: Breakpoint;
+  togglePanel: (id: SidebarPanelId) => void;
+  setActivePanel: (id: SidebarPanelId | null) => void;
+  setPinned: (pinned: boolean) => void;
+  setDrawerOpen: (open: boolean) => void;
+  setSidebarWidth: (width: number) => void;
+  _setBreakpoint: (bp: Breakpoint) => void;
+}
+
+function readPinned(): boolean {
+  try {
+    const stored = localStorage.getItem(PINNED_KEY);
+    if (stored !== null) return stored !== "false";
+    return window.innerWidth >= 1024;
+  } catch {
+    return true;
+  }
+}
+
+function readWidth(): number {
+  try {
+    const v = Number(localStorage.getItem(WIDTH_KEY));
+    if (Number.isNaN(v) || v < SIDEBAR_MIN_WIDTH || v > SIDEBAR_MAX_WIDTH) return DEFAULT_WIDTH;
+    return v;
+  } catch {
+    return DEFAULT_WIDTH;
+  }
+}
+
+const initialWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+
+export const useSidebarStore = create<SidebarState>((set, get) => ({
+  activePanel: null,
+  isPinned: readPinned(),
+  drawerOpen: false,
+  sidebarWidth: readWidth(),
+  breakpoint: getBreakpoint(initialWidth),
+
+  togglePanel: (id) => {
+    const { activePanel, isPinned } = get();
+    if (activePanel === id) {
+      set({ activePanel: null, drawerOpen: false });
+    } else {
+      set({ activePanel: id, drawerOpen: !isPinned });
+    }
+  },
+
+  setActivePanel: (id) => set({ activePanel: id }),
+
+  setPinned: (pinned) => {
+    try {
+      localStorage.setItem(PINNED_KEY, String(pinned));
+    } catch { /* ignore */ }
+    set({ isPinned: pinned, drawerOpen: false });
+  },
+
+  setDrawerOpen: (open) => {
+    if (!open) {
+      const { isPinned } = get();
+      if (!isPinned) set({ drawerOpen: false, activePanel: null });
+      else set({ drawerOpen: false });
+    } else {
+      set({ drawerOpen: true });
+    }
+  },
+
+  setSidebarWidth: (width) => {
+    const clamped = Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, width));
+    try {
+      localStorage.setItem(WIDTH_KEY, String(clamped));
+    } catch { /* ignore */ }
+    set({ sidebarWidth: clamped });
+  },
+
+  _setBreakpoint: (bp) => set({ breakpoint: bp }),
+}));

package/templates/chat/src/mainview/stores/use-theme-store.ts

@@ -0,0 +1,46 @@
+import { create } from "zustand";
+
+export type Theme = "light" | "dark";
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  const stored = localStorage.getItem("theme");
+  if (stored === "light" || stored === "dark") return stored;
+  return "dark";
+}
+
+function applyTheme(theme: Theme): void {
+  if (typeof document === "undefined") return;
+  if (theme === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+  localStorage.setItem("theme", theme);
+}
+
+export const useThemeStore = create<ThemeState>((set) => {
+  const initial = getInitialTheme();
+  applyTheme(initial);
+
+  return {
+    theme: initial,
+    setTheme: (theme) => {
+      applyTheme(theme);
+      set({ theme });
+    },
+    toggleTheme: () => {
+      set((state) => {
+        const next = state.theme === "dark" ? "light" : "dark";
+        applyTheme(next);
+        return { theme: next };
+      });
+    },
+  };
+});

package/templates/chat/src/mainview/types/index.ts

@@ -0,0 +1,8 @@
+export type DemoMethod = "system.ping" | "system.hello" | "system.echo" | "chat.send";
+
+export type ChatMessage = {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: number;
+};

package/templates/chat/src/mainview/utils/constants.ts

@@ -0,0 +1 @@
+export const MAX_PREVIEW_SIZE = 500 * 1024; // 500KB

package/templates/chat/src/server-config.ts

@@ -0,0 +1,42 @@
+/**
+ * Web server configuration — single source of truth.
+ * Values are read from environment variables with sensible defaults.
+ */
+
+export function parseEnvInt(
+  key: string,
+  value: string | undefined,
+  defaultValue: number,
+  min: number,
+  max: number,
+): number {
+  if (value === undefined || value === "") return defaultValue;
+  const parsed = parseInt(value, 10);
+  if (isNaN(parsed) || parsed < min || parsed > max) {
+    console.warn(
+      `[config] Invalid ${key}: "${value}", using default: ${defaultValue}`,
+    );
+    return defaultValue;
+  }
+  return parsed;
+}
+
+export const config = {
+  port: parseEnvInt("PORT", process.env.PORT, 3100, 1024, 65535),
+  authToken: process.env.AUTH_TOKEN || "pi-agent-template-token",
+  maxUploadSize: parseEnvInt(
+    "MAX_UPLOAD_SIZE",
+    process.env.MAX_UPLOAD_SIZE,
+    50 * 1024 * 1024,
+    0,
+    1024 * 1024 * 1024,
+  ),
+  logDir: process.env.LOG_DIR || "logs",
+  corsOrigin: process.env.CORS_ORIGIN || "http://localhost:5173",
+} as const;
+
+if (process.env.NODE_ENV === "production" && !process.env.AUTH_TOKEN) {
+  console.warn(
+    "[security] WARNING: Using default AUTH_TOKEN in production. Set AUTH_TOKEN environment variable.",
+  );
+}

package/templates/chat/src/server.ts

@@ -0,0 +1,89 @@
+/**
+ * Web server entry point — HTTP file endpoints + WebSocket RPC gateway.
+ * Port auto-negotiation: tries config.port first, increments on EADDRINUSE.
+ * Writes actual port to .server-port for dev orchestration.
+ */
+
+import { createServer } from "http";
+import { writeFileSync, unlinkSync, existsSync } from "fs";
+import { join, resolve, basename } from "path";
+import { config } from "./server-config";
+import { createHttpHandler } from "./gateway/http-routes";
+import { createWsHandler } from "./gateway/ws-handler";
+import { createLogger, configureLogDir } from "./shared/lib/logger";
+import { registerPort, unregisterPort, formatRegistryForOutput } from "./shared/lib/port-registry";
+import { discoverMethodNames } from "./shared/register-all-handlers";
+
+configureLogDir(config.logDir);
+const log = createLogger("server");
+
+const PORT_FILE = join(import.meta.dir, "..", ".server-port");
+const PROJECT_ROOT = resolve(import.meta.dir, "..");
+const PROJECT_NAME = basename(PROJECT_ROOT);
+
+function cleanupPortFile() {
+  try { if (existsSync(PORT_FILE)) unlinkSync(PORT_FILE); } catch {}
+  unregisterPort(PROJECT_ROOT);
+}
+
+function writePortFile(port: number) {
+  writeFileSync(PORT_FILE, String(port), "utf-8");
+}
+
+process.on("exit", cleanupPortFile);
+process.on("SIGINT", () => { cleanupPortFile(); process.exit(0); });
+process.on("SIGTERM", () => { cleanupPortFile(); process.exit(0); });
+
+const httpServer = createServer();
+const wss = createWsHandler(httpServer, { config });
+
+httpServer.on("request", createHttpHandler({
+  config,
+  getWebSocketClientCount: () => wss.clients.size,
+}));
+
+function checkPort(port: number): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const testServer = createServer();
+    testServer.once("error", (err: NodeJS.ErrnoException) => {
+      testServer.close();
+      reject(err);
+    });
+    testServer.once("listening", () => {
+      testServer.close();
+      resolve(port);
+    });
+    testServer.listen(port);
+  });
+}
+
+async function findAvailablePort(startPort: number, maxRetries: number = 10): Promise<number> {
+  for (let port = startPort; port < startPort + maxRetries; port++) {
+    try {
+      await checkPort(port);
+      return port;
+    } catch {
+      log.info(`Port ${port} in use, trying ${port + 1}...`);
+    }
+  }
+  throw new Error(`No available port found after ${maxRetries} retries`);
+}
+
+async function start() {
+  const port = await findAvailablePort(config.port);
+  httpServer.listen(port, () => {
+    writePortFile(port);
+    registerPort(PROJECT_ROOT, port, PROJECT_NAME);
+    log.info(`HTTP + WebSocket server running on http://localhost:${port}`);
+    log.info(`WebSocket: ws://localhost:${port}/ws (auth required)`);
+    log.info(`Available RPC methods: ${discoverMethodNames().join(", ")}`);
+    log.info("File endpoints: GET /file/{path}, GET /info/{path}");
+    // eslint-disable-next-line no-console
+    console.log("\n" + formatRegistryForOutput() + "\n");
+  });
+}
+
+start().catch((err) => {
+  log.error("Server failed to start", { error: err.message });
+  process.exit(1);
+});

package/templates/chat/src/shared/__tests__/chat-handler.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { generateReply } from "../handlers/chat";
+
+describe("generateReply", () => {
+  it("should respond to greetings", () => {
+    const reply = generateReply("hello");
+    expect(reply).toMatch(/hey|hello|hi/i);
+  });
+
+  it("should respond to hi", () => {
+    const reply = generateReply("hi there");
+    expect(reply).toBeTruthy();
+  });
+
+  it("should respond to time queries", () => {
+    const reply = generateReply("what time is it?");
+    expect(reply).toContain("**");
+  });
+
+  it("should respond to date queries", () => {
+    const reply = generateReply("what is the date today?");
+    expect(reply).toContain("**");
+  });
+
+  it("should calculate simple math", () => {
+    const reply = generateReply("12 * 8");
+    expect(reply).toContain("96");
+  });
+
+  it("should calculate addition", () => {
+    const reply = generateReply("10 + 5");
+    expect(reply).toContain("15");
+  });
+
+  it("should calculate subtraction", () => {
+    const reply = generateReply("100 - 30");
+    expect(reply).toContain("70");
+  });
+
+  it("should handle division by zero", () => {
+    const reply = generateReply("10 / 0");
+    expect(reply).toMatch(/zero|couldn/i);
+  });
+
+  it("should respond to file-related queries", () => {
+    const reply = generateReply("show me files");
+    expect(reply).toMatch(/file|explorer/i);
+  });
+
+  it("should respond to git queries", () => {
+    const reply = generateReply("git status");
+    expect(reply).toMatch(/git/i);
+  });
+
+  it("should respond to help", () => {
+    const reply = generateReply("help");
+    expect(reply).toMatch(/time|math|help/i);
+  });
+
+  it("should return a default reply for unknown input", () => {
+    const reply = generateReply("xyzzy random unknown thing");
+    expect(reply).toBeTruthy();
+    expect(typeof reply).toBe("string");
+    expect(reply.length).toBeGreaterThan(0);
+  });
+
+  it("should respond to math with natural language", () => {
+    const reply = generateReply("what is 100 / 4");
+    expect(reply).toContain("25");
+  });
+});

package/templates/chat/src/shared/__tests__/system-handler.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { RPCServer } from "@dyyz1993/rpc-core";
+
+type RegisteredHandler = (params: unknown) => Promise<unknown>;
+
+function createMockServer() {
+  const handlers = new Map<string, RegisteredHandler>();
+  const server = {
+    register: vi.fn((method: string, handler: RegisteredHandler) => {
+      handlers.set(method, handler);
+    }),
+    emitEvent: vi.fn(),
+  } as unknown as RPCServer;
+  return { server, handlers };
+}
+
+describe("system handler", () => {
+  let handlers: Map<string, RegisteredHandler>;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    const { server, handlers: h } = createMockServer();
+    handlers = h;
+    const { register } = await import("../handlers/system");
+    register(server, { platform: "web" });
+  });
+
+  it("should register system.ping", () => {
+    expect(handlers.has("system.ping")).toBe(true);
+  });
+
+  it("should register system.hello", () => {
+    expect(handlers.has("system.hello")).toBe(true);
+  });
+
+  it("should register system.echo", () => {
+    expect(handlers.has("system.echo")).toBe(true);
+  });
+
+  it("system.ping returns pong with timestamp and platform", async () => {
+    const result = await handlers.get("system.ping")!({});
+    expect(result).toEqual(
+      expect.objectContaining({
+        pong: true,
+        platform: "web",
+      }),
+    );
+    expect((result as { timestamp: number }).timestamp).toBeTypeOf("number");
+  });
+
+  it("system.hello returns greeting with default name", async () => {
+    const result = await handlers.get("system.hello")!({});
+    expect(result).toEqual(
+      expect.objectContaining({ message: "Hello World!" }),
+    );
+  });
+
+  it("system.hello returns greeting with custom name", async () => {
+    const result = await handlers.get("system.hello")!({ name: "Alice" });
+    expect(result).toEqual(
+      expect.objectContaining({ message: "Hello Alice!" }),
+    );
+  });
+
+  it("system.echo returns params as-is", async () => {
+    const params = { foo: "bar", num: 42 };
+    const result = await handlers.get("system.echo")!(params);
+    expect(result).toEqual(params);
+  });
+});

package/templates/chat/src/shared/handlers/chat.ts

@@ -0,0 +1,186 @@
+import type { RPCServer } from "@dyyz1993/rpc-core";
+import type { MethodParams, MethodResult } from "@dyyz1993/rpc-core";
+import type { RPCMethods, HandlerOptions } from "../rpc-schema";
+import { readFile, writeFile, mkdir } from "fs/promises";
+import { existsSync } from "fs";
+import { join, dirname } from "path";
+import { homedir } from "os";
+import { createLogger } from "../lib/logger";
+
+const log = createLogger("chat");
+
+function getStoragePath(): string {
+  const dir = join(homedir(), ".pi-agent");
+  return join(dir, "chat-history.json");
+}
+
+type ChatMessage = { id: string; role: "user" | "assistant"; content: string; timestamp: number };
+
+async function loadMessages(): Promise<ChatMessage[]> {
+  const filePath = getStoragePath();
+  try {
+    if (!existsSync(filePath)) {
+      log.info(`No history file at ${filePath}`);
+      return [];
+    }
+    const raw = await readFile(filePath, "utf-8");
+    const msgs = JSON.parse(raw) as ChatMessage[];
+    log.info(`Loaded ${msgs.length} messages from ${filePath}`);
+    return msgs;
+  } catch (err) {
+    log.error("Failed to load history", { error: err });
+    return [];
+  }
+}
+
+async function saveMessages(messages: ChatMessage[]): Promise<void> {
+  const filePath = getStoragePath();
+  const dir = dirname(filePath);
+  try {
+    if (!existsSync(dir)) {
+      await mkdir(dir, { recursive: true });
+    }
+    await writeFile(filePath, JSON.stringify(messages, null, 2), "utf-8");
+    log.info(`Saved ${messages.length} messages to ${filePath}`);
+  } catch (err) {
+    log.error("Failed to save history", { error: err });
+  }
+}
+
+type RegisterFn = <K extends keyof RPCMethods & string>(
+  method: K,
+  handler: (params: MethodParams<RPCMethods, K>) => Promise<MethodResult<RPCMethods, K>>,
+) => void;
+
+export function generateReply(input: string): string {
+  const lower = input.toLowerCase().trim();
+
+  if (/^(hi|hello|hey|howdy|hola|yo|sup)\b/i.test(lower)) {
+    const greetings = [
+      "Hey there! How can I help you today?",
+      "Hello! Great to see you. What would you like to know?",
+      "Hi! I'm your desktop assistant. Ask me anything!",
+    ];
+    return greetings[Math.floor(Math.random() * greetings.length)];
+  }
+
+  if (/what('?s| is) the (time|date|day)|current (time|date)|what time|today'?s date/i.test(lower)) {
+    const now = new Date();
+    const date = now.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+    const time = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+    return `It's currently **${time}** on **${date}**.`;
+  }
+
+  const mathMatch = lower.match(
+    /(?:what(?:'s| is)\s+)?(\d+(?:\.\d+)?)\s*([+\-*/x×÷^])\s*(\d+(?:\.\d+)?)/,
+  );
+  if (mathMatch) {
+    const a = parseFloat(mathMatch[1]);
+    const op = mathMatch[2];
+    const b = parseFloat(mathMatch[3]);
+    let result: number;
+    switch (op) {
+      case "+": result = a + b; break;
+      case "-": result = a - b; break;
+      case "*": case "x": case "×": result = a * b; break;
+      case "/": case "÷": result = b !== 0 ? a / b : NaN; break;
+      case "^": result = Math.pow(a, b); break;
+      default: result = NaN;
+    }
+    if (isNaN(result)) {
+      return "Hmm, I couldn't calculate that. Did you try dividing by zero?";
+    }
+    const niceResult = Number.isInteger(result) ? result.toString() : result.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
+    return `That would be **${niceResult}**! Need help with anything else?`;
+  }
+
+  if (/file|files|browse|explorer|directory|folder|open file/i.test(lower)) {
+    return (
+      "I can help you explore files! While I can't directly browse files in this demo, " +
+      "here's what you can do:\n\n" +
+      "- Use the **Explorer** panel to browse your project files\n" +
+      "- Click any file to preview its contents\n" +
+      "- Use the search feature to find specific files\n\n" +
+      "Try asking about **time** or **math** for a live demo!"
+    );
+  }
+
+  if (/git|commit|branch|status|diff|push|pull/i.test(lower)) {
+    return (
+      "Git is a powerful version control system! Here's what I know:\n\n" +
+      "- **git status** - Check your current changes\n" +
+      "- **git branch** - See or switch branches\n" +
+      "- **git log** - View commit history\n" +
+      "- **git diff** - See what changed\n\n" +
+      "Check out the **Source Control** panel for a visual Git interface! " +
+      "Or try asking me about **time** or **math**."
+    );
+  }
+
+  if (/^(help|commands|what can you|what do you|capabilities|features)/i.test(lower)) {
+    return (
+      "Here's what I can help with:\n\n" +
+      "- **Greetings** - Say hi and I'll say hi back!\n" +
+      "- **Time & Date** - Ask \"what time is it?\" or \"what's today's date?\"\n" +
+      "- **Math** - Give me an expression like \"12 * 8\" or \"what is 100 / 4\"\n" +
+      "- **Files** - Ask about file browsing and the explorer\n" +
+      "- **Git** - Ask about version control commands\n" +
+      "- **Help** - Show this message anytime!\n\n" +
+      "This is a demo assistant - try different things to see what sticks!"
+    );
+  }
+
+  const defaults = [
+    "That's an interesting question! I'm a demo assistant, so my knowledge is limited - but try asking about **time**, **math**, **files**, or **git**.",
+    "I wish I could help with that! For now I can answer questions about time, math, files, and git. Type **help** to see what I can do.",
+    "Hmm, I'm not sure about that one. But I *can* do math, tell you the time, and talk about files and git. Give it a shot!",
+  ];
+  return defaults[Math.floor(Math.random() * defaults.length)];
+}
+
+export function register(server: RPCServer, _options: HandlerOptions): void {
+  const r: RegisterFn = (method, handler) => {
+    server.register(method, handler as (params: unknown) => Promise<unknown>);
+  };
+
+  r("chat.list", async (params) => {
+    const all = await loadMessages();
+    const limit = params.limit ?? 50;
+    const messages = all.slice(-limit);
+    return {
+      messages,
+      hasMore: all.length > limit,
+    };
+  });
+
+  r("chat.send", async (params) => {
+    const all = await loadMessages();
+
+    const userMsg: ChatMessage = {
+      id: `msg-${Date.now()}-user`,
+      role: "user",
+      content: params.content,
+      timestamp: Date.now(),
+    };
+    all.push(userMsg);
+
+    server.emitEvent("chat.message", userMsg, { role: userMsg.role });
+
+    const thinkDelay = 200 + Math.floor(Math.random() * 300);
+    await new Promise((r) => setTimeout(r, thinkDelay));
+
+    const reply: ChatMessage = {
+      id: `msg-${Date.now()}-assistant`,
+      role: "assistant",
+      content: generateReply(params.content),
+      timestamp: Date.now(),
+    };
+    all.push(reply);
+
+    server.emitEvent("chat.message", reply, { role: reply.role });
+
+    await saveMessages(all);
+
+    return { ok: true };
+  });
+}