pi-feats 0.1.1

package/extensions/pi-console-webui/components/toast.tsx

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, useContext, useState } from "react";
+import { CheckCircle2, CircleAlert, X } from "lucide-react";
+
+type ToastType = "success" | "error" | "info";
+type ToastItem = { id: number; message: string; type: ToastType };
+const ToastContext = createContext<{ toast: (message: string, type?: ToastType) => void }>({ toast: () => {} });
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [items, setItems] = useState<ToastItem[]>([]);
+  const toast = (message: string, type: ToastType = "success") => {
+    const id = Date.now() + Math.random();
+    setItems((current) => [...current, { id, message, type }]);
+    window.setTimeout(() => setItems((current) => current.filter((item) => item.id !== id)), 4500);
+  };
+  return <ToastContext.Provider value={{ toast }}>{children}<div className="fixed right-5 top-5 z-[100] flex w-full max-w-sm flex-col gap-2" aria-live="polite">{items.map((item) => <div key={item.id} className={`flex items-center gap-3 rounded-xl border px-4 py-3 text-sm shadow-lg ${item.type === "error" ? "border-red-200 bg-red-50 text-red-800" : item.type === "info" ? "border-blue-200 bg-blue-50 text-blue-800" : "border-emerald-200 bg-emerald-50 text-emerald-800"}`}><span>{item.type === "error" ? <CircleAlert size={18}/> : <CheckCircle2 size={18}/>}</span><p className="flex-1">{item.message}</p><button className="rounded p-1 hover:bg-black/5" title="Dismiss notification" onClick={() => setItems((current) => current.filter((entry) => entry.id !== item.id))}><X size={15}/></button></div>)}</div></ToastContext.Provider>;
+}
+export const useToast = () => useContext(ToastContext);

package/extensions/pi-console-webui/components/ui/button.tsx

@@ -0,0 +1,4 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+export const Button = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(({ className, ...props }, ref) => <button ref={ref} className={cn("rounded-md bg-[#406889] px-3 py-2 text-sm font-medium text-white hover:bg-[#365a78] disabled:opacity-50", className)} {...props} />);
+Button.displayName = "Button";

package/extensions/pi-console-webui/components/ui/card.tsx

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return <section className={cn("rounded-xl border border-zinc-200 bg-white p-5 shadow-sm", className)} {...props} />; }
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) { return <h2 className={cn("text-lg font-semibold text-zinc-900", className)} {...props} />; }

package/extensions/pi-console-webui/components/ui/input.tsx

@@ -0,0 +1,4 @@
+import { type InputHTMLAttributes, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(({ className, ...props }, ref) => <input ref={ref} className={cn("w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm outline-none focus:border-blue-500", className)} {...props} />);
+Input.displayName = "Input";

package/extensions/pi-console-webui/components/ui/switch.tsx

@@ -0,0 +1,6 @@
+"use client";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+export const Switch = forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>>(({ className, ...props }, ref) => <SwitchPrimitive.Root ref={ref} className={cn("h-6 w-11 rounded-full bg-zinc-300 data-[state=checked]:bg-[#406889]", className)} {...props}><SwitchPrimitive.Thumb className="block size-5 translate-x-0.5 rounded-full bg-white shadow transition-transform data-[state=checked]:translate-x-5" /></SwitchPrimitive.Root>);
+Switch.displayName = "Switch";

package/extensions/pi-console-webui/components/ui/tabs.tsx

@@ -0,0 +1,11 @@
+"use client";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { cn } from "@/lib/utils";
+export const Tabs = TabsPrimitive.Root;
+export const TabsList = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(({ className, ...props }, ref) => <TabsPrimitive.List ref={ref} className={cn("flex flex-wrap gap-1 rounded-lg bg-zinc-100 p-1", className)} {...props} />);
+TabsList.displayName = "TabsList";
+export const TabsTrigger = forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>>(({ className, ...props }, ref) => <TabsPrimitive.Trigger ref={ref} className={cn("rounded-md px-3 py-2 text-sm font-medium text-zinc-600 data-[state=active]:bg-white data-[state=active]:text-zinc-950 data-[state=active]:shadow-sm", className)} {...props} />);
+TabsTrigger.displayName = "TabsTrigger";
+export const TabsContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof TabsPrimitive.Content>>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn("mt-5 outline-none", className)} {...props} />);
+TabsContent.displayName = "TabsContent";

