@preapexis/piexis 0.2.4 → 0.2.7

package/README.md

@@ -8,7 +8,7 @@ PieXis is a Pi package with interactive questions, coding skills, prompts, and t
 pi install npm:@preapexis/piexis
 ```
 
-Restart Pi or run `/reload` after installation. The package loads AskQuestion, agent profiles/subagents, the custom header/footer, automatic recommended-tool setup, prompts, skills, and the theme.
+Restart Pi or run `/reload` after installation. The package loads AskQuestion, agent profiles/subagents, the custom header/footer, automatic recommended-tool setup, prompts, skills, and themes.
 
 ## Resources
 
@@ -19,7 +19,7 @@ Restart Pi or run `/reload` after installation. The package loads AskQuestion, a
 - **Skills** cover implementation, debugging, review, design, refactoring, validation, and document workflows. Bundled **caveman** adds concise chat style; **ponytail** guides the smallest complete coding change. Only their core instructions are included, not upstream hooks or companion skills. Source revisions and licenses live beside each skill.
 - **Prompts** include `/init`, `/commit`, and `/summary`. `/init` adds workflow guidance to `AGENTS.md`: caveman for responses, grilling for clarification questions, and ponytail for building. These are agent instructions, not runtime enforcement.
 
-- **Theme** provides the bundled orange palette.
+- **Themes** include warm **orange** and **midnight**, a dark slate palette with cyan, violet, and mint accents. Run `/reload`, then choose a palette in `/settings` → **Theme**.
 
 Caveman and ponytail ship with this package; no separate installation is needed. Their upstream standalone installation commands are:
 
@@ -110,6 +110,26 @@ PieXis no longer provides permission modes, tool approvals, classifier review, p
 
 Existing `piexis` settings, legacy configuration files, session records, and retained task worktrees are not deleted automatically. Old classifier, execution-model, and background-model settings are no longer read. Remove obsolete configuration manually if desired, preserving unrelated settings and any work you need. Remove explicit references to deleted extensions from your Pi resource settings or launch arguments.
 
+## PIXIS WebUI (preview)
+
+PIXIS 2.0 adds a local WebUI without replacing the Pi TUI. Each browser session observes a backend-owned, long-lived Pi RPC process. After installing or updating Piexis, start Pi inside the project and run:
+
+```text
+/webui
+```
+
+Pi displays a local URL containing a per-launch access token; open that URL in a browser. The TUI remains usable. The package also exposes a PowerShell-friendly command for starting outside Pi:
+
+```powershell
+piexis-web --workspace C:\path\to\your-project
+```
+
+The server uses the requested workspace and starts Pi with documented `--mode rpc`. Pi must be installed, authenticated, and available as `pi` (or set `PIXIS_PI_BIN`). Use `.env.example` as the configuration reference. `npm run dev` remains available only for developing Piexis itself and serves the Vite development client on port 5173.
+
+The current preview supports genuine streamed assistant text, tool lifecycle cards, abort, Pi extension dialog forwarding, multiple observed backend sessions, and read-only Git status. It binds the agent server to `127.0.0.1`, requires a per-launch token and exact browser origin, validates WebSocket messages, confines file paths before Git diffs, and never sends secrets to the browser. Localhost alone is not treated as authentication.
+
+Current limitations: session list is limited to sessions created in the WebUI process (it does not yet enumerate historical Pi session files); file explorer, Monaco editor/diff rendering, and terminal panel are planned; Git controls are read-only. The existing Pi TUI remains unchanged and can run separately.
+
 ## Select package resources
 
 Use Pi's native resource filtering with `pi config` (or `pi config --local` for a trusted project), or narrow resources in settings:

package/apps/server/src/index.ts

@@ -0,0 +1,97 @@
+import { createHash, randomBytes, timingSafeEqual } from "node:crypto";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import Fastify from "fastify";
+import websocket from "@fastify/websocket";
+import fastifyStatic from "@fastify/static";
+import { z } from "zod";
+import { SessionManager, type ManagedSession } from "./session-manager.ts";
+import { gitDiff, gitStatus } from "./workspace.ts";
+import type { ClientCommand, ServerMessage } from "../../../packages/shared/src/index.ts";
+
+const port = Number(process.env.PIXIS_PORT || 4317);
+const workspace = path.resolve(process.env.PIXIS_WORKSPACE || process.cwd());
+const token = process.env.PIXIS_TOKEN || randomBytes(32).toString("base64url");
+const allowedOrigin = process.env.PIXIS_ORIGIN || `http://127.0.0.1:${port}`;
+const webRoot = path.resolve(process.env.PIXIS_WEB_ROOT || path.join(path.dirname(fileURLToPath(import.meta.url)), "../../web/dist"));
+const clients = new Set<{ send(data: string): void; readyState: number }>();
+const app = Fastify({ logger: { level: process.env.PIXIS_LOG_LEVEL || "warn" } });
+
+const commandSchema = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("list_sessions") }),
+  z.object({ type: z.literal("subscribe"), sessionId: z.string().uuid() }),
+  z.object({ type: z.literal("create_session") }),
+  z.object({ type: z.literal("prompt"), sessionId: z.string().uuid(), message: z.string().trim().min(1).max(100_000) }),
+  z.object({ type: z.literal("abort"), sessionId: z.string().uuid() }),
+  z.object({ type: z.literal("extension_ui_response"), sessionId: z.string().uuid(), id: z.string().min(1), value: z.string().optional(), confirmed: z.boolean().optional(), cancelled: z.boolean().optional() }),
+  z.object({ type: z.literal("git_status"), sessionId: z.string().uuid() }),
+  z.object({ type: z.literal("git_diff"), sessionId: z.string().uuid(), path: z.string().min(1).max(4096) })
+]);
+
+function secureEqual(a: string, b: string) {
+  const left = createHash("sha256").update(a).digest();
+  const right = createHash("sha256").update(b).digest();
+  return timingSafeEqual(left, right);
+}
+function send(client: { send(data: string): void; readyState: number }, message: ServerMessage) {
+  if (client.readyState === 1) client.send(JSON.stringify(message));
+}
+function broadcast(message: ServerMessage) { for (const client of clients) send(client, message); }
+
+const manager = new SessionManager(workspace, (session, type, data) => {
+  broadcast(type === "pi_event" ? { type, sessionId: session.id, event: data } : { type, sessionId: session.id, request: data });
+  broadcast({ type: "session", session: manager.summary(session) });
+});
+
+await app.register(websocket);
+await app.register(fastifyStatic, { root: webRoot, wildcard: false });
+app.get("/health", async () => ({ ok: true }));
+app.get("/ws", { websocket: true }, (socket, request) => {
+  const origin = request.headers.origin;
+  const suppliedToken = (request.query as { token?: string }).token;
+  if (origin !== allowedOrigin || !suppliedToken || !secureEqual(suppliedToken, token)) {
+    socket.close(1008, "Unauthorized PIXIS client");
+    return;
+  }
+  clients.add(socket);
+  socket.on("close", () => clients.delete(socket));
+  socket.on("message", async (raw: Buffer) => {
+    try {
+      const command = commandSchema.parse(JSON.parse(raw.toString("utf8"))) as ClientCommand;
+      await handle(socket, command);
+    } catch (error) {
+      send(socket, { type: "error", message: error instanceof Error ? error.message : "Invalid request" });
+    }
+  });
+});
+
+async function handle(client: { send(data: string): void; readyState: number }, command: ClientCommand) {
+  if (command.type === "list_sessions") {
+    const first = manager.sessions.values().next().value as ManagedSession | undefined;
+    if (first) return snapshot(client, first);
+    return send(client, { type: "snapshot", sessions: [], sessionId: "", state: {}, messages: [] });
+  }
+  if (command.type === "create_session") {
+    const session = await manager.create();
+    broadcast({ type: "session", session: manager.summary(session) });
+    return snapshot(client, session);
+  }
+  const session = manager.get(command.sessionId);
+  if (command.type === "subscribe") return snapshot(client, session);
+  if (command.type === "prompt") await manager.prompt(session.id, command.message);
+  if (command.type === "abort") await manager.abort(session.id);
+  if (command.type === "extension_ui_response") session.client.send({ type: "extension_ui_response", id: command.id, value: command.value, confirmed: command.confirmed, cancelled: command.cancelled });
+  if (command.type === "git_status") send(client, { type: "workspace", sessionId: session.id, action: "git_status", data: await gitStatus(workspace) });
+  if (command.type === "git_diff") send(client, { type: "workspace", sessionId: session.id, action: "git_diff", data: await gitDiff(workspace, command.path) });
+  broadcast({ type: "session", session: manager.summary(session) });
+}
+function snapshot(client: { send(data: string): void; readyState: number }, session: ManagedSession) {
+  send(client, { type: "snapshot", sessions: [...manager.sessions.values()].map((item) => manager.summary(item)), sessionId: session.id, state: session.state, messages: session.messages });
+}
+
+const shutdown = async () => { manager.dispose(); await app.close(); };
+process.once("SIGINT", shutdown); process.once("SIGTERM", shutdown);
+await app.listen({ port, host: "127.0.0.1" });
+console.log(`PIXIS server listening on http://127.0.0.1:${port}`);
+console.log(`Open http://127.0.0.1:${port}/#token=${token}`);
+if (!process.env.PIXIS_TOKEN) console.log(`PIXIS token (set PIXIS_TOKEN to persist it): ${token}`);

