Archived
Refactor client components and fix layout
This commit is contained in:
Federico Jaramillo Martinez
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "sh -c 'npm run dev:server & npm run dev:client & wait'",
|
"dev": "bash -c 'trap \"kill 0\" EXIT; npm run dev:server & npm run dev:client & wait'",
|
||||||
"dev:server": "tsx watch src/server/index.ts",
|
"dev:server": "tsx watch src/server/index.ts",
|
||||||
"dev:client": "vite --host 0.0.0.0",
|
"dev:client": "vite --host 0.0.0.0",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
|
|||||||
@@ -4,6 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Pi Web POC</title>
|
<title>Pi Web POC</title>
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0; height: 100%; overflow: hidden; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<pi-web-poc></pi-web-poc>
|
<pi-web-poc></pi-web-poc>
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { LitElement, html } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators.js";
|
||||||
|
import type { ChatLine } from "./shared";
|
||||||
|
import { chatStyles } from "./shared";
|
||||||
|
|
||||||
|
@customElement("chat-view")
|
||||||
|
export class ChatView extends LitElement {
|
||||||
|
@property({ attribute: false }) messages: ChatLine[] = [];
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<div class="chat">
|
||||||
|
${this.messages.map((message) => html`<div class="msg ${message.role}"><b>${message.role}</b><pre>${message.text}</pre></div>`)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = chatStyles;
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { LitElement, html } from "lit";
|
||||||
|
import { customElement, property, state } from "lit/decorators.js";
|
||||||
|
import { composerStyles } from "./shared";
|
||||||
|
|
||||||
|
@customElement("chat-composer")
|
||||||
|
export class Composer extends LitElement {
|
||||||
|
@property({ type: Boolean }) disabled = false;
|
||||||
|
@property({ attribute: false }) onSend?: (text: string) => void;
|
||||||
|
@property({ attribute: false }) onCloseSession?: () => void;
|
||||||
|
@state() private draft = "";
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<footer>
|
||||||
|
<textarea
|
||||||
|
.value=${this.draft}
|
||||||
|
?disabled=${this.disabled}
|
||||||
|
@input=${(e: Event) => (this.draft = (e.target as HTMLTextAreaElement).value)}
|
||||||
|
@keydown=${(e: KeyboardEvent) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.send();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder="Message pi..."
|
||||||
|
></textarea>
|
||||||
|
<button ?disabled=${this.disabled} @click=${this.send}>Send</button>
|
||||||
|
<button ?disabled=${this.disabled} @click=${() => this.onCloseSession?.()}>Close</button>
|
||||||
|
</footer>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private send() {
|
||||||
|
const text = this.draft.trim();
|
||||||
|
if (!text || this.disabled) return;
|
||||||
|
this.draft = "";
|
||||||
|
this.onSend?.(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = composerStyles;
|
||||||
|
}
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
import { LitElement, html } from "lit";
|
||||||
|
import { customElement, state } from "lit/decorators.js";
|
||||||
|
import { api, type Project, type SessionInfo, type Workspace } from "../api";
|
||||||
|
import { readRoute, writeRoute } from "../route";
|
||||||
|
import { SessionSocket, type SessionUiEvent } from "../sessionSocket";
|
||||||
|
import "./ProjectList";
|
||||||
|
import "./WorkspaceList";
|
||||||
|
import "./SessionList";
|
||||||
|
import "./ChatView";
|
||||||
|
import "./Composer";
|
||||||
|
import { appStyles, type ChatLine } from "./shared";
|
||||||
|
|
||||||
|
@customElement("pi-web-poc")
|
||||||
|
export class PiWebApp 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 = "";
|
||||||
|
|
||||||
|
private readonly socket = new SessionSocket();
|
||||||
|
private readonly onPopState = () => void this.restoreRoute(false);
|
||||||
|
|
||||||
|
connectedCallback(): void {
|
||||||
|
super.connectedCallback();
|
||||||
|
window.addEventListener("popstate", this.onPopState);
|
||||||
|
void this.loadProjects();
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback(): void {
|
||||||
|
window.removeEventListener("popstate", this.onPopState);
|
||||||
|
this.socket.close();
|
||||||
|
super.disconnectedCallback();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadProjects() {
|
||||||
|
this.error = "";
|
||||||
|
try {
|
||||||
|
this.projects = await api.projects();
|
||||||
|
await this.restoreRoute(false);
|
||||||
|
} 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, target?: { workspaceId?: string; sessionId?: string; updateUrl?: boolean }) {
|
||||||
|
this.selectedProject = project;
|
||||||
|
this.selectedWorkspace = undefined;
|
||||||
|
this.selectedSession = undefined;
|
||||||
|
this.sessions = [];
|
||||||
|
this.messages = [];
|
||||||
|
this.socket.close();
|
||||||
|
try {
|
||||||
|
this.workspaces = await api.workspaces(project.id);
|
||||||
|
const workspace = target?.workspaceId ? this.workspaces.find((w) => w.id === target.workspaceId) : this.workspaces[0];
|
||||||
|
if (workspace) await this.selectWorkspace(workspace, { sessionId: target?.sessionId, updateUrl: target?.updateUrl });
|
||||||
|
else if (target?.updateUrl !== false) this.updateUrl();
|
||||||
|
} catch (error) {
|
||||||
|
this.error = String(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async selectWorkspace(workspace: Workspace, target?: { sessionId?: string; updateUrl?: boolean }) {
|
||||||
|
this.selectedWorkspace = workspace;
|
||||||
|
this.selectedSession = undefined;
|
||||||
|
this.messages = [];
|
||||||
|
this.socket.close();
|
||||||
|
try {
|
||||||
|
this.sessions = await api.sessions(workspace.path);
|
||||||
|
const sessionId = target?.sessionId;
|
||||||
|
const session = sessionId ? this.sessions.find((s) => s.id === sessionId || s.id.startsWith(sessionId)) : undefined;
|
||||||
|
if (session) await this.selectSession(session, { updateUrl: target?.updateUrl });
|
||||||
|
else if (target?.updateUrl !== false) this.updateUrl();
|
||||||
|
} 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, options?: { updateUrl?: boolean }) {
|
||||||
|
this.selectedSession = session;
|
||||||
|
this.socket.close();
|
||||||
|
this.messages = normalizeMessages(await api.messages(session.id));
|
||||||
|
this.socket.connect(session.id, (event) => this.applyEvent(event));
|
||||||
|
if (options?.updateUrl !== false) this.updateUrl();
|
||||||
|
}
|
||||||
|
|
||||||
|
private applyEvent(event: SessionUiEvent) {
|
||||||
|
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(text: string) {
|
||||||
|
if (!this.selectedSession) return;
|
||||||
|
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 = [];
|
||||||
|
this.updateUrl();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async restoreRoute(updateUrl: boolean) {
|
||||||
|
const route = readRoute();
|
||||||
|
if (!route.projectId) return;
|
||||||
|
const project = this.projects.find((p) => p.id === route.projectId);
|
||||||
|
if (!project) return;
|
||||||
|
await this.selectProject(project, { workspaceId: route.workspaceId, sessionId: route.sessionId, updateUrl });
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateUrl() {
|
||||||
|
writeRoute({ projectId: this.selectedProject?.id, workspaceId: this.selectedWorkspace?.id, sessionId: this.selectedSession?.id });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<div class="shell">
|
||||||
|
<aside>
|
||||||
|
<header>
|
||||||
|
<strong>Pi Web POC</strong>
|
||||||
|
<button @click=${this.addProject}>+ Project</button>
|
||||||
|
</header>
|
||||||
|
<project-list .projects=${this.projects} .selected=${this.selectedProject} .onSelect=${(project: Project) => this.selectProject(project)}></project-list>
|
||||||
|
<workspace-list .workspaces=${this.workspaces} .selected=${this.selectedWorkspace} .onSelect=${(workspace: Workspace) => this.selectWorkspace(workspace)}></workspace-list>
|
||||||
|
<session-list .sessions=${this.sessions} .selected=${this.selectedSession} .canStart=${!!this.selectedWorkspace} .onStart=${() => this.startSession()} .onSelect=${(session: SessionInfo) => this.selectSession(session)}></session-list>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
${this.error ? html`<div class="error">${this.error}</div>` : null}
|
||||||
|
${this.selectedSession ? html`
|
||||||
|
<chat-view .messages=${this.messages}></chat-view>
|
||||||
|
<chat-composer .onSend=${(text: string) => this.send(text)} .onCloseSession=${() => this.closeSession()}></chat-composer>
|
||||||
|
` : html`<div class="empty">Select or start a session.</div>`}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = appStyles;
|
||||||
|
}
|
||||||
|
|
||||||
|
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,26 @@
|
|||||||
|
import { LitElement, html } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators.js";
|
||||||
|
import type { Project } from "../api";
|
||||||
|
import { listStyles } from "./shared";
|
||||||
|
|
||||||
|
@customElement("project-list")
|
||||||
|
export class ProjectList extends LitElement {
|
||||||
|
@property({ attribute: false }) projects: Project[] = [];
|
||||||
|
@property({ attribute: false }) selected?: Project;
|
||||||
|
@property({ attribute: false }) onSelect?: (project: Project) => void;
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<section>
|
||||||
|
<h2>Projects</h2>
|
||||||
|
${this.projects.map((project) => html`
|
||||||
|
<button class=${this.selected?.id === project.id ? "selected" : ""} @click=${() => this.onSelect?.(project)}>
|
||||||
|
<span>${project.name}</span><small>${project.path}</small>
|
||||||
|
</button>
|
||||||
|
`)}
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = listStyles;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { LitElement, html } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators.js";
|
||||||
|
import type { SessionInfo } from "../api";
|
||||||
|
import { listStyles } from "./shared";
|
||||||
|
|
||||||
|
@customElement("session-list")
|
||||||
|
export class SessionList extends LitElement {
|
||||||
|
@property({ attribute: false }) sessions: SessionInfo[] = [];
|
||||||
|
@property({ attribute: false }) selected?: SessionInfo;
|
||||||
|
@property({ type: Boolean }) canStart = false;
|
||||||
|
@property({ attribute: false }) onSelect?: (session: SessionInfo) => void;
|
||||||
|
@property({ attribute: false }) onStart?: () => void;
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<section>
|
||||||
|
<h2>Sessions <button ?disabled=${!this.canStart} @click=${() => this.onStart?.()}>+</button></h2>
|
||||||
|
${this.sessions.map((session) => html`
|
||||||
|
<button class=${this.selected?.id === session.id ? "selected" : ""} @click=${() => this.onSelect?.(session)}>
|
||||||
|
<span>${session.name || session.firstMessage || session.id.slice(0, 8)}</span><small>${session.messageCount} messages</small>
|
||||||
|
</button>
|
||||||
|
`)}
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = listStyles;
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { LitElement, html } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators.js";
|
||||||
|
import type { Workspace } from "../api";
|
||||||
|
import { listStyles } from "./shared";
|
||||||
|
|
||||||
|
@customElement("workspace-list")
|
||||||
|
export class WorkspaceList extends LitElement {
|
||||||
|
@property({ attribute: false }) workspaces: Workspace[] = [];
|
||||||
|
@property({ attribute: false }) selected?: Workspace;
|
||||||
|
@property({ attribute: false }) onSelect?: (workspace: Workspace) => void;
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<section>
|
||||||
|
<h2>Workspaces</h2>
|
||||||
|
${this.workspaces.map((workspace) => html`
|
||||||
|
<button class=${this.selected?.id === workspace.id ? "selected" : ""} @click=${() => this.onSelect?.(workspace)}>
|
||||||
|
<span>${workspace.label}${workspace.isMain ? " · main" : ""}</span><small>${workspace.path}</small>
|
||||||
|
</button>
|
||||||
|
`)}
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = listStyles;
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { css } from "lit";
|
||||||
|
|
||||||
|
export interface ChatLine {
|
||||||
|
role: "user" | "assistant" | "tool" | "system";
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const appStyles = 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%; min-height: 0; }
|
||||||
|
aside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #30363d; overflow: hidden; }
|
||||||
|
header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #30363d; }
|
||||||
|
project-list, workspace-list { flex: 0 0 auto; max-height: 26%; overflow: auto; border-bottom: 1px solid #21262d; }
|
||||||
|
session-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
|
||||||
|
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||||
|
chat-view { flex: 1 1 auto; min-height: 0; overflow: auto; }
|
||||||
|
chat-composer { flex: 0 0 auto; }
|
||||||
|
button { border: 1px solid #30363d; border-radius: 8px; background: #161b22; color: #e6edf3; padding: 7px 9px; cursor: pointer; }
|
||||||
|
.empty { margin: auto; color: #8b949e; }
|
||||||
|
.error { padding: 10px 16px; border-bottom: 1px solid #30363d; color: #ff7b72; }
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const listStyles = css`
|
||||||
|
:host { display: block; color: #e6edf3; font: 14px system-ui, sans-serif; }
|
||||||
|
section { padding: 10px; }
|
||||||
|
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; }
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const chatStyles = css`
|
||||||
|
:host { display: block; min-height: 0; color: #e6edf3; font: 14px system-ui, sans-serif; }
|
||||||
|
.chat { height: 100%; overflow: auto; padding: 16px; box-sizing: border-box; }
|
||||||
|
.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 { color: #ff7b72; }
|
||||||
|
pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const composerStyles = css`
|
||||||
|
:host { display: block; color: #e6edf3; font: 14px system-ui, sans-serif; }
|
||||||
|
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; }
|
||||||
|
button { border: 1px solid #30363d; border-radius: 8px; background: #161b22; color: #e6edf3; padding: 7px 9px; cursor: pointer; }
|
||||||
|
button:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
|
||||||
|
`;
|
||||||
+1
-224
@@ -1,224 +1 @@
|
|||||||
import { LitElement, css, html } from "lit";
|
import "./components/PiWebApp";
|
||||||
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,27 @@
|
|||||||
|
export interface AppRoute {
|
||||||
|
projectId?: string;
|
||||||
|
workspaceId?: string;
|
||||||
|
sessionId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function readRoute(): AppRoute {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return {
|
||||||
|
projectId: params.get("project") ?? undefined,
|
||||||
|
workspaceId: params.get("workspace") ?? undefined,
|
||||||
|
sessionId: params.get("session") ?? undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function writeRoute(route: AppRoute): void {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("project");
|
||||||
|
url.searchParams.delete("workspace");
|
||||||
|
url.searchParams.delete("session");
|
||||||
|
if (route.projectId) url.searchParams.set("project", route.projectId);
|
||||||
|
if (route.workspaceId) url.searchParams.set("workspace", route.workspaceId);
|
||||||
|
if (route.sessionId) url.searchParams.set("session", route.sessionId);
|
||||||
|
const next = `${url.pathname}${url.search}${url.hash}`;
|
||||||
|
const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
|
||||||
|
if (next !== current) window.history.pushState({}, "", url);
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { sessionEvents } from "./api";
|
||||||
|
|
||||||
|
export type SessionUiEvent =
|
||||||
|
| { type: "assistant.delta"; text: string }
|
||||||
|
| { type: "tool.start"; toolName: string }
|
||||||
|
| { type: "tool.end"; toolName: string; isError: boolean }
|
||||||
|
| { type: "session.error"; message: string };
|
||||||
|
|
||||||
|
export class SessionSocket {
|
||||||
|
private socket?: WebSocket;
|
||||||
|
|
||||||
|
connect(sessionId: string, onEvent: (event: SessionUiEvent) => void): void {
|
||||||
|
this.close();
|
||||||
|
this.socket = sessionEvents(sessionId);
|
||||||
|
this.socket.onmessage = (message) => {
|
||||||
|
const event = JSON.parse(message.data);
|
||||||
|
if (isSessionUiEvent(event)) onEvent(event);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
close(): void {
|
||||||
|
this.socket?.close();
|
||||||
|
this.socket = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSessionUiEvent(event: any): event is SessionUiEvent {
|
||||||
|
return ["assistant.delta", "tool.start", "tool.end", "session.error"].includes(event?.type);
|
||||||
|
}
|
||||||
@@ -8,6 +8,7 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
port: 5173,
|
port: 5173,
|
||||||
|
strictPort: true,
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api": "http://localhost:3000",
|
"/api": "http://localhost:3000",
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user