package/extensions/pi-console-webui/components.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "zinc", "cssVariables": false },
+  "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib" }
+}

package/extensions/pi-console-webui/index.ts

@@ -0,0 +1,33 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { randomBytes } from "node:crypto";
+import { existsSync, openSync } from "node:fs";
+import { mkdir, readFile, unlink, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { spawn } from "node:child_process";
+
+type ConsoleSettings = { host?: string; port?: number; username?: string; password?: string; secret?: string };
+type LegacySettings = Record<string, unknown> & { console?: ConsoleSettings };
+type State = { pid: number; host: string; port: number; startedAt: string };
+const root = __dirname;
+// Package dependencies are installed at the package root. Keep the nested
+// location as a fallback for direct development use.
+const dependencyRoot = () => existsSync(join(root, "node_modules", "next")) ? root : join(root, "..", "..");
+const nextBinary = () => join(dependencyRoot(), "node_modules", "next", "dist", "bin", "next");
+const agentDir = () => process.env.PI_CODING_AGENT_DIR ?? join(homedir(), ".pi", "agent");
+const configPath = () => join(agentDir(), "pi-console.webui.json");
+const legacySettingsPath = () => join(agentDir(), "settings.json");
+const statePath = () => join(agentDir(), "pi-console-webui.state.json");
+const logPath = () => join(agentDir(), "pi-console-webui.log");
+async function readJson<T>(path: string): Promise<T | undefined> { try { return JSON.parse(await readFile(path, "utf8")) as T; } catch (error) { if ((error as NodeJS.ErrnoException).code === "ENOENT") return undefined; throw error; } }
+async function writeJson(path: string, value: unknown) { await mkdir(agentDir(), { recursive: true }); await writeFile(path, `${JSON.stringify(value, null, 2)}\n`); }
+async function settings(): Promise<ConsoleSettings> { const current = await readJson<ConsoleSettings>(configPath()); if (current) return current; const legacy = await readJson<LegacySettings>(legacySettingsPath()); const console = legacy?.console ?? {}; await writeJson(configPath(), console); if (legacy?.console) { const { console: _console, ...remaining } = legacy; await writeJson(legacySettingsPath(), remaining); } return console; }
+async function config(): Promise<Required<ConsoleSettings>> { const current = await settings(); const host = typeof current.host === "string" && current.host ? current.host : "127.0.0.1"; const port = Number.isInteger(current.port) && current.port! > 0 && current.port! <= 65535 ? current.port : 3030; const username = typeof current.username === "string" && current.username ? current.username : "admin"; const password = typeof current.password === "string" && current.password ? current.password : "change-me"; const secret = typeof current.secret === "string" && current.secret ? current.secret : randomBytes(32).toString("base64url"); const resolved = { ...current, host, port, username, password, secret }; await writeJson(configPath(), resolved); return resolved; }
+async function state(): Promise<State | undefined> { return readJson<State>(statePath()); }
+function alive(pid: number): boolean { try { process.kill(pid, 0); return true; } catch { return false; } }
+const buildMarker = () => join(root, ".next", "BUILD_ID");
+async function build(next: string) { const log = openSync(logPath(), "a"); const child = spawn(process.execPath, [next, "build"], { cwd: root, stdio: ["ignore", log, log] }); const code = await new Promise<number>((resolveBuild) => child.once("exit", (value) => resolveBuild(value ?? 1))); if (code !== 0) throw new Error(`Next build failed; see ${logPath()}`); }
+async function start(rebuild = false) { const cfg = await config(), current = await state(), next = nextBinary(); if (current && alive(current.pid)) return console.log(`Pi Console is already running at http://${current.host}:${current.port}`); if (!existsSync(next)) throw new Error(`Dependencies are missing. Reinstall the Pi package or run npm install in ${dependencyRoot()}.`); if (rebuild || !existsSync(buildMarker())) await build(next); const log = openSync(logPath(), "a"); const child = spawn(process.execPath, [next, "start", "--hostname", cfg.host, "--port", String(cfg.port)], { cwd: root, detached: true, stdio: ["ignore", log, log], env: process.env }); child.unref(); await writeJson(statePath(), { pid: child.pid!, host: cfg.host, port: cfg.port, startedAt: new Date().toISOString() }); console.log(`Pi Console started at http://${cfg.host}:${cfg.port}`); console.log(`Console credentials are configured in ${configPath()}.`); }
+async function stop() { const current = await state(); if (!current || !alive(current.pid)) { await unlink(statePath()).catch(() => {}); return console.log("Pi Console is not running."); } try { process.kill(-current.pid, "SIGTERM"); } catch { process.kill(current.pid, "SIGTERM"); } await unlink(statePath()).catch(() => {}); console.log("Pi Console stopped."); }
+async function status() { const current = await state(); console.log(current && alive(current.pid) ? `Pi Console: running at http://${current.host}:${current.port}` : "Pi Console: stopped"); }
+export default async function (_pi: ExtensionAPI) { const [command, action] = process.argv.slice(2); if (command !== "console") return; if (action === "start") await start(); else if (action === "stop") await stop(); else if (action === "restart") { await stop(); await start(); } else if (action === "rebuild") { await stop(); await start(true); } else if (action === "status") await status(); else { console.error("Usage: pi console start | stop | restart | rebuild | status"); process.exitCode = 1; } process.exit(); }

package/extensions/pi-console-webui/lib/admin-config.ts

@@ -0,0 +1,22 @@
+import { readFile, rename, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+export type AdminTarget = "api-server" | "pi-console-webui";
+// The API token must never reach the browser. Console credentials are intentionally editable in the administrative UI.
+const secrets: Record<AdminTarget, string[]> = { "api-server": ["apiToken"], "pi-console-webui": [] };
+const file = (target: AdminTarget) => join(process.env.PI_CODING_AGENT_DIR ?? join(homedir(), ".pi", "agent"), target === "api-server" ? "api-server.json" : "pi-console.webui.json");
+const valid = (target: string): target is AdminTarget => target === "api-server" || target === "pi-console-webui";
+export const isAdminTarget = valid;
+async function raw(target: AdminTarget): Promise<Record<string, unknown>> { return JSON.parse(await readFile(file(target), "utf8")) as Record<string, unknown>; }
+export async function readAdminConfig(target: AdminTarget) { const config = await raw(target); return Object.fromEntries(Object.entries(config).map(([key, value]) => [key, secrets[target].includes(key) ? "<redacted>" : value])); }
+export async function writeAdminConfig(target: AdminTarget, value: unknown) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) throw new Error("Configuration must be a JSON object.");
+  const current = await raw(target), next = { ...current, ...(value as Record<string, unknown>) };
+  for (const key of secrets[target]) if (next[key] === "<redacted>" || next[key] === undefined) next[key] = current[key];
+  if (typeof next.host !== "string" || !next.host) throw new Error("host must be a non-empty string.");
+  if (!Number.isInteger(next.port) || (next.port as number) < 1 || (next.port as number) > 65535) throw new Error("port must be an integer between 1 and 65535.");
+  const path = file(target), temporary = `${path}.tmp-${process.pid}`;
+  await writeFile(temporary, `${JSON.stringify(next, null, 2)}\n`, "utf8"); await rename(temporary, path);
+  return readAdminConfig(target);
+}