package/apps/server/src/session-manager.ts

@@ -0,0 +1,95 @@
+import { randomUUID } from "node:crypto";
+import { PiRpcClient } from "../../../packages/pi-integration/src/rpc-client.ts";
+import type { SessionStatus, SessionSummary } from "../../../packages/shared/src/index.ts";
+
+export interface ManagedSession {
+  id: string;
+  name: string;
+  status: SessionStatus;
+  client: PiRpcClient;
+  state: unknown;
+  messages: unknown[];
+  sessionFile?: string;
+  model?: string;
+}
+
+export class SessionManager {
+  readonly sessions = new Map<string, ManagedSession>();
+  constructor(private readonly cwd: string, private readonly emit: (session: ManagedSession, type: "pi_event" | "extension_ui", data: unknown) => void) {}
+
+  async create(): Promise<ManagedSession> {
+    const id = randomUUID();
+    const client = new PiRpcClient(this.cwd);
+    const session: ManagedSession = { id, name: "New session", status: "starting", client, state: {}, messages: [] };
+    this.sessions.set(id, session);
+    client.on("record", (record) => {
+      if (record.type === "extension_ui_request") {
+        this.emit(session, "extension_ui", record);
+        return;
+      }
+      this.#applyEvent(session, record);
+      this.emit(session, "pi_event", record);
+    });
+    client.on("exit", (error) => {
+      session.status = "failed";
+      this.emit(session, "pi_event", { type: "runtime_error", message: error.message });
+    });
+    try {
+      const response = await client.command({ type: "get_state" });
+      if (!response.success) throw new Error(response.error || "Pi rejected get_state");
+      session.state = response.data ?? {};
+      const data = response.data as { sessionId?: string; sessionFile?: string; sessionName?: string; model?: { id?: string } };
+      session.sessionFile = data.sessionFile;
+      session.name = data.sessionName || "New session";
+      session.model = data.model?.id;
+      const messages = await client.command({ type: "get_messages" });
+      if (messages.success) session.messages = ((messages.data as { messages?: unknown[] })?.messages ?? []);
+      session.status = "ready";
+      return session;
+    } catch (error) {
+      session.status = "failed";
+      throw error;
+    }
+  }
+
+  async prompt(id: string, message: string): Promise<void> {
+    const session = this.get(id);
+    if (session.status === "running" || session.status === "cancelling") throw new Error("This session already has an active operation. Stop it before sending another prompt.");
+    session.status = "running";
+    const response = await session.client.command({ type: "prompt", message });
+    if (!response.success) {
+      session.status = "ready";
+      throw new Error(response.error || "Pi rejected prompt");
+    }
+  }
+
+  async abort(id: string): Promise<void> {
+    const session = this.get(id);
+    if (session.status !== "running") return;
+    session.status = "cancelling";
+    const response = await session.client.command({ type: "abort" });
+    if (!response.success) throw new Error(response.error || "Pi failed to stop");
+  }
+
+  get(id: string): ManagedSession {
+    const session = this.sessions.get(id);
+    if (!session) throw new Error("Unknown session");
+    return session;
+  }
+
+  summary(session: ManagedSession): SessionSummary {
+    return { id: session.id, name: session.name, status: session.status, model: session.model, sessionFile: session.sessionFile };
+  }
+
+  dispose(): void { for (const session of this.sessions.values()) session.client.dispose(); }
+
+  #applyEvent(session: ManagedSession, event: Record<string, unknown>): void {
+    if (event.type === "agent_start") session.status = "running";
+    if (event.type === "agent_settled") session.status = event.aborted === true ? "ready" : "ready";
+    if (event.type === "message_end") {
+      const message = event.message as { role?: string } | undefined;
+      if (message?.role === "assistant" || message?.role === "user") session.messages.push(event.message);
+    }
+    if (event.type === "session_info_changed" && typeof event.name === "string") session.name = event.name;
+  }
+}

