@raingor/pi-web-switch 0.2.0

package/pi-package/index.ts

@@ -0,0 +1,100 @@
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { Box, Text } from "@earendil-works/pi-tui";
+import { Type } from "typebox";
+import { execSync, spawn } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join, resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PI_SWITCH_DIR = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+
+let serverProcess: ReturnType<typeof spawn> | null = null;
+
+function getPackageManager(): "npm" | "pnpm" | "yarn" {
+  if (existsSync(join(PI_SWITCH_DIR, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(PI_SWITCH_DIR, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+
+export default function (api: ExtensionAPI, ctx: ExtensionContext) {
+  // Register a command to start/stop the web UI
+  api.registerCommand({
+    name: "pi-switch",
+    description: "Start or stop the pi-web-switch dashboard",
+    params: Type.Object({
+      action: Type.Enum({ start: "start", stop: "stop", status: "status" }),
+      port: Type.Optional(Type.Number({ default: 5173 })),
+    }),
+    execute: async (params) => {
+      const { action, port = 5173 } = params;
+
+      if (action === "status") {
+        if (serverProcess && !serverProcess.killed) {
+          return ctx.say(
+            <Box borderStyle="round" borderColor="green" paddingLeft={1} paddingRight={1}>
+              <Text>pi-web-switch is running at http://localhost:{port}</Text>
+            </Box>
+          );
+        } else {
+          serverProcess = null;
+          return ctx.say(
+            <Box borderStyle="round" borderColor="yellow" paddingLeft={1} paddingRight={1}>
+              <Text>pi-web-switch is not running.</Text>
+              <Text>Use `/pi-web-switch start` to launch the dashboard.</Text>
+            </Box>
+          );
+        }
+      }
+
+      if (action === "stop") {
+        if (serverProcess && !serverProcess.killed) {
+          serverProcess.kill();
+          serverProcess = null;
+          return ctx.say(
+            <Box borderStyle="round" borderColor="green" paddingLeft={1} paddingRight={1}>
+              <Text>pi-web-switch stopped.</Text>
+            </Box>
+          );
+        }
+        return ctx.say(
+          <Box borderStyle="round" borderColor="yellow" paddingLeft={1} paddingRight={1}>
+            <Text>pi-web-switch is not running.</Text>
+          </Box>
+        );
+      }
+
+      if (action === "start") {
+        if (serverProcess && !serverProcess.killed) {
+          return ctx.say(
+            <Box borderStyle="round" borderColor="yellow" paddingLeft={1} paddingRight={1}>
+              <Text>pi-web-switch is already running at http://localhost:{port}</Text>
+            </Box>
+          );
+        }
+
+        const pm = getPackageManager();
+        const cmd = pm === "npm" ? "npx" : pm;
+
+        serverProcess = spawn(cmd, ["vite", "--host", "--port", String(port)], {
+          cwd: PI_SWITCH_DIR,
+          stdio: "ignore",
+          detached: true,
+        });
+
+        serverProcess.unref();
+
+        // Wait a moment then check
+        await new Promise((r) => setTimeout(r, 2000));
+
+        return ctx.say(
+          <Box borderStyle="round" borderColor="green" paddingLeft={1} paddingRight={1}>
+            <Text>pi-web-switch started!</Text>
+            <Text>Dashboard: http://localhost:{port}</Text>
+            <Text>Use `/pi-web-switch stop` to stop the server.</Text>
+          </Box>
+        );
+      }
+    },
+  });
+}

package/pi-package/skills/pi-web-switch/SKILL.md

@@ -0,0 +1,60 @@
+# pi-web-switch
+
+A web-based dashboard for managing your pi coding agent's providers, models, token usage, sessions, and settings.
+
+## Features
+
+- **Dashboard**: Real-time token usage, cost tracking, cache hit rate, request logs
+- **Models**: Browse, enable/disable, add/edit/delete models
+- **Providers**: Manage built-in and custom providers, API keys
+- **Sessions**: Browse past sessions grouped by project, delete old sessions
+- **Memory**: View pi-hermes-memory content (MEMORY.md, USER.md, failures.md)
+- **Settings**: Defaults, theme (Light/Dark/System), packages, import/export
+- **Multi-language**: English, 简体中文, 繁體中文, 日本語
+
+## Commands
+
+### Start the dashboard
+
+```
+/pi-web-switch start
+```
+
+Opens the web UI at `http://localhost:5173`. The dashboard reads data directly from `~/.pi/agent/` — no setup required.
+
+### Stop the dashboard
+
+```
+/pi-web-switch stop
+```
+
+### Check status
+
+```
+/pi-web-switch status
+```
+
+## Requirements
+
+- pi coding agent installed and configured (`~/.pi/agent/` exists)
+- Node.js 18+
+
+## Usage
+
+1. Run `/pi-web-switch start` in your pi session
+2. Open `http://localhost:5173` in your browser
+3. The dashboard automatically loads your pi configuration
+
+## Data Source
+
+All data is read from `~/.pi/agent/`:
+
+| File | Description |
+|------|-------------|
+| `settings.json` | Provider, model, theme, packages config |
+| `auth.json` | API keys per provider |
+| `models.json` | Custom provider definitions |
+| `sessions/*.jsonl` | Session history with token usage |
+| `pi-hermes-memory/*.md` | Memory content |
+
+Changes made in the UI are written back to these files in real time.

package/public/pi.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#2563eb"/>
+  <text x="16" y="22" text-anchor="middle" font-size="18" font-weight="bold" fill="white" font-family="system-ui">π</text>
+</svg>