style: formatter pass on bridge + web views
This commit is contained in:
Raphael Westphal
@@ -22,7 +22,9 @@ async function runRepoSetup() {
|
||||
stdio: ["ignore", "inherit", "inherit"],
|
||||
});
|
||||
const timer = setTimeout(() => {
|
||||
console.error(`[lvmh-bridge] setup timed out after ${SETUP_TIMEOUT_MS}ms, killing`);
|
||||
console.error(
|
||||
`[lvmh-bridge] setup timed out after ${SETUP_TIMEOUT_MS}ms, killing`,
|
||||
);
|
||||
child.kill("SIGKILL");
|
||||
resolve(124);
|
||||
}, SETUP_TIMEOUT_MS);
|
||||
|
||||
+139
-85
@@ -1,5 +1,11 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
|
||||
import {
|
||||
NavLink,
|
||||
Navigate,
|
||||
Route,
|
||||
Routes,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
import ChatView from "./ChatView";
|
||||
import SessionsView from "./SessionsView";
|
||||
import SpawnView from "./SpawnView";
|
||||
@@ -8,91 +14,139 @@ import { classNames, useSessions, useToasts } from "./store";
|
||||
import { clearSettings, getSettings } from "./settings";
|
||||
|
||||
export default function App() {
|
||||
const [configured, setConfigured] = useState<boolean>(getSettings() !== null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState<boolean>(false);
|
||||
const { toasts, push } = useToasts();
|
||||
const store = useSessions(push);
|
||||
const location = useLocation();
|
||||
const [configured, setConfigured] = useState<boolean>(getSettings() !== null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState<boolean>(false);
|
||||
const { toasts, push } = useToasts();
|
||||
const store = useSessions(push);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
setSidebarOpen(false);
|
||||
}, [location.pathname]);
|
||||
useEffect(() => {
|
||||
setSidebarOpen(false);
|
||||
}, [location.pathname]);
|
||||
|
||||
if (!configured) return <SettingsGate onSaved={() => setConfigured(true)} />;
|
||||
if (store === null) return <SettingsGate onSaved={() => setConfigured(true)} />;
|
||||
if (!configured) return <SettingsGate onSaved={() => setConfigured(true)} />;
|
||||
if (store === null)
|
||||
return <SettingsGate onSaved={() => setConfigured(true)} />;
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<nav className={classNames("sidebar", sidebarOpen && "open")} aria-label="Sessions">
|
||||
<div className="sidebar-header">
|
||||
<div className="brand">
|
||||
<span className="logo" aria-hidden="true">L</span>
|
||||
lvmh
|
||||
</div>
|
||||
<span
|
||||
className={classNames("conn-dot", store.state)}
|
||||
title={`ws ${store.state}`}
|
||||
role="img"
|
||||
aria-label={`connection ${store.state}`}
|
||||
/>
|
||||
</div>
|
||||
<NavLink to="/new" className={({ isActive }) => classNames("new-chat-btn", isActive && "active")}>
|
||||
+ Spawn session
|
||||
</NavLink>
|
||||
<div className="sidebar-sessions">
|
||||
{[...store.sessions]
|
||||
.filter((s) => s.online)
|
||||
.sort((a, b) => (b.lastEventAt ?? b.startedAt) - (a.lastEventAt ?? a.startedAt))
|
||||
.map((s) => (
|
||||
<NavLink
|
||||
key={s.id}
|
||||
to={`/s/${s.id}`}
|
||||
className={({ isActive }) => classNames("session-link", isActive && "active")}
|
||||
style={{ display: "flex", alignItems: "center", gap: 6 }}
|
||||
>
|
||||
<span className={classNames("online-dot", s.online && "on")} style={{ display: "inline-block" }} />
|
||||
<span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{s.name ?? s.repo ?? s.id}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
<div className="sidebar-footer">
|
||||
<span className="spacer" />
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn danger"
|
||||
aria-label="Disconnect and clear settings"
|
||||
onClick={() => {
|
||||
clearSettings();
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
disconnect
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{sidebarOpen && <div className="sidebar-backdrop" onClick={() => setSidebarOpen(false)} />}
|
||||
<main className="main">
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn menu-btn"
|
||||
aria-label="Open menu"
|
||||
style={{ display: "none", padding: "8px 12px", alignSelf: "flex-start", borderRadius: 0 }}
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<Routes>
|
||||
<Route path="/" element={<SessionsView sessions={store.sessions} onChanged={() => void store.refresh()} pushToast={push} />} />
|
||||
<Route path="/s/:id" element={<ChatView store={store} pushToast={push} />} />
|
||||
<Route path="/new" element={<SpawnView store={store} pushToast={push} />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<div className="toasts" role="status">
|
||||
{toasts.map((t) => (
|
||||
<div key={t.id} className="toast">{t.text}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<nav
|
||||
className={classNames("sidebar", sidebarOpen && "open")}
|
||||
aria-label="Sessions"
|
||||
>
|
||||
<div className="sidebar-header">
|
||||
<div className="brand">
|
||||
<span className="logo" aria-hidden="true">
|
||||
L
|
||||
</span>
|
||||
lvmh
|
||||
</div>
|
||||
<span
|
||||
className={classNames("conn-dot", store.state)}
|
||||
title={`ws ${store.state}`}
|
||||
role="img"
|
||||
aria-label={`connection ${store.state}`}
|
||||
/>
|
||||
</div>
|
||||
<NavLink
|
||||
to="/new"
|
||||
className={({ isActive }) =>
|
||||
classNames("new-chat-btn", isActive && "active")
|
||||
}
|
||||
>
|
||||
+ Spawn session
|
||||
</NavLink>
|
||||
<div className="sidebar-sessions">
|
||||
{[...store.sessions]
|
||||
.filter((s) => s.online)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(b.lastEventAt ?? b.startedAt) - (a.lastEventAt ?? a.startedAt),
|
||||
)
|
||||
.map((s) => (
|
||||
<NavLink
|
||||
key={s.id}
|
||||
to={`/s/${s.id}`}
|
||||
className={({ isActive }) =>
|
||||
classNames("session-link", isActive && "active")
|
||||
}
|
||||
style={{ display: "flex", alignItems: "center", gap: 6 }}
|
||||
>
|
||||
<span
|
||||
className={classNames("online-dot", s.online && "on")}
|
||||
style={{ display: "inline-block" }}
|
||||
/>
|
||||
<span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
{s.name ?? s.repo ?? s.id}
|
||||
</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
<div className="sidebar-footer">
|
||||
<span className="spacer" />
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn danger"
|
||||
aria-label="Disconnect and clear settings"
|
||||
onClick={() => {
|
||||
clearSettings();
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
disconnect
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="sidebar-backdrop"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
<main className="main">
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn menu-btn"
|
||||
aria-label="Open menu"
|
||||
style={{
|
||||
display: "none",
|
||||
padding: "8px 12px",
|
||||
alignSelf: "flex-start",
|
||||
borderRadius: 0,
|
||||
}}
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<SessionsView
|
||||
sessions={store.sessions}
|
||||
onChanged={() => void store.refresh()}
|
||||
pushToast={push}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/s/:id"
|
||||
element={<ChatView store={store} pushToast={push} />}
|
||||
/>
|
||||
<Route
|
||||
path="/new"
|
||||
element={<SpawnView store={store} pushToast={push} />}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<div className="toasts" role="status">
|
||||
{toasts.map((t) => (
|
||||
<div key={t.id} className="toast">
|
||||
{t.text}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+219
-192
@@ -3,7 +3,12 @@ import { Link, useParams } from "react-router-dom";
|
||||
import type { EventFrame } from "./protocol";
|
||||
import { Route } from "./protocol";
|
||||
import { ApiError, errMessage, fetchJson } from "./api";
|
||||
import { deriveChat, deriveTasks, lastPersistedSeq, mergeEvents } from "./derive";
|
||||
import {
|
||||
deriveChat,
|
||||
deriveTasks,
|
||||
lastPersistedSeq,
|
||||
mergeEvents,
|
||||
} from "./derive";
|
||||
import type { SessionsStore } from "./store";
|
||||
import { classNames } from "./store";
|
||||
import ChatStream from "./ChatStream";
|
||||
@@ -14,214 +19,236 @@ const TEXTAREA_MAX_H: number = 200;
|
||||
const SEND_KEY: string = "Enter";
|
||||
|
||||
interface Props {
|
||||
store: SessionsStore;
|
||||
pushToast: (text: string) => void;
|
||||
store: SessionsStore;
|
||||
pushToast: (text: string) => void;
|
||||
}
|
||||
|
||||
export default function ChatView({ store, pushToast }: Props) {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const sessionId: string = id ?? "";
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const sessionId: string = id ?? "";
|
||||
|
||||
const [events, setEvents] = useState<EventFrame[]>([]);
|
||||
const [loadError, setLoadError] = useState<string>("");
|
||||
const [draft, setDraft] = useState<string>("");
|
||||
const [sending, setSending] = useState<boolean>(false);
|
||||
const [tasksOpen, setTasksOpen] = useState<boolean>(false);
|
||||
const [events, setEvents] = useState<EventFrame[]>([]);
|
||||
const [loadError, setLoadError] = useState<string>("");
|
||||
const [draft, setDraft] = useState<string>("");
|
||||
const [sending, setSending] = useState<boolean>(false);
|
||||
const [tasksOpen, setTasksOpen] = useState<boolean>(false);
|
||||
|
||||
const lastSeqRef = useRef<number>(0);
|
||||
const loadedRef = useRef<boolean>(false);
|
||||
const taRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const lastSeqRef = useRef<number>(0);
|
||||
const loadedRef = useRef<boolean>(false);
|
||||
const taRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
|
||||
const session = store.sessions.find((s) => s.id === sessionId);
|
||||
const session = store.sessions.find((s) => s.id === sessionId);
|
||||
|
||||
// Close the pi behind an agent session (stops + removes the container).
|
||||
const closePi = useCallback(async (): Promise<void> => {
|
||||
if (sessionId.length === 0) return;
|
||||
try {
|
||||
await fetchJson(Route.SessionContainer(sessionId), { method: "DELETE" });
|
||||
pushToast(`closed pi ${session?.name ?? sessionId}`);
|
||||
await store.refresh();
|
||||
} catch (err) {
|
||||
pushToast(`close failed: ${errMessage(err)}`);
|
||||
}
|
||||
}, [sessionId, session, store, pushToast]);
|
||||
// Close the pi behind an agent session (stops + removes the container).
|
||||
const closePi = useCallback(async (): Promise<void> => {
|
||||
if (sessionId.length === 0) return;
|
||||
try {
|
||||
await fetchJson(Route.SessionContainer(sessionId), { method: "DELETE" });
|
||||
pushToast(`closed pi ${session?.name ?? sessionId}`);
|
||||
await store.refresh();
|
||||
} catch (err) {
|
||||
pushToast(`close failed: ${errMessage(err)}`);
|
||||
}
|
||||
}, [sessionId, session, store, pushToast]);
|
||||
|
||||
const applyEvents = useCallback((incoming: EventFrame[]): void => {
|
||||
setEvents((prev) => {
|
||||
const merged = mergeEvents(prev, incoming);
|
||||
lastSeqRef.current = Math.max(lastSeqRef.current, lastPersistedSeq(merged));
|
||||
return merged;
|
||||
});
|
||||
}, []);
|
||||
const applyEvents = useCallback((incoming: EventFrame[]): void => {
|
||||
setEvents((prev) => {
|
||||
const merged = mergeEvents(prev, incoming);
|
||||
lastSeqRef.current = Math.max(
|
||||
lastSeqRef.current,
|
||||
lastPersistedSeq(merged),
|
||||
);
|
||||
return merged;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// history load on mount / session switch
|
||||
useEffect(() => {
|
||||
if (sessionId.length === 0) return;
|
||||
loadedRef.current = false;
|
||||
setLoadError("");
|
||||
setEvents([]);
|
||||
lastSeqRef.current = 0;
|
||||
let alive = true;
|
||||
void (async () => {
|
||||
try {
|
||||
const evts = await fetchJson<EventFrame[]>(`${Route.SessionEvents(sessionId)}?after=0&limit=${HISTORY_LIMIT}`);
|
||||
if (!alive) return;
|
||||
applyEvents(evts);
|
||||
} catch (err) {
|
||||
if (alive) setLoadError(errMessage(err));
|
||||
} finally {
|
||||
if (alive) loadedRef.current = true;
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [sessionId, applyEvents]);
|
||||
// history load on mount / session switch
|
||||
useEffect(() => {
|
||||
if (sessionId.length === 0) return;
|
||||
loadedRef.current = false;
|
||||
setLoadError("");
|
||||
setEvents([]);
|
||||
lastSeqRef.current = 0;
|
||||
let alive = true;
|
||||
void (async () => {
|
||||
try {
|
||||
const evts = await fetchJson<EventFrame[]>(
|
||||
`${Route.SessionEvents(sessionId)}?after=0&limit=${HISTORY_LIMIT}`,
|
||||
);
|
||||
if (!alive) return;
|
||||
applyEvents(evts);
|
||||
} catch (err) {
|
||||
if (alive) setLoadError(errMessage(err));
|
||||
} finally {
|
||||
if (alive) loadedRef.current = true;
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [sessionId, applyEvents]);
|
||||
|
||||
// ws subscription
|
||||
useEffect(() => {
|
||||
if (sessionId.length === 0 || store.state !== "open") return;
|
||||
return store.subscribe(sessionId, applyEvents);
|
||||
}, [sessionId, store.state, store, applyEvents]);
|
||||
// ws subscription
|
||||
useEffect(() => {
|
||||
if (sessionId.length === 0 || store.state !== "open") return;
|
||||
return store.subscribe(sessionId, applyEvents);
|
||||
}, [sessionId, store.state, store, applyEvents]);
|
||||
|
||||
// missed events after reconnect (persisted only)
|
||||
useEffect(() => {
|
||||
if (store.state !== "open" || !loadedRef.current) return;
|
||||
const after: number = lastSeqRef.current;
|
||||
void fetchJson<EventFrame[]>(`${Route.SessionEvents(sessionId)}?after=${after}&limit=${HISTORY_LIMIT}`)
|
||||
.then(applyEvents)
|
||||
.catch(() => undefined);
|
||||
}, [store.state, sessionId, applyEvents]);
|
||||
// missed events after reconnect (persisted only)
|
||||
useEffect(() => {
|
||||
if (store.state !== "open" || !loadedRef.current) return;
|
||||
const after: number = lastSeqRef.current;
|
||||
void fetchJson<EventFrame[]>(
|
||||
`${Route.SessionEvents(sessionId)}?after=${after}&limit=${HISTORY_LIMIT}`,
|
||||
)
|
||||
.then(applyEvents)
|
||||
.catch(() => undefined);
|
||||
}, [store.state, sessionId, applyEvents]);
|
||||
|
||||
const chat = useMemo(() => deriveChat(events), [events]);
|
||||
const tasks = useMemo(() => deriveTasks(events), [events]);
|
||||
const chat = useMemo(() => deriveChat(events), [events]);
|
||||
const tasks = useMemo(() => deriveTasks(events), [events]);
|
||||
|
||||
const autosize = useCallback((): void => {
|
||||
const el = taRef.current;
|
||||
if (el === null) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_H)}px`;
|
||||
}, []);
|
||||
const autosize = useCallback((): void => {
|
||||
const el = taRef.current;
|
||||
if (el === null) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_H)}px`;
|
||||
}, []);
|
||||
|
||||
useEffect(autosize, [draft, autosize]);
|
||||
useEffect(autosize, [draft, autosize]);
|
||||
|
||||
const send = async (): Promise<void> => {
|
||||
const text = draft.trim();
|
||||
if (text.length === 0 || sending) return;
|
||||
setDraft("");
|
||||
setSending(true);
|
||||
try {
|
||||
await fetchJson(Route.SessionPrompt(sessionId), {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ message: text }),
|
||||
});
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 409) pushToast("session offline");
|
||||
else pushToast(errMessage(err));
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
const send = async (): Promise<void> => {
|
||||
const text = draft.trim();
|
||||
if (text.length === 0 || sending) return;
|
||||
setDraft("");
|
||||
setSending(true);
|
||||
try {
|
||||
await fetchJson(Route.SessionPrompt(sessionId), {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ message: text }),
|
||||
});
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 409)
|
||||
pushToast("session offline");
|
||||
else pushToast(errMessage(err));
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const abort = async (): Promise<void> => {
|
||||
try {
|
||||
await fetchJson(Route.SessionAbort(sessionId), { method: "POST" });
|
||||
} catch (err) {
|
||||
pushToast(errMessage(err));
|
||||
}
|
||||
};
|
||||
const abort = async (): Promise<void> => {
|
||||
try {
|
||||
await fetchJson(Route.SessionAbort(sessionId), { method: "POST" });
|
||||
} catch (err) {
|
||||
pushToast(errMessage(err));
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
|
||||
if (e.key === SEND_KEY && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void send();
|
||||
}
|
||||
};
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
|
||||
if (e.key === SEND_KEY && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void send();
|
||||
}
|
||||
};
|
||||
|
||||
if (sessionId.length === 0) {
|
||||
return (
|
||||
<div className="page">
|
||||
<p className="empty">No session selected.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (sessionId.length === 0) {
|
||||
return (
|
||||
<div className="page">
|
||||
<p className="empty">No session selected.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="chat-layout">
|
||||
<div className="chat-col">
|
||||
<div className="chat-header">
|
||||
<div className="title">{session?.name ?? session?.repo ?? sessionId}</div>
|
||||
<div className="sub">{session?.model}</div>
|
||||
<span
|
||||
className={classNames("conn-dot", session?.online === true ? "open" : "closed")}
|
||||
title={session?.online === true ? "online" : "offline"}
|
||||
/>
|
||||
<div className="spacer" />
|
||||
{session?.agent === true && (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn danger"
|
||||
aria-label={`Close pi ${session.name ?? session.id}`}
|
||||
onClick={() => void closePi()}
|
||||
>
|
||||
■ close
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="task-toggle icon-btn"
|
||||
aria-expanded={tasksOpen}
|
||||
aria-label="Toggle task panel"
|
||||
onClick={() => setTasksOpen(!tasksOpen)}
|
||||
>
|
||||
☰ tasks
|
||||
</button>
|
||||
</div>
|
||||
{tasksOpen && (
|
||||
<div className="mobile-tasks">
|
||||
<TaskPanel tasks={tasks} />
|
||||
</div>
|
||||
)}
|
||||
{loadError.length > 0 ? (
|
||||
<div className="page">
|
||||
<p className="empty">Failed to load history: {loadError}</p>
|
||||
<Link to="/">Back to sessions</Link>
|
||||
</div>
|
||||
) : (
|
||||
<ChatStream messages={chat.messages} tools={chat.tools} busy={chat.busy} />
|
||||
)}
|
||||
<div className="composer">
|
||||
<div className="composer-inner">
|
||||
<textarea
|
||||
ref={taRef}
|
||||
rows={1}
|
||||
value={draft}
|
||||
placeholder="Message…"
|
||||
aria-label="Message"
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
{chat.busy ? (
|
||||
<button type="button" className="abort-btn" aria-label="Abort current run" onClick={() => void abort()}>
|
||||
■ stop
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="send-btn"
|
||||
aria-label="Send message"
|
||||
disabled={draft.trim().length === 0 || sending}
|
||||
onClick={() => void send()}
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside className="task-col" aria-label="Task panel">
|
||||
<TaskPanel tasks={tasks} />
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="chat-layout">
|
||||
<div className="chat-col">
|
||||
<div className="chat-header">
|
||||
<div className="title">
|
||||
{session?.name ?? session?.repo ?? sessionId}
|
||||
</div>
|
||||
<div className="sub">{session?.model}</div>
|
||||
<span
|
||||
className={classNames(
|
||||
"conn-dot",
|
||||
session?.online === true ? "open" : "closed",
|
||||
)}
|
||||
title={session?.online === true ? "online" : "offline"}
|
||||
/>
|
||||
<div className="spacer" />
|
||||
{session?.agent === true && (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn danger"
|
||||
aria-label={`Close pi ${session.name ?? session.id}`}
|
||||
onClick={() => void closePi()}
|
||||
>
|
||||
■ close
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="task-toggle icon-btn"
|
||||
aria-expanded={tasksOpen}
|
||||
aria-label="Toggle task panel"
|
||||
onClick={() => setTasksOpen(!tasksOpen)}
|
||||
>
|
||||
☰ tasks
|
||||
</button>
|
||||
</div>
|
||||
{tasksOpen && (
|
||||
<div className="mobile-tasks">
|
||||
<TaskPanel tasks={tasks} />
|
||||
</div>
|
||||
)}
|
||||
{loadError.length > 0 ? (
|
||||
<div className="page">
|
||||
<p className="empty">Failed to load history: {loadError}</p>
|
||||
<Link to="/">Back to sessions</Link>
|
||||
</div>
|
||||
) : (
|
||||
<ChatStream
|
||||
messages={chat.messages}
|
||||
tools={chat.tools}
|
||||
busy={chat.busy}
|
||||
/>
|
||||
)}
|
||||
<div className="composer">
|
||||
<div className="composer-inner">
|
||||
<textarea
|
||||
ref={taRef}
|
||||
rows={1}
|
||||
value={draft}
|
||||
placeholder="Message…"
|
||||
aria-label="Message"
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
{chat.busy ? (
|
||||
<button
|
||||
type="button"
|
||||
className="abort-btn"
|
||||
aria-label="Abort current run"
|
||||
onClick={() => void abort()}
|
||||
>
|
||||
■ stop
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="send-btn"
|
||||
aria-label="Send message"
|
||||
disabled={draft.trim().length === 0 || sending}
|
||||
onClick={() => void send()}
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside className="task-col" aria-label="Task panel">
|
||||
<TaskPanel tasks={tasks} />
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+82
-69
@@ -6,79 +6,92 @@ import { fetchJson } from "./api";
|
||||
import { classNames, relativeTime } from "./store";
|
||||
|
||||
interface Props {
|
||||
sessions: SessionListItem[];
|
||||
onChanged: () => void;
|
||||
pushToast: (text: string) => void;
|
||||
sessions: SessionListItem[];
|
||||
onChanged: () => void;
|
||||
pushToast: (text: string) => void;
|
||||
}
|
||||
|
||||
export default function SessionsView({ sessions, onChanged, pushToast }: Props) {
|
||||
const navigate = useNavigate();
|
||||
export default function SessionsView({
|
||||
sessions,
|
||||
onChanged,
|
||||
pushToast,
|
||||
}: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const open = useCallback((id: string): void => {
|
||||
navigate(`/s/${id}`);
|
||||
}, [navigate]);
|
||||
const open = useCallback(
|
||||
(id: string): void => {
|
||||
navigate(`/s/${id}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const stop = async (e: MouseEvent, s: SessionListItem): Promise<void> => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await fetchJson(Route.SessionContainer(s.id), { method: "DELETE" });
|
||||
pushToast(`stopped ${s.name ?? s.id}`);
|
||||
onChanged();
|
||||
} catch (err) {
|
||||
pushToast(`stop failed: ${err instanceof Error ? err.message : String(err)}`);
|
||||
}
|
||||
};
|
||||
const stop = async (e: MouseEvent, s: SessionListItem): Promise<void> => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await fetchJson(Route.SessionContainer(s.id), { method: "DELETE" });
|
||||
pushToast(`stopped ${s.name ?? s.id}`);
|
||||
onChanged();
|
||||
} catch (err) {
|
||||
pushToast(
|
||||
`stop failed: ${err instanceof Error ? err.message : String(err)}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Only active (online) pi sessions are shown; offline transcripts stay
|
||||
// reachable by direct URL and are dropped from the default list.
|
||||
const sorted = [...sessions]
|
||||
.filter((s) => s.online)
|
||||
.sort((a, b) => (b.lastEventAt ?? b.startedAt) - (a.lastEventAt ?? a.startedAt));
|
||||
// Only active (online) pi sessions are shown; offline transcripts stay
|
||||
// reachable by direct URL and are dropped from the default list.
|
||||
const sorted = [...sessions]
|
||||
.filter((s) => s.online)
|
||||
.sort(
|
||||
(a, b) => (b.lastEventAt ?? b.startedAt) - (a.lastEventAt ?? a.startedAt),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>Active sessions</h1>
|
||||
{sorted.length === 0 && <p className="empty">No active sessions. Spawn one from the sidebar.</p>}
|
||||
{sorted.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className="session-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Open session ${s.name ?? s.id}`}
|
||||
onClick={() => open(s.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") open(s.id);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={classNames("online-dot", s.online && "on")}
|
||||
title={s.online ? "online" : "offline"}
|
||||
/>
|
||||
<span className="card-body">
|
||||
<span className="card-title" style={{ display: "block" }}>
|
||||
{s.name ?? s.repo ?? s.cwd}
|
||||
</span>
|
||||
<span className="card-meta" style={{ display: "flex" }}>
|
||||
{s.repo !== null && <span>{s.repo}</span>}
|
||||
<span>{s.model}</span>
|
||||
<span>{relativeTime(s.lastEventAt)}</span>
|
||||
</span>
|
||||
</span>
|
||||
{s.agent && <span className="badge">agent</span>}
|
||||
{s.agent && (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn danger"
|
||||
aria-label={`Stop container for ${s.name ?? s.id}`}
|
||||
onClick={(e) => void stop(e, s)}
|
||||
>
|
||||
◼
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>Active sessions</h1>
|
||||
{sorted.length === 0 && (
|
||||
<p className="empty">No active sessions. Spawn one from the sidebar.</p>
|
||||
)}
|
||||
{sorted.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className="session-card"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Open session ${s.name ?? s.id}`}
|
||||
onClick={() => open(s.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") open(s.id);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={classNames("online-dot", s.online && "on")}
|
||||
title={s.online ? "online" : "offline"}
|
||||
/>
|
||||
<span className="card-body">
|
||||
<span className="card-title" style={{ display: "block" }}>
|
||||
{s.name ?? s.repo ?? s.cwd}
|
||||
</span>
|
||||
<span className="card-meta" style={{ display: "flex" }}>
|
||||
{s.repo !== null && <span>{s.repo}</span>}
|
||||
<span>{s.model}</span>
|
||||
<span>{relativeTime(s.lastEventAt)}</span>
|
||||
</span>
|
||||
</span>
|
||||
{s.agent && <span className="badge">agent</span>}
|
||||
{s.agent && (
|
||||
<button
|
||||
type="button"
|
||||
className="icon-btn danger"
|
||||
aria-label={`Stop container for ${s.name ?? s.id}`}
|
||||
onClick={(e) => void stop(e, s)}
|
||||
>
|
||||
◼
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user