package/apps/server/src/workspace.ts

@@ -0,0 +1,39 @@
+import { execFile } from "node:child_process";
+import { realpath } from "node:fs/promises";
+import { promisify } from "node:util";
+import path from "node:path";
+
+const execFileAsync = promisify(execFile);
+
+export async function workspacePath(root: string, candidate: string): Promise<string> {
+  if (!candidate || path.isAbsolute(candidate) || candidate.includes("\0")) throw new Error("Invalid workspace path");
+  const base = await realpath(root);
+  const resolved = path.resolve(base, candidate);
+  if (resolved !== base && !resolved.startsWith(`${base}${path.sep}`)) throw new Error("Path escapes workspace");
+  const actual = await realpath(resolved);
+  if (actual !== base && !actual.startsWith(`${base}${path.sep}`)) throw new Error("Path escapes workspace");
+  return actual;
+}
+
+export async function git(root: string, args: string[]): Promise<string> {
+  try {
+    const { stdout } = await execFileAsync("git", ["-C", root, ...args], { windowsHide: true, maxBuffer: 2 * 1024 * 1024 });
+    return stdout;
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : "Git command failed";
+    throw new Error(message.includes("not a git repository") ? "This workspace is not a Git repository." : message);
+  }
+}
+
+export async function gitStatus(root: string) {
+  const [branch, porcelain] = await Promise.all([git(root, ["branch", "--show-current"]), git(root, ["status", "--porcelain=v1"])]);
+  return {
+    branch: branch.trim() || "detached HEAD",
+    files: porcelain.split("\n").filter(Boolean).map((line) => ({ status: line.slice(0, 2).trim() || "?", path: line.slice(3) }))
+  };
+}
+
+export async function gitDiff(root: string, relativePath: string) {
+  await workspacePath(root, relativePath);
+  return git(root, ["diff", "--no-ext-diff", "--", relativePath]);
+}

package/{tsconfig.json → apps/server/tsconfig.json}

@@ -4,11 +4,10 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "noEmit": true,
     "strict": true,
     "skipLibCheck": true,
-    "types": ["node"]
+    "types": ["node"],
+    "noEmit": true
   },
-  "include": ["extensions/**/*.ts", "lib/**/*.ts", "extensions/claude-tui.tss"]
+  "include": ["src/**/*.ts", "../../packages/**/*.ts"]
 }