package/extensions/pi-console-webui/lib/auth.ts

@@ -0,0 +1,21 @@
+import { createHmac, timingSafeEqual } from "node:crypto";
+import { cookies } from "next/headers";
+import { getConfig } from "./config";
+
+const COOKIE = "pi_console_auth";
+const token = (secret: string) => createHmac("sha256", secret).update("pi-console").digest("base64url");
+export async function authenticated(): Promise<boolean> {
+  const config = await getConfig();
+  const value = (await cookies()).get(COOKIE)?.value;
+  if (!value) return false;
+  const expected = token(config.secret);
+  const a = Buffer.from(value), b = Buffer.from(expected);
+  return a.length === b.length && timingSafeEqual(a, b);
+}
+export async function loginValid(username: string, password: string): Promise<boolean> {
+  const config = await getConfig();
+  const a = Buffer.from(`${username}:${password}`), b = Buffer.from(`${config.username}:${config.password}`);
+  return a.length === b.length && timingSafeEqual(a, b);
+}
+export async function authToken(): Promise<string> { return token((await getConfig()).secret); }
+export { COOKIE };

package/extensions/pi-console-webui/lib/config.ts

@@ -0,0 +1,15 @@
+import { readFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+export type ConsoleConfig = { username: string; password: string; apiUrl: string; apiToken: string; secret: string };
+type ApiConfig = { host?: string; port?: number; apiToken?: string };
+type WebUiConfig = { username?: string; password?: string; secret?: string };
+async function readJson<T>(path: string): Promise<T> { try { return JSON.parse(await readFile(path, "utf8")) as T; } catch (error) { if ((error as NodeJS.ErrnoException).code === "ENOENT") return {} as T; throw error; } }
+export async function getConfig(): Promise<ConsoleConfig> {
+  const agentDir = process.env.PI_CODING_AGENT_DIR ?? join(homedir(), ".pi", "agent");
+  const [api, console] = await Promise.all([readJson<ApiConfig>(join(agentDir, "api-server.json")), readJson<WebUiConfig>(join(agentDir, "pi-console.webui.json"))]);
+  const host = api.host === "0.0.0.0" || !api.host ? "127.0.0.1" : api.host;
+  const apiUrl = process.env.PI_API_PROXY_TARGET || `http://${host}:${api.port ?? 8767}`;
+  return { username: console.username ?? "admin", password: console.password ?? "change-me", apiUrl, apiToken: api.apiToken ?? "", secret: console.secret ?? `${console.username ?? "admin"}:${console.password ?? "change-me"}` };
+}

package/extensions/pi-console-webui/lib/pi-api.ts

@@ -0,0 +1,9 @@
+import { getConfig } from "@/lib/config";
+
+export async function piGet<T>(path: string): Promise<T> {
+  const config = await getConfig();
+  if (!config.apiToken) throw new Error("Pi API token is not configured");
+  const response = await fetch(`${config.apiUrl}/api/${path}`, { headers: { authorization: `Bearer ${config.apiToken}` }, cache: "no-store" });
+  if (!response.ok) { const body = await response.json().catch(() => ({})); throw new Error(body.error?.message ?? body.error ?? "Pi API request failed"); }
+  return response.json() as Promise<T>;
+}

package/extensions/pi-console-webui/lib/utils.ts

@@ -0,0 +1,3 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

package/extensions/pi-console-webui/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/extensions/pi-console-webui/next.config.js

@@ -0,0 +1,5 @@
+const { join } = require("node:path");
+
+module.exports = {
+  outputFileTracingRoot: join(__dirname, "../.."),
+};

package/extensions/pi-console-webui/postcss.config.js

@@ -0,0 +1 @@
+module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } };

package/extensions/pi-console-webui/tailwind.config.ts

@@ -0,0 +1,2 @@
+import type { Config } from "tailwindcss";
+export default { content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"], theme: { extend: {} }, plugins: [] } satisfies Config;

package/extensions/pi-console-webui/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2022"
+    ],
+    "strict": true,
+    "noEmit": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowJs": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "index.ts"
+  ]
+}