Archived
Add pi web POC
This commit is contained in:
Federico Jaramillo Martinez
@@ -0,0 +1,5 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
.DS_Store
|
||||
*.log
|
||||
@@ -0,0 +1,46 @@
|
||||
# Pi Web POC
|
||||
|
||||
Small web wrapper around `@mariozechner/pi-coding-agent`.
|
||||
|
||||
## What it does
|
||||
|
||||
- Add/list projects.
|
||||
- Discover workspaces from `git worktree list --porcelain`.
|
||||
- For non-git projects, show the project folder as the only workspace.
|
||||
- List Pi sessions for a workspace using Pi's default session storage.
|
||||
- Start Pi sessions, chat over WebSocket events, and close active runtimes.
|
||||
|
||||
## State
|
||||
|
||||
This POC intentionally keeps state minimal:
|
||||
|
||||
- Projects: `~/.pi-web/projects.json`
|
||||
- Workspaces: discovered from git, not stored
|
||||
- Sessions/chat history: Pi default JSONL session storage
|
||||
- Active sessions/WebSockets: memory only
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the Vite URL, usually <http://localhost:5173>.
|
||||
|
||||
For a single-process/proxied deployment:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
PI_WEB_PORT=3000 npm start
|
||||
```
|
||||
|
||||
Then proxy Traefik to `http://127.0.0.1:3000`.
|
||||
|
||||
The server defaults to `127.0.0.1:3000`. Use `PI_WEB_HOST=0.0.0.0` only if you want to bind directly on all interfaces.
|
||||
|
||||
## Notes
|
||||
|
||||
- The backend uses your normal Pi auth/model settings from `~/.pi/agent`.
|
||||
- Slash commands that belong to Pi's interactive TUI, such as `/model`, are not implemented in this POC UI yet. Plain prompts and extension/prompt-template handling go through the SDK path.
|
||||
- `Close` currently only disposes the in-memory runtime. It does not hide or delete sessions.
|
||||
Generated
+5811
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "pi-web-poc",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "sh -c 'npm run dev:server & npm run dev:client & wait'",
|
||||
"dev:server": "tsx watch src/server/index.ts",
|
||||
"dev:client": "vite --host 0.0.0.0",
|
||||
"build": "tsc && vite build",
|
||||
"start": "tsx src/server/index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fastify/static": "^8.3.0",
|
||||
"@fastify/websocket": "^11.2.0",
|
||||
"@mariozechner/pi-coding-agent": "^0.73.0",
|
||||
"fastify": "^5.6.1",
|
||||
"lit": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/ws": "^8.18.1",
|
||||
"tsx": "^4.20.6",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pi Web POC</title>
|
||||
</head>
|
||||
<body>
|
||||
<pi-web-poc></pi-web-poc>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
export interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Workspace {
|
||||
id: string;
|
||||
projectId: string;
|
||||
path: string;
|
||||
label: string;
|
||||
branch?: string;
|
||||
isMain: boolean;
|
||||
isGitWorktree: boolean;
|
||||
}
|
||||
|
||||
export interface SessionInfo {
|
||||
id: string;
|
||||
path: string;
|
||||
cwd: string;
|
||||
name?: string;
|
||||
created: string;
|
||||
modified: string;
|
||||
messageCount: number;
|
||||
firstMessage: string;
|
||||
}
|
||||
|
||||
async function request<T>(url: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
...init,
|
||||
headers: { "content-type": "application/json", ...init?.headers },
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = await response.json().catch(() => ({}));
|
||||
throw new Error(body.error ?? response.statusText);
|
||||
}
|
||||
return response.json() as Promise<T>;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
projects: () => request<Project[]>("/api/projects"),
|
||||
addProject: (path: string, name?: string) => request<Project>("/api/projects", { method: "POST", body: JSON.stringify({ path, name }) }),
|
||||
workspaces: (projectId: string) => request<Workspace[]>(`/api/projects/${projectId}/workspaces`),
|
||||
sessions: (cwd: string) => request<SessionInfo[]>(`/api/sessions?cwd=${encodeURIComponent(cwd)}`),
|
||||
startSession: (cwd: string) => request<SessionInfo>("/api/sessions", { method: "POST", body: JSON.stringify({ cwd }) }),
|
||||
messages: (sessionId: string) => request<any[]>(`/api/sessions/${sessionId}/messages`),
|
||||
prompt: (sessionId: string, text: string) => request<{ accepted: true }>(`/api/sessions/${sessionId}/prompt`, { method: "POST", body: JSON.stringify({ text }) }),
|
||||
close: (sessionId: string) => request<{ closed: true }>(`/api/sessions/${sessionId}/close`, { method: "POST" }),
|
||||
};
|
||||
|
||||
export function sessionEvents(sessionId: string): WebSocket {
|
||||
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
|
||||
return new WebSocket(`${protocol}//${location.host}/api/sessions/${sessionId}/events`);
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
import { LitElement, css, html } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { api, sessionEvents, type Project, type SessionInfo, type Workspace } from "./api";
|
||||
|
||||
interface ChatLine {
|
||||
role: "user" | "assistant" | "tool" | "system";
|
||||
text: string;
|
||||
}
|
||||
|
||||
@customElement("pi-web-poc")
|
||||
class PiWebPoc extends LitElement {
|
||||
@state() private projects: Project[] = [];
|
||||
@state() private workspaces: Workspace[] = [];
|
||||
@state() private sessions: SessionInfo[] = [];
|
||||
@state() private messages: ChatLine[] = [];
|
||||
@state() private selectedProject?: Project;
|
||||
@state() private selectedWorkspace?: Workspace;
|
||||
@state() private selectedSession?: SessionInfo;
|
||||
@state() private error = "";
|
||||
@state() private draft = "";
|
||||
private socket?: WebSocket;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
void this.loadProjects();
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
this.socket?.close();
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
private async loadProjects() {
|
||||
this.error = "";
|
||||
try {
|
||||
this.projects = await api.projects();
|
||||
} catch (error) {
|
||||
this.error = String(error);
|
||||
}
|
||||
}
|
||||
|
||||
private async addProject() {
|
||||
const path = prompt("Project folder path");
|
||||
if (!path) return;
|
||||
try {
|
||||
const project = await api.addProject(path);
|
||||
this.projects = [...this.projects.filter((p) => p.id !== project.id), project];
|
||||
await this.selectProject(project);
|
||||
} catch (error) {
|
||||
this.error = String(error);
|
||||
}
|
||||
}
|
||||
|
||||
private async selectProject(project: Project) {
|
||||
this.selectedProject = project;
|
||||
this.selectedWorkspace = undefined;
|
||||
this.selectedSession = undefined;
|
||||
this.sessions = [];
|
||||
this.messages = [];
|
||||
try {
|
||||
this.workspaces = await api.workspaces(project.id);
|
||||
if (this.workspaces[0]) await this.selectWorkspace(this.workspaces[0]);
|
||||
} catch (error) {
|
||||
this.error = String(error);
|
||||
}
|
||||
}
|
||||
|
||||
private async selectWorkspace(workspace: Workspace) {
|
||||
this.selectedWorkspace = workspace;
|
||||
this.selectedSession = undefined;
|
||||
this.messages = [];
|
||||
try {
|
||||
this.sessions = await api.sessions(workspace.path);
|
||||
} catch (error) {
|
||||
this.error = String(error);
|
||||
}
|
||||
}
|
||||
|
||||
private async startSession() {
|
||||
if (!this.selectedWorkspace) return;
|
||||
try {
|
||||
const session = await api.startSession(this.selectedWorkspace.path);
|
||||
this.sessions = [session, ...this.sessions];
|
||||
await this.selectSession(session);
|
||||
} catch (error) {
|
||||
this.error = String(error);
|
||||
}
|
||||
}
|
||||
|
||||
private async selectSession(session: SessionInfo) {
|
||||
this.selectedSession = session;
|
||||
this.socket?.close();
|
||||
this.messages = normalizeMessages(await api.messages(session.id));
|
||||
this.socket = sessionEvents(session.id);
|
||||
this.socket.onmessage = (message) => this.applyEvent(JSON.parse(message.data));
|
||||
}
|
||||
|
||||
private applyEvent(event: any) {
|
||||
if (event.type === "assistant.delta") {
|
||||
const lines = [...this.messages];
|
||||
const last = lines.at(-1);
|
||||
if (last?.role === "assistant") last.text += event.text;
|
||||
else lines.push({ role: "assistant", text: event.text });
|
||||
this.messages = lines;
|
||||
} else if (event.type === "tool.start") {
|
||||
this.messages = [...this.messages, { role: "tool", text: `▶ ${event.toolName}` }];
|
||||
} else if (event.type === "tool.end") {
|
||||
this.messages = [...this.messages, { role: "tool", text: `${event.isError ? "✖" : "✓"} ${event.toolName}` }];
|
||||
} else if (event.type === "session.error") {
|
||||
this.messages = [...this.messages, { role: "system", text: event.message }];
|
||||
}
|
||||
}
|
||||
|
||||
private async send() {
|
||||
const text = this.draft.trim();
|
||||
if (!text || !this.selectedSession) return;
|
||||
this.draft = "";
|
||||
this.messages = [...this.messages, { role: "user", text }];
|
||||
try {
|
||||
await api.prompt(this.selectedSession.id, text);
|
||||
} catch (error) {
|
||||
this.error = String(error);
|
||||
}
|
||||
}
|
||||
|
||||
private async closeSession() {
|
||||
if (!this.selectedSession) return;
|
||||
await api.close(this.selectedSession.id);
|
||||
this.selectedSession = undefined;
|
||||
this.socket?.close();
|
||||
this.messages = [];
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="shell">
|
||||
<aside>
|
||||
<header>
|
||||
<strong>Pi Web POC</strong>
|
||||
<button @click=${this.addProject}>+ Project</button>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>Projects</h2>
|
||||
${this.projects.map((project) => html`
|
||||
<button class=${this.selectedProject?.id === project.id ? "selected" : ""} @click=${() => this.selectProject(project)}>
|
||||
<span>${project.name}</span><small>${project.path}</small>
|
||||
</button>
|
||||
`)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Workspaces</h2>
|
||||
${this.workspaces.map((workspace) => html`
|
||||
<button class=${this.selectedWorkspace?.id === workspace.id ? "selected" : ""} @click=${() => this.selectWorkspace(workspace)}>
|
||||
<span>${workspace.label}${workspace.isMain ? " · main" : ""}</span><small>${workspace.path}</small>
|
||||
</button>
|
||||
`)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Sessions <button ?disabled=${!this.selectedWorkspace} @click=${this.startSession}>+</button></h2>
|
||||
${this.sessions.map((session) => html`
|
||||
<button class=${this.selectedSession?.id === session.id ? "selected" : ""} @click=${() => this.selectSession(session)}>
|
||||
<span>${session.name || session.firstMessage || session.id.slice(0, 8)}</span><small>${session.messageCount} messages</small>
|
||||
</button>
|
||||
`)}
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
${this.error ? html`<div class="error">${this.error}</div>` : null}
|
||||
${this.selectedSession ? html`
|
||||
<div class="chat">
|
||||
${this.messages.map((message) => html`<div class="msg ${message.role}"><b>${message.role}</b><pre>${message.text}</pre></div>`)}
|
||||
</div>
|
||||
<footer>
|
||||
<textarea .value=${this.draft} @input=${(e: Event) => (this.draft = (e.target as HTMLTextAreaElement).value)} @keydown=${(e: KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void this.send();
|
||||
}
|
||||
}} placeholder="Message pi..."></textarea>
|
||||
<button @click=${this.send}>Send</button>
|
||||
<button @click=${this.closeSession}>Close</button>
|
||||
</footer>
|
||||
` : html`<div class="empty">Select or start a session.</div>`}
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host { display: block; height: 100vh; color: #e6edf3; background: #0d1117; font: 14px system-ui, sans-serif; }
|
||||
.shell { display: grid; grid-template-columns: 340px 1fr; height: 100%; }
|
||||
aside { border-right: 1px solid #30363d; overflow: auto; }
|
||||
header { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #30363d; }
|
||||
section { padding: 10px; border-bottom: 1px solid #21262d; }
|
||||
h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; color: #8b949e; font-size: 12px; text-transform: uppercase; }
|
||||
button { border: 1px solid #30363d; border-radius: 8px; background: #161b22; color: #e6edf3; padding: 7px 9px; cursor: pointer; }
|
||||
section > button { display: block; width: 100%; text-align: left; margin: 6px 0; }
|
||||
button.selected { border-color: #58a6ff; background: #0d2847; }
|
||||
button:disabled { opacity: .5; cursor: not-allowed; }
|
||||
small { display: block; color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
main { display: flex; flex-direction: column; min-width: 0; }
|
||||
.chat { flex: 1; overflow: auto; padding: 16px; }
|
||||
.msg { margin: 0 0 14px; padding: 12px; border: 1px solid #30363d; border-radius: 10px; background: #161b22; }
|
||||
.msg.user { border-color: #2f81f7; }
|
||||
.msg.tool { color: #d29922; }
|
||||
.msg.system, .error { color: #ff7b72; }
|
||||
pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
|
||||
footer { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 12px; border-top: 1px solid #30363d; }
|
||||
textarea { min-height: 54px; resize: vertical; border-radius: 8px; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; padding: 8px; }
|
||||
.empty { margin: auto; color: #8b949e; }
|
||||
.error { padding: 10px 16px; border-bottom: 1px solid #30363d; }
|
||||
`;
|
||||
}
|
||||
|
||||
function normalizeMessages(messages: any[]): ChatLine[] {
|
||||
return messages.map((message) => ({
|
||||
role: message.role === "assistant" ? "assistant" : message.role === "user" ? "user" : "system",
|
||||
text: typeof message.content === "string" ? message.content : JSON.stringify(message.content, null, 2),
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { existsSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import Fastify from "fastify";
|
||||
import fastifyStatic from "@fastify/static";
|
||||
import fastifyWebsocket from "@fastify/websocket";
|
||||
import { ProjectStore } from "./storage/projectStore.js";
|
||||
import { ProjectService } from "./projects/projectService.js";
|
||||
import { WorkspaceService } from "./workspaces/workspaceService.js";
|
||||
import { SessionEventHub } from "./realtime/sessionEventHub.js";
|
||||
import { PiSessionService } from "./sessions/piSessionService.js";
|
||||
|
||||
const app = Fastify({ logger: true });
|
||||
await app.register(fastifyWebsocket);
|
||||
|
||||
const projects = new ProjectService(new ProjectStore());
|
||||
const workspaces = new WorkspaceService();
|
||||
const eventHub = new SessionEventHub();
|
||||
const sessions = new PiSessionService(eventHub);
|
||||
|
||||
app.get("/api/projects", async () => projects.list());
|
||||
|
||||
app.post<{ Body: { name?: string; path: string } }>("/api/projects", async (request, reply) => {
|
||||
try {
|
||||
return await projects.add(request.body);
|
||||
} catch (error) {
|
||||
return reply.code(400).send({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get<{ Params: { projectId: string } }>("/api/projects/:projectId/workspaces", async (request, reply) => {
|
||||
try {
|
||||
const project = await projects.requireProject(request.params.projectId);
|
||||
return await workspaces.list(project);
|
||||
} catch (error) {
|
||||
return reply.code(404).send({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get<{ Querystring: { cwd?: string } }>("/api/sessions", async (request, reply) => {
|
||||
if (!request.query.cwd) return reply.code(400).send({ error: "cwd query parameter is required" });
|
||||
return sessions.list(request.query.cwd);
|
||||
});
|
||||
|
||||
app.post<{ Body: { cwd: string } }>("/api/sessions", async (request, reply) => {
|
||||
try {
|
||||
return await sessions.start(request.body.cwd);
|
||||
} catch (error) {
|
||||
return reply.code(400).send({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get<{ Params: { sessionId: string } }>("/api/sessions/:sessionId/messages", async (request, reply) => {
|
||||
try {
|
||||
return await sessions.messages(request.params.sessionId);
|
||||
} catch (error) {
|
||||
return reply.code(404).send({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.post<{ Params: { sessionId: string }; Body: { text: string } }>("/api/sessions/:sessionId/prompt", async (request, reply) => {
|
||||
try {
|
||||
await sessions.prompt(request.params.sessionId, request.body.text);
|
||||
return { accepted: true };
|
||||
} catch (error) {
|
||||
return reply.code(400).send({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.post<{ Params: { sessionId: string } }>("/api/sessions/:sessionId/abort", async (request) => {
|
||||
await sessions.abort(request.params.sessionId);
|
||||
return { aborted: true };
|
||||
});
|
||||
|
||||
app.post<{ Params: { sessionId: string } }>("/api/sessions/:sessionId/close", async (request) => {
|
||||
sessions.close(request.params.sessionId);
|
||||
return { closed: true };
|
||||
});
|
||||
|
||||
app.get<{ Params: { sessionId: string } }>("/api/sessions/:sessionId/events", { websocket: true }, (socket, request) => {
|
||||
eventHub.add(request.params.sessionId, socket);
|
||||
});
|
||||
|
||||
const clientDist = join(process.cwd(), "dist", "client");
|
||||
if (existsSync(clientDist)) {
|
||||
await app.register(fastifyStatic, { root: clientDist });
|
||||
app.setNotFoundHandler((_request, reply) => reply.sendFile("index.html"));
|
||||
}
|
||||
|
||||
const port = Number(process.env.PI_WEB_PORT ?? process.env.PORT ?? 3000);
|
||||
const host = process.env.PI_WEB_HOST ?? "127.0.0.1";
|
||||
await app.listen({ port, host });
|
||||
@@ -0,0 +1,24 @@
|
||||
import { realpath, stat } from "node:fs/promises";
|
||||
import type { ProjectStore } from "../storage/projectStore.js";
|
||||
import type { Project } from "../types.js";
|
||||
|
||||
export class ProjectService {
|
||||
constructor(private readonly store: ProjectStore) {}
|
||||
|
||||
list(): Promise<Project[]> {
|
||||
return this.store.list();
|
||||
}
|
||||
|
||||
async add(input: { name?: string; path: string }): Promise<Project> {
|
||||
const resolved = await realpath(input.path);
|
||||
const s = await stat(resolved);
|
||||
if (!s.isDirectory()) throw new Error("Project path must be a directory");
|
||||
return this.store.add({ name: input.name, path: resolved });
|
||||
}
|
||||
|
||||
async requireProject(id: string): Promise<Project> {
|
||||
const project = await this.store.get(id);
|
||||
if (!project) throw new Error("Project not found");
|
||||
return project;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { WebSocket } from "ws";
|
||||
|
||||
export class SessionEventHub {
|
||||
private readonly socketsBySession = new Map<string, Set<WebSocket>>();
|
||||
|
||||
add(sessionId: string, socket: WebSocket): void {
|
||||
let sockets = this.socketsBySession.get(sessionId);
|
||||
if (!sockets) {
|
||||
sockets = new Set();
|
||||
this.socketsBySession.set(sessionId, sockets);
|
||||
}
|
||||
sockets.add(socket);
|
||||
socket.on("close", () => sockets?.delete(socket));
|
||||
}
|
||||
|
||||
publish(sessionId: string, event: unknown): void {
|
||||
const payload = JSON.stringify(event);
|
||||
for (const socket of this.socketsBySession.get(sessionId) ?? []) {
|
||||
if (socket.readyState === socket.OPEN) socket.send(payload);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import {
|
||||
AuthStorage,
|
||||
createAgentSession,
|
||||
ModelRegistry,
|
||||
SessionManager,
|
||||
type AgentSession,
|
||||
} from "@mariozechner/pi-coding-agent";
|
||||
import type { ClientSession } from "../types.js";
|
||||
import type { SessionEventHub } from "../realtime/sessionEventHub.js";
|
||||
|
||||
interface ActiveSession {
|
||||
session: AgentSession;
|
||||
unsubscribe: () => void;
|
||||
}
|
||||
|
||||
export class PiSessionService {
|
||||
private readonly active = new Map<string, ActiveSession>();
|
||||
private readonly authStorage = AuthStorage.create();
|
||||
private readonly modelRegistry = ModelRegistry.create(this.authStorage);
|
||||
|
||||
constructor(private readonly events: SessionEventHub) {}
|
||||
|
||||
async list(cwd: string): Promise<ClientSession[]> {
|
||||
const sessions = await SessionManager.list(cwd);
|
||||
return sessions.map((s) => ({
|
||||
id: s.id,
|
||||
path: s.path,
|
||||
cwd: s.cwd,
|
||||
name: s.name,
|
||||
created: s.created.toISOString(),
|
||||
modified: s.modified.toISOString(),
|
||||
messageCount: s.messageCount,
|
||||
firstMessage: s.firstMessage,
|
||||
}));
|
||||
}
|
||||
|
||||
async start(cwd: string): Promise<ClientSession> {
|
||||
const { session } = await this.create(SessionManager.create(cwd), cwd);
|
||||
return {
|
||||
id: session.sessionId,
|
||||
path: session.sessionFile ?? "",
|
||||
cwd,
|
||||
created: new Date().toISOString(),
|
||||
modified: new Date().toISOString(),
|
||||
messageCount: session.messages.length,
|
||||
firstMessage: "",
|
||||
};
|
||||
}
|
||||
|
||||
async messages(sessionId: string): Promise<unknown[]> {
|
||||
const session = await this.getOrOpen(sessionId);
|
||||
return session.messages;
|
||||
}
|
||||
|
||||
async prompt(sessionId: string, text: string): Promise<void> {
|
||||
const session = await this.getOrOpen(sessionId);
|
||||
void session.prompt(text).catch((error) => {
|
||||
this.events.publish(sessionId, { type: "session.error", message: error instanceof Error ? error.message : String(error) });
|
||||
});
|
||||
}
|
||||
|
||||
async abort(sessionId: string): Promise<void> {
|
||||
const active = this.active.get(sessionId);
|
||||
if (active) await active.session.abort();
|
||||
}
|
||||
|
||||
close(sessionId: string): void {
|
||||
const active = this.active.get(sessionId);
|
||||
if (!active) return;
|
||||
active.unsubscribe();
|
||||
active.session.dispose();
|
||||
this.active.delete(sessionId);
|
||||
}
|
||||
|
||||
private async getOrOpen(sessionId: string): Promise<AgentSession> {
|
||||
const active = this.active.get(sessionId);
|
||||
if (active) return active.session;
|
||||
|
||||
const match = (await SessionManager.listAll()).find((s) => s.id === sessionId || s.id.startsWith(sessionId));
|
||||
if (!match) throw new Error("Session not found");
|
||||
return (await this.create(SessionManager.open(match.path), match.cwd)).session;
|
||||
}
|
||||
|
||||
private async create(sessionManager: SessionManager, cwd: string): Promise<ActiveSession> {
|
||||
const { session } = await createAgentSession({
|
||||
cwd,
|
||||
sessionManager,
|
||||
authStorage: this.authStorage,
|
||||
modelRegistry: this.modelRegistry,
|
||||
});
|
||||
|
||||
const unsubscribe = session.subscribe((event) => {
|
||||
this.events.publish(session.sessionId, toClientEvent(event));
|
||||
});
|
||||
|
||||
const active = { session, unsubscribe };
|
||||
this.active.set(session.sessionId, active);
|
||||
return active;
|
||||
}
|
||||
}
|
||||
|
||||
function toClientEvent(event: any): unknown {
|
||||
if (event.type === "message_update" && event.assistantMessageEvent?.type === "text_delta") {
|
||||
return { type: "assistant.delta", text: event.assistantMessageEvent.delta };
|
||||
}
|
||||
if (event.type === "tool_execution_start") {
|
||||
return { type: "tool.start", toolName: event.toolName, toolCallId: event.toolCallId };
|
||||
}
|
||||
if (event.type === "tool_execution_end") {
|
||||
return { type: "tool.end", toolName: event.toolName, toolCallId: event.toolCallId, isError: event.isError };
|
||||
}
|
||||
if (event.type === "agent_start") return { type: "agent.start" };
|
||||
if (event.type === "agent_end") return { type: "agent.end" };
|
||||
if (event.type === "message_end") return { type: "message.end" };
|
||||
return { type: "pi.event", eventType: event.type };
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { mkdir, readFile, writeFile } from "node:fs/promises";
|
||||
import { dirname, join } from "node:path";
|
||||
import { homedir } from "node:os";
|
||||
import { randomUUID } from "node:crypto";
|
||||
import type { Project } from "../types.js";
|
||||
|
||||
interface ProjectFile {
|
||||
projects: Project[];
|
||||
}
|
||||
|
||||
export class ProjectStore {
|
||||
constructor(private readonly filePath = join(homedir(), ".pi-web", "projects.json")) {}
|
||||
|
||||
async list(): Promise<Project[]> {
|
||||
return (await this.read()).projects;
|
||||
}
|
||||
|
||||
async add(input: { name?: string; path: string }): Promise<Project> {
|
||||
const data = await this.read();
|
||||
const path = input.path;
|
||||
const existing = data.projects.find((p) => p.path === path);
|
||||
if (existing) return existing;
|
||||
|
||||
const project: Project = {
|
||||
id: randomUUID(),
|
||||
name: input.name?.trim() || path.split("/").filter(Boolean).at(-1) || path,
|
||||
path,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
data.projects.push(project);
|
||||
await this.write(data);
|
||||
return project;
|
||||
}
|
||||
|
||||
async get(id: string): Promise<Project | undefined> {
|
||||
return (await this.list()).find((p) => p.id === id);
|
||||
}
|
||||
|
||||
private async read(): Promise<ProjectFile> {
|
||||
try {
|
||||
return JSON.parse(await readFile(this.filePath, "utf8")) as ProjectFile;
|
||||
} catch (error: any) {
|
||||
if (error?.code === "ENOENT") return { projects: [] };
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
private async write(data: ProjectFile): Promise<void> {
|
||||
await mkdir(dirname(this.filePath), { recursive: true });
|
||||
await writeFile(this.filePath, `${JSON.stringify(data, null, 2)}\n`, "utf8");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
export interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Workspace {
|
||||
id: string;
|
||||
projectId: string;
|
||||
path: string;
|
||||
label: string;
|
||||
branch?: string;
|
||||
isMain: boolean;
|
||||
isGitWorktree: boolean;
|
||||
}
|
||||
|
||||
export interface ClientSession {
|
||||
id: string;
|
||||
path: string;
|
||||
cwd: string;
|
||||
name?: string;
|
||||
created: string;
|
||||
modified: string;
|
||||
messageCount: number;
|
||||
firstMessage: string;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { execFile } from "node:child_process";
|
||||
import { promisify } from "node:util";
|
||||
|
||||
const execFileAsync = promisify(execFile);
|
||||
|
||||
export interface GitWorktreeInfo {
|
||||
path: string;
|
||||
branch?: string;
|
||||
bare?: boolean;
|
||||
detached?: boolean;
|
||||
}
|
||||
|
||||
export async function isGitRepository(path: string): Promise<boolean> {
|
||||
try {
|
||||
const { stdout } = await execFileAsync("git", ["-C", path, "rev-parse", "--is-inside-work-tree"]);
|
||||
return stdout.trim() === "true";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function discoverGitWorktrees(path: string): Promise<GitWorktreeInfo[]> {
|
||||
const { stdout } = await execFileAsync("git", ["-C", path, "worktree", "list", "--porcelain"]);
|
||||
const chunks = stdout.trim().split(/\n\s*\n/).filter(Boolean);
|
||||
|
||||
return chunks.map((chunk) => {
|
||||
const info: GitWorktreeInfo = { path: "" };
|
||||
for (const line of chunk.split("\n")) {
|
||||
const [key, ...rest] = line.split(" ");
|
||||
const value = rest.join(" ");
|
||||
if (key === "worktree") info.path = value;
|
||||
if (key === "branch") info.branch = value.replace(/^refs\/heads\//, "");
|
||||
if (key === "bare") info.bare = true;
|
||||
if (key === "detached") info.detached = true;
|
||||
}
|
||||
return info;
|
||||
}).filter((w) => w.path);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { createHash } from "node:crypto";
|
||||
import type { Project } from "../types.js";
|
||||
import type { Workspace } from "../types.js";
|
||||
import { discoverGitWorktrees, isGitRepository } from "./gitWorktreeDiscovery.js";
|
||||
|
||||
const idFor = (value: string) => createHash("sha1").update(value).digest("hex").slice(0, 12);
|
||||
|
||||
export class WorkspaceService {
|
||||
async list(project: Project): Promise<Workspace[]> {
|
||||
if (!(await isGitRepository(project.path))) {
|
||||
return [this.single(project)];
|
||||
}
|
||||
|
||||
const worktrees = await discoverGitWorktrees(project.path);
|
||||
if (worktrees.length === 0) return [this.single(project)];
|
||||
|
||||
return worktrees.map((worktree) => ({
|
||||
id: idFor(`${project.id}:${worktree.path}`),
|
||||
projectId: project.id,
|
||||
path: worktree.path,
|
||||
label: worktree.branch || (worktree.detached ? "detached" : worktree.path.split("/").filter(Boolean).at(-1) || worktree.path),
|
||||
branch: worktree.branch,
|
||||
isMain: worktree.path === project.path,
|
||||
isGitWorktree: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private single(project: Project): Workspace {
|
||||
return {
|
||||
id: idFor(`${project.id}:${project.path}`),
|
||||
projectId: project.id,
|
||||
path: project.path,
|
||||
label: project.name,
|
||||
isMain: true,
|
||||
isGitWorktree: false,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
root: "src/client",
|
||||
build: {
|
||||
outDir: "../../dist/client",
|
||||
emptyOutDir: true,
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": "http://localhost:3000",
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user