feat(rpc): add validated desktop Pi RPC command palette
This commit is contained in:
+247
-5
@@ -448,8 +448,18 @@ select:focus-visible {
|
||||
}
|
||||
.message.assistant {
|
||||
margin-right: 12px;
|
||||
border-color: #505050;
|
||||
background: #353535;
|
||||
border-color: #496983;
|
||||
background: #253544;
|
||||
}
|
||||
.message.tool,
|
||||
.message.toolResult {
|
||||
margin-right: 12px;
|
||||
border-color: #2d8372;
|
||||
background: #193936;
|
||||
}
|
||||
.message.error {
|
||||
border-color: #bf6570;
|
||||
background: #44282d;
|
||||
}
|
||||
.message strong {
|
||||
display: block;
|
||||
@@ -461,6 +471,16 @@ select:focus-visible {
|
||||
.message.user strong {
|
||||
color: #ffc170;
|
||||
}
|
||||
.message.assistant strong {
|
||||
color: #b9d9ff;
|
||||
}
|
||||
.message.tool strong,
|
||||
.message.toolResult strong {
|
||||
color: #a9f2df;
|
||||
}
|
||||
.message.error strong {
|
||||
color: #ffd7db;
|
||||
}
|
||||
.message pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
@@ -469,6 +489,30 @@ select:focus-visible {
|
||||
font-size: 13px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
.tool-result summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
color: #a9f2df;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tool-result summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.tool-result summary::after {
|
||||
content: "▾";
|
||||
font-size: 14px;
|
||||
}
|
||||
.tool-result[open] summary::after {
|
||||
content: "▴";
|
||||
}
|
||||
.tool-result[open] summary {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pending-message {
|
||||
border-style: dashed;
|
||||
}
|
||||
@@ -529,6 +573,34 @@ select:focus-visible {
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
.pi-controls select {
|
||||
min-width: 0;
|
||||
appearance: none;
|
||||
color-scheme: dark;
|
||||
padding: 5px 25px 5px 6px;
|
||||
border: 1px solid #70522f;
|
||||
border-radius: 4px;
|
||||
background: #2c2a27
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f0a347' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E")
|
||||
no-repeat right 7px center;
|
||||
color: #f2ece4;
|
||||
}
|
||||
.pi-controls select:hover {
|
||||
border-color: #d88735;
|
||||
background-color: #383129;
|
||||
}
|
||||
.pi-controls select:focus {
|
||||
border-color: #f0a347;
|
||||
box-shadow: 0 0 0 2px rgba(240, 163, 71, 0.22);
|
||||
}
|
||||
.pi-controls select option {
|
||||
background: #2c2a27;
|
||||
color: #f2ece4;
|
||||
}
|
||||
.pi-controls select option:checked {
|
||||
background: #4b3420;
|
||||
color: #fff2df;
|
||||
}
|
||||
.composer-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -582,12 +654,94 @@ select:focus-visible {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
.default-worktree-control {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin: 8px 0;
|
||||
color: #ddd8d0;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.default-worktree-control select {
|
||||
min-width: 0;
|
||||
appearance: none;
|
||||
color-scheme: dark;
|
||||
padding: 5px 28px 5px 7px;
|
||||
border: 1px solid #70522f;
|
||||
border-radius: 4px;
|
||||
background: #2c2a27
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f0a347' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E")
|
||||
no-repeat right 8px center;
|
||||
color: #f2ece4;
|
||||
}
|
||||
.default-worktree-control select:hover {
|
||||
border-color: #d88735;
|
||||
background-color: #383129;
|
||||
}
|
||||
.default-worktree-control select:focus {
|
||||
border-color: #f0a347;
|
||||
box-shadow: 0 0 0 2px rgba(240, 163, 71, 0.22);
|
||||
}
|
||||
.default-worktree-control option {
|
||||
background: #2c2a27;
|
||||
color: #f2ece4;
|
||||
}
|
||||
.default-worktree-control option:checked {
|
||||
background: #4b3420;
|
||||
color: #fff2df;
|
||||
}
|
||||
.default-worktree-control small {
|
||||
color: #b9afa4;
|
||||
font-weight: 400;
|
||||
}
|
||||
.extension-widget {
|
||||
padding: 5px 8px;
|
||||
border-left: 3px solid #f0a347;
|
||||
background: #302a24;
|
||||
font-size: 12px;
|
||||
}
|
||||
.startup-blocker {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
background: rgba(20, 18, 16, 0.82);
|
||||
backdrop-filter: blur(3px);
|
||||
outline: 0;
|
||||
}
|
||||
.startup-blocker-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: min(380px, 90vw);
|
||||
padding: 16px;
|
||||
border: 1px solid #f0a347;
|
||||
border-radius: 8px;
|
||||
background: #33271d;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
|
||||
color: #ffd9aa;
|
||||
}
|
||||
.startup-blocker-card > div {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
.startup-blocker-card strong {
|
||||
color: #fff2df;
|
||||
font-size: 14px;
|
||||
}
|
||||
.startup-blocker-card p {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.startup-blocker-card small {
|
||||
color: #d8b892;
|
||||
}
|
||||
.startup-bars {
|
||||
flex: 0 0 auto;
|
||||
transform: scale(1.35);
|
||||
}
|
||||
.modal-backdrop,
|
||||
.extension-backdrop {
|
||||
position: absolute;
|
||||
@@ -611,6 +765,9 @@ select:focus-visible {
|
||||
border-radius: 10px;
|
||||
background: #2d2e31;
|
||||
}
|
||||
.session-picker {
|
||||
overflow: hidden;
|
||||
}
|
||||
.picker-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -619,20 +776,105 @@ select:focus-visible {
|
||||
.extension h2 {
|
||||
margin: 0;
|
||||
}
|
||||
.session-search input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #5f6570;
|
||||
border-radius: 6px;
|
||||
background: #202125;
|
||||
color: #f1f3f4;
|
||||
}
|
||||
.session-result-count {
|
||||
margin: 0;
|
||||
color: #8d97a6;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.session-list {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
gap: 6px;
|
||||
max-height: min(44vh, 430px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
.session-list button {
|
||||
.session-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
border: 1px solid #474b54;
|
||||
border-radius: 7px;
|
||||
background: #25262a;
|
||||
text-align: left;
|
||||
}
|
||||
.session-list small {
|
||||
.session-row:hover {
|
||||
border-color: #b76f26;
|
||||
background: #303136;
|
||||
}
|
||||
.session-row-content {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 3px;
|
||||
}
|
||||
.session-preview,
|
||||
.session-metadata {
|
||||
overflow: hidden;
|
||||
color: #a7afbc;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.session-metadata {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
color: #8d97a6;
|
||||
}
|
||||
.session-open {
|
||||
flex: 0 0 auto;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: #234a33;
|
||||
color: #a5e3bc;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.extension-eyebrow,
|
||||
.extension-request-label,
|
||||
.extension-request-action,
|
||||
.extension-request-details {
|
||||
margin: 0;
|
||||
}
|
||||
.extension-eyebrow,
|
||||
.extension-request-label {
|
||||
color: #b9afa4;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.extension-request {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
border-left: 3px solid #f0a347;
|
||||
border-radius: 4px;
|
||||
background: #25262a;
|
||||
}
|
||||
.extension-request-action {
|
||||
color: #fff3df;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
.extension-request-details {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.extension-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
}
|
||||
.extension textarea {
|
||||
|
||||
+144
-20
@@ -6,6 +6,8 @@ import "./App.css";
|
||||
import { ConversationWorkspace } from "./components/ConversationWorkspace";
|
||||
import { DirectorySidebar } from "./components/DirectorySidebar";
|
||||
import { ExtensionDialog } from "./components/ExtensionDialog";
|
||||
import { CommandFormDialog } from "./components/CommandFormDialog";
|
||||
import type { RpcCommand } from "./commands/rpc";
|
||||
import { SessionPicker } from "./components/SessionPicker";
|
||||
import { SessionTabs } from "./components/SessionTabs";
|
||||
import type {
|
||||
@@ -37,6 +39,7 @@ type LocalOperation = {
|
||||
export default function App() {
|
||||
const { state, dispatch, refresh, loadSnapshot } = useWorkspace();
|
||||
const [status, setStatus] = useState("Connecting to Pi Status Bridge…");
|
||||
const [commandForm, setCommandForm] = useState<RpcCommand | undefined>();
|
||||
const [view, setView] = useState<"conversation" | "settings">("conversation");
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [folderPath, setFolderPath] = useState("");
|
||||
@@ -64,6 +67,7 @@ export default function App() {
|
||||
const mountedRef = useRef(true);
|
||||
const operationSequence = useRef(0);
|
||||
const [operation, setOperation] = useState<LocalOperation | undefined>();
|
||||
const [abortingRuntimeId, setAbortingRuntimeId] = useState<string>();
|
||||
const [restoreTabFocus, setRestoreTabFocus] = useState(false);
|
||||
const startOperation = (
|
||||
kind: LocalOperation["kind"],
|
||||
@@ -99,6 +103,14 @@ export default function App() {
|
||||
);
|
||||
}, [selected, dispatch, operation]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
abortingRuntimeId &&
|
||||
state.runtimesById[abortingRuntimeId]?.summary.state !== "streaming"
|
||||
)
|
||||
setAbortingRuntimeId(undefined);
|
||||
}, [abortingRuntimeId, state.runtimesById]);
|
||||
|
||||
async function createRuntime(path = state.selectedDirectoryPath) {
|
||||
if (!path || !mountedRef.current) return;
|
||||
const operationId = startOperation(
|
||||
@@ -292,9 +304,13 @@ export default function App() {
|
||||
}
|
||||
const runtimeId = selected.summary.runtimeId,
|
||||
id = ++submissionId,
|
||||
initialDelivery =
|
||||
selected.summary.state === "streaming" ? "follow_up" : "prompt",
|
||||
operationId = startOperation(
|
||||
"submitting",
|
||||
"Sending prompt to Pi…",
|
||||
initialDelivery === "follow_up"
|
||||
? "Queueing follow-up…"
|
||||
: "Sending prompt to Pi…",
|
||||
selected.summary.runtimeId,
|
||||
);
|
||||
dispatch({
|
||||
@@ -307,24 +323,49 @@ export default function App() {
|
||||
(message) => message.role === "user",
|
||||
).length,
|
||||
phase: "sending",
|
||||
delivery: initialDelivery,
|
||||
},
|
||||
});
|
||||
dispatch({ type: "draftChanged", runtimeId, draft: "" });
|
||||
const sent = await agentCommand(
|
||||
"submit_prompt",
|
||||
{ message: text },
|
||||
false,
|
||||
selected,
|
||||
false,
|
||||
);
|
||||
if (sent) {
|
||||
dispatch({ type: "submissionSent", runtimeId, id });
|
||||
setStatus("Prompt accepted · waiting for Pi…");
|
||||
} else {
|
||||
try {
|
||||
const result = await invoke<{ delivery?: "prompt" | "follow_up" }>(
|
||||
"submit_prompt",
|
||||
{ agentId: selected.summary.agentId, message: text },
|
||||
);
|
||||
const delivery = result.delivery ?? initialDelivery;
|
||||
dispatch({ type: "submissionSent", runtimeId, id, delivery });
|
||||
setStatus(
|
||||
delivery === "follow_up"
|
||||
? "Follow-up queued · waiting for Pi…"
|
||||
: "Prompt accepted · waiting for Pi…",
|
||||
);
|
||||
} catch (error) {
|
||||
setStatus(`Pi command failed: ${String(error)}`);
|
||||
dispatch({ type: "submissionRemoved", runtimeId, id });
|
||||
dispatch({ type: "draftChanged", runtimeId, draft: text });
|
||||
} finally {
|
||||
finishOperation(operationId);
|
||||
}
|
||||
finishOperation(operationId);
|
||||
}
|
||||
async function abortSelected() {
|
||||
const target = selected;
|
||||
if (!target?.summary.agentId) return;
|
||||
setAbortingRuntimeId(target.summary.runtimeId);
|
||||
setStatus("Aborting Pi…");
|
||||
try {
|
||||
await invoke("abort", { agentId: target.summary.agentId });
|
||||
} catch (error) {
|
||||
setStatus(`Pi command failed: ${String(error)}`);
|
||||
setAbortingRuntimeId(undefined);
|
||||
}
|
||||
}
|
||||
async function runRpcCommand(
|
||||
command: RpcCommand,
|
||||
input: Record<string, unknown> = {},
|
||||
) {
|
||||
if (!selected) return;
|
||||
await agentCommand("pi_rpc_command", { command: command.command, input });
|
||||
setCommandForm(undefined);
|
||||
}
|
||||
async function respond(response: Record<string, unknown>) {
|
||||
const target = selected;
|
||||
@@ -342,10 +383,15 @@ export default function App() {
|
||||
const pendingSubmission = pendingSubmissions[pendingSubmissions.length - 1];
|
||||
const displayedStatus =
|
||||
operation?.detail ??
|
||||
state.newSessionLaunch?.detail ??
|
||||
(pendingSubmission
|
||||
? pendingSubmission.phase === "sending"
|
||||
? "Sending prompt to Pi…"
|
||||
: "Prompt accepted · waiting for Pi…"
|
||||
? pendingSubmission.delivery === "follow_up"
|
||||
? "Queueing follow-up…"
|
||||
: "Sending prompt to Pi…"
|
||||
: pendingSubmission.delivery === "follow_up"
|
||||
? "Follow-up queued · waiting for Pi…"
|
||||
: "Prompt accepted · waiting for Pi…"
|
||||
: undefined) ??
|
||||
(selected?.progress.phase === "working" ||
|
||||
selected?.progress.phase === "recovering"
|
||||
@@ -353,11 +399,19 @@ export default function App() {
|
||||
: undefined) ??
|
||||
status;
|
||||
const isWorking =
|
||||
state.newSessionLaunch?.phase === "starting" ||
|
||||
selected?.progress.phase === "working" ||
|
||||
selected?.progress.phase === "recovering";
|
||||
const isStartingSession =
|
||||
state.newSessionLaunch?.phase === "starting" ||
|
||||
operation?.kind === "creating";
|
||||
const sameDirectoryCollision = directory && directory.openCount > 1;
|
||||
return (
|
||||
<main className="app-shell" style={{ zoom: state.interfaceScale }}>
|
||||
<main
|
||||
className="app-shell"
|
||||
style={{ zoom: state.interfaceScale }}
|
||||
aria-busy={isStartingSession}
|
||||
>
|
||||
<header
|
||||
className="workflow-header"
|
||||
onMouseDown={(event) => {
|
||||
@@ -379,15 +433,21 @@ export default function App() {
|
||||
{isWorking && (
|
||||
<span className="working-pulse" aria-hidden="true" />
|
||||
)}
|
||||
{isWorking ? "Working" : selected.summary.state}
|
||||
{state.newSessionLaunch?.phase === "starting"
|
||||
? "Starting"
|
||||
: isWorking
|
||||
? "Working"
|
||||
: selected.summary.state}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="status-row">
|
||||
{isWorking && (
|
||||
<span className="working-banner" role="status">
|
||||
<span className="working-pulse" aria-hidden="true" /> Pi is
|
||||
working
|
||||
<span className="working-pulse" aria-hidden="true" />{" "}
|
||||
{state.newSessionLaunch?.phase === "starting"
|
||||
? "Starting new session"
|
||||
: "Pi is working"}
|
||||
</span>
|
||||
)}
|
||||
<span role="status" aria-live="polite">
|
||||
@@ -503,6 +563,29 @@ export default function App() {
|
||||
{view === "settings" ? (
|
||||
<section className="settings">
|
||||
<h2>Session controls</h2>
|
||||
<label className="default-worktree-control">
|
||||
Default new-session directory
|
||||
<select
|
||||
value={state.defaultNewSessionWorktree ?? ""}
|
||||
onChange={(event) =>
|
||||
dispatch({
|
||||
type: "setDefaultNewSessionWorktree",
|
||||
worktreePath: event.currentTarget.value || undefined,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">Use system default</option>
|
||||
{state.directoryOrder.map((path) => (
|
||||
<option key={path} value={path}>
|
||||
{path}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<small>
|
||||
Used by Ctrl+Super+Space. Only currently open directories are
|
||||
listed.
|
||||
</small>
|
||||
</label>
|
||||
{selected ? (
|
||||
<>
|
||||
<p>{selected.summary.worktreePath}</p>
|
||||
@@ -553,7 +636,7 @@ export default function App() {
|
||||
})
|
||||
}
|
||||
onSubmit={() => void submit()}
|
||||
onAbort={() => void agentCommand("abort")}
|
||||
onAbort={() => void abortSelected()}
|
||||
onScroll={(atBottom, scrollTop) => {
|
||||
dispatch({
|
||||
type: "scrollChanged",
|
||||
@@ -582,6 +665,12 @@ export default function App() {
|
||||
operation?.kind === "submitting" &&
|
||||
operation.runtimeId === selected.summary.runtimeId
|
||||
}
|
||||
isAborting={abortingRuntimeId === selected.summary.runtimeId}
|
||||
onCommand={(command) =>
|
||||
command.input?.length
|
||||
? setCommandForm(command)
|
||||
: void runRpcCommand(command)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<section className="empty-workspace">
|
||||
@@ -605,10 +694,45 @@ export default function App() {
|
||||
onClose={closePicker}
|
||||
/>
|
||||
)}
|
||||
<CommandFormDialog
|
||||
command={commandForm}
|
||||
onCancel={() => setCommandForm(undefined)}
|
||||
onSubmit={(input) =>
|
||||
commandForm && void runRpcCommand(commandForm, input)
|
||||
}
|
||||
/>
|
||||
<ExtensionDialog
|
||||
extension={selected?.extensions[0]}
|
||||
onRespond={(response) => void respond(response)}
|
||||
/>
|
||||
{isStartingSession && (
|
||||
<div
|
||||
className="startup-blocker"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="startup-blocker-title"
|
||||
tabIndex={-1}
|
||||
autoFocus
|
||||
>
|
||||
<div className="startup-blocker-card">
|
||||
<span className="working-bars startup-bars" aria-hidden="true">
|
||||
<i />
|
||||
<i />
|
||||
<i />
|
||||
</span>
|
||||
<div>
|
||||
<strong id="startup-blocker-title">Starting new session</strong>
|
||||
<p>
|
||||
{state.newSessionLaunch?.detail ??
|
||||
"Creating a fresh Pi runtime…"}
|
||||
</p>
|
||||
<small>
|
||||
Pi is loading its session and extensions. Please wait.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
export type RpcField = {
|
||||
name: string;
|
||||
label: string;
|
||||
kind: "text" | "path" | "boolean" | "enum" | "json";
|
||||
required?: boolean;
|
||||
options?: string[];
|
||||
};
|
||||
|
||||
export type RpcCommand = {
|
||||
command: string;
|
||||
category:
|
||||
| "Prompting"
|
||||
| "Session"
|
||||
| "Model & Thinking"
|
||||
| "Queue"
|
||||
| "Context & Retry"
|
||||
| "Shell"
|
||||
| "Inspection & Export";
|
||||
description: string;
|
||||
input?: RpcField[];
|
||||
};
|
||||
|
||||
const text = (name: string, required = true): RpcField => ({
|
||||
name,
|
||||
label: name,
|
||||
kind: "text",
|
||||
required,
|
||||
});
|
||||
const path = (name: string, required = true): RpcField => ({
|
||||
name,
|
||||
label: name,
|
||||
kind: "path",
|
||||
required,
|
||||
});
|
||||
const boolean = (name: string): RpcField => ({
|
||||
name,
|
||||
label: name,
|
||||
kind: "boolean",
|
||||
required: true,
|
||||
});
|
||||
const enumField = (name: string, options: string[]): RpcField => ({
|
||||
name,
|
||||
label: name,
|
||||
kind: "enum",
|
||||
options,
|
||||
required: true,
|
||||
});
|
||||
const json = (name: string): RpcField => ({ name, label: name, kind: "json" });
|
||||
|
||||
const define = (
|
||||
category: RpcCommand["category"],
|
||||
commands: Array<[string, string, RpcField[]?]>,
|
||||
) =>
|
||||
commands.map(([command, description, input]) => ({
|
||||
command,
|
||||
category,
|
||||
description,
|
||||
...(input ? { input } : {}),
|
||||
}));
|
||||
|
||||
export const rpcCommandCatalog: RpcCommand[] = [
|
||||
...define("Prompting", [
|
||||
[
|
||||
"prompt",
|
||||
"Send a prompt",
|
||||
[
|
||||
text("message"),
|
||||
json("images"),
|
||||
enumField("streamingBehavior", ["steer", "followUp"]),
|
||||
],
|
||||
],
|
||||
["steer", "Queue a steering message", [text("message"), json("images")]],
|
||||
[
|
||||
"follow_up",
|
||||
"Queue a follow-up message",
|
||||
[text("message"), json("images")],
|
||||
],
|
||||
["abort", "Abort the agent"],
|
||||
]),
|
||||
...define("Session", [
|
||||
["new_session", "Start a new session", [path("parentSession", false)]],
|
||||
["switch_session", "Switch session", [path("sessionPath")]],
|
||||
["fork", "Fork from a message", [text("entryId")]],
|
||||
["clone", "Clone the active branch"],
|
||||
["set_session_name", "Set session name", [text("name")]],
|
||||
["get_fork_messages", "List forkable messages"],
|
||||
["get_entries", "Read session entries", [text("since", false)]],
|
||||
["get_tree", "Read session tree"],
|
||||
["get_state", "Read session state"],
|
||||
["get_messages", "Read messages"],
|
||||
["get_last_assistant_text", "Read last assistant text"],
|
||||
]),
|
||||
...define("Model & Thinking", [
|
||||
["get_available_models", "List models"],
|
||||
["set_model", "Select model", [text("provider"), text("modelId")]],
|
||||
["cycle_model", "Cycle model"],
|
||||
[
|
||||
"set_thinking_level",
|
||||
"Set thinking level",
|
||||
[
|
||||
enumField("level", [
|
||||
"off",
|
||||
"minimal",
|
||||
"low",
|
||||
"medium",
|
||||
"high",
|
||||
"xhigh",
|
||||
"max",
|
||||
]),
|
||||
],
|
||||
],
|
||||
["cycle_thinking_level", "Cycle thinking level"],
|
||||
]),
|
||||
...define("Queue", [
|
||||
[
|
||||
"set_steering_mode",
|
||||
"Set steering delivery",
|
||||
[enumField("mode", ["all", "one-at-a-time"])],
|
||||
],
|
||||
[
|
||||
"set_follow_up_mode",
|
||||
"Set follow-up delivery",
|
||||
[enumField("mode", ["all", "one-at-a-time"])],
|
||||
],
|
||||
]),
|
||||
...define("Context & Retry", [
|
||||
["compact", "Compact context", [text("customInstructions", false)]],
|
||||
["set_auto_compaction", "Set automatic compaction", [boolean("enabled")]],
|
||||
["set_auto_retry", "Set automatic retry", [boolean("enabled")]],
|
||||
["abort_retry", "Abort retry"],
|
||||
]),
|
||||
...define("Shell", [
|
||||
["bash", "Run shell command", [text("command")]],
|
||||
["abort_bash", "Abort shell command"],
|
||||
]),
|
||||
...define("Inspection & Export", [
|
||||
["get_session_stats", "Read session statistics"],
|
||||
["export_html", "Export session HTML", [path("outputPath", false)]],
|
||||
["get_commands", "List Pi commands"],
|
||||
]),
|
||||
];
|
||||
@@ -0,0 +1,160 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { RpcCommand, RpcField } from "../commands/rpc";
|
||||
|
||||
const controls = (container: HTMLElement | null) =>
|
||||
Array.from(
|
||||
container?.querySelectorAll<HTMLElement>(
|
||||
"button, input, select, textarea",
|
||||
) ?? [],
|
||||
).filter((node) => !node.hasAttribute("disabled"));
|
||||
|
||||
function valueFor(field: RpcField, value: string | boolean): unknown {
|
||||
if (field.kind === "boolean") return value === true;
|
||||
if (field.kind === "json")
|
||||
return value ? JSON.parse(value as string) : undefined;
|
||||
return value || undefined;
|
||||
}
|
||||
|
||||
export function CommandFormDialog({
|
||||
command,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
}: {
|
||||
command?: RpcCommand;
|
||||
onSubmit: (input: Record<string, unknown>) => void;
|
||||
onCancel: () => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const opener = useRef<HTMLElement | null>(null);
|
||||
const [values, setValues] = useState<Record<string, string | boolean>>({});
|
||||
const [error, setError] = useState<string>();
|
||||
useEffect(() => {
|
||||
if (!command) return;
|
||||
opener.current = document.activeElement as HTMLElement | null;
|
||||
setValues({});
|
||||
setError(undefined);
|
||||
const frame = requestAnimationFrame(() =>
|
||||
controls(ref.current)[0]?.focus(),
|
||||
);
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
opener.current?.focus();
|
||||
};
|
||||
}, [command]);
|
||||
if (!command) return null;
|
||||
const fields = command.input ?? [];
|
||||
const submit = () => {
|
||||
try {
|
||||
const input: Record<string, unknown> = {};
|
||||
for (const field of fields) {
|
||||
const value = valueFor(
|
||||
field,
|
||||
values[field.name] ?? (field.kind === "boolean" ? false : ""),
|
||||
);
|
||||
if (field.required && (value === undefined || value === ""))
|
||||
throw new Error(`${field.label} is required`);
|
||||
if (value !== undefined) input[field.name] = value;
|
||||
}
|
||||
onSubmit(input);
|
||||
} catch (cause) {
|
||||
setError(cause instanceof Error ? cause.message : "Invalid input");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="extension-backdrop">
|
||||
<section
|
||||
ref={ref}
|
||||
className="extension"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="command-form-title"
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
if (event.key === "Tab") {
|
||||
const items = controls(ref.current),
|
||||
first = items[0],
|
||||
last = items[items.length - 1];
|
||||
if (!first || !last) return;
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<p className="extension-eyebrow">Pi RPC command</p>
|
||||
<h2 id="command-form-title">/{command.command}</h2>
|
||||
<p>{command.description}</p>
|
||||
{fields.map((field) => (
|
||||
<label key={field.name}>
|
||||
{field.label}
|
||||
{field.kind === "boolean" ? (
|
||||
<input
|
||||
aria-label={field.label}
|
||||
type="checkbox"
|
||||
checked={values[field.name] === true}
|
||||
onChange={(event) =>
|
||||
setValues({
|
||||
...values,
|
||||
[field.name]: event.currentTarget.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : field.kind === "enum" ? (
|
||||
<select
|
||||
aria-label={field.label}
|
||||
value={(values[field.name] as string) ?? ""}
|
||||
onChange={(event) =>
|
||||
setValues({
|
||||
...values,
|
||||
[field.name]: event.currentTarget.value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{field.options?.map((option) => (
|
||||
<option key={option}>{option}</option>
|
||||
))}
|
||||
</select>
|
||||
) : field.kind === "json" ? (
|
||||
<textarea
|
||||
aria-label={field.label}
|
||||
value={(values[field.name] as string) ?? ""}
|
||||
onChange={(event) =>
|
||||
setValues({
|
||||
...values,
|
||||
[field.name]: event.currentTarget.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
aria-label={field.label}
|
||||
value={(values[field.name] as string) ?? ""}
|
||||
onChange={(event) =>
|
||||
setValues({
|
||||
...values,
|
||||
[field.name]: event.currentTarget.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
{error && <p role="alert">{error}</p>}
|
||||
<div className="extension-options">
|
||||
<button onClick={submit}>Run command</button>
|
||||
<button className="quiet" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { RpcCommand } from "../commands/rpc";
|
||||
|
||||
export function CommandPalette({
|
||||
draft,
|
||||
commands,
|
||||
onSelect,
|
||||
}: {
|
||||
draft: string;
|
||||
commands: RpcCommand[];
|
||||
onSelect: (command: RpcCommand) => void;
|
||||
}) {
|
||||
const [active, setActive] = useState(0);
|
||||
const query = draft.startsWith("/") ? draft.slice(1).toLowerCase() : "";
|
||||
const matches = draft.startsWith("/")
|
||||
? commands.filter((command) =>
|
||||
`${command.command} ${command.category} ${command.description}`
|
||||
.toLowerCase()
|
||||
.includes(query),
|
||||
)
|
||||
: [];
|
||||
useEffect(() => setActive(0), [draft]);
|
||||
useEffect(() => {
|
||||
const keydown = (event: KeyboardEvent) => {
|
||||
if (!matches.length) return;
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
setActive((current) => (current + 1) % matches.length);
|
||||
}
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
setActive((current) => (current - 1 + matches.length) % matches.length);
|
||||
}
|
||||
if (
|
||||
event.key === "Enter" &&
|
||||
document.activeElement?.getAttribute("aria-label") === "Prompt"
|
||||
) {
|
||||
event.preventDefault();
|
||||
onSelect(matches[active]);
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", keydown);
|
||||
return () => window.removeEventListener("keydown", keydown);
|
||||
}, [active, matches, onSelect]);
|
||||
if (!draft.startsWith("/")) return null;
|
||||
return (
|
||||
<section className="command-palette" aria-label="Pi RPC commands">
|
||||
{matches.map((command, index) => (
|
||||
<button
|
||||
key={command.command}
|
||||
className={index === active ? "active" : ""}
|
||||
onClick={() => onSelect(command)}
|
||||
onMouseEnter={() => setActive(index)}
|
||||
>
|
||||
<strong>/{command.command}</strong>
|
||||
<span>
|
||||
{command.category} · {command.description}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{matches.length === 0 && <p className="muted">No RPC commands match.</p>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import type { Model, RuntimeView, TodoTask } from "../workspace/types";
|
||||
import { rpcCommandCatalog, type RpcCommand } from "../commands/rpc";
|
||||
import { CommandPalette } from "./CommandPalette";
|
||||
|
||||
export function messageText(message: RuntimeView["messages"][number]) {
|
||||
if (typeof message.content === "string") return message.content;
|
||||
@@ -13,6 +15,39 @@ export function messageText(message: RuntimeView["messages"][number]) {
|
||||
.filter(Boolean)
|
||||
.join("\n");
|
||||
}
|
||||
function TranscriptMessage({
|
||||
message,
|
||||
}: {
|
||||
message: RuntimeView["messages"][number];
|
||||
}) {
|
||||
const role = message.role ?? "system";
|
||||
if (role === "toolResult")
|
||||
return (
|
||||
<article className={`message ${role}`}>
|
||||
<details className="tool-result">
|
||||
<summary>Tool result · {message.toolName ?? "tool"}</summary>
|
||||
<pre>{messageText(message)}</pre>
|
||||
</details>
|
||||
</article>
|
||||
);
|
||||
return (
|
||||
<article className={`message ${role}`}>
|
||||
<strong>{message.role ?? "message"}</strong>
|
||||
<pre>{messageText(message)}</pre>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function pendingStatus(pending: RuntimeView["pendingSubmissions"][number]) {
|
||||
if (pending.phase === "sending")
|
||||
return pending.delivery === "follow_up"
|
||||
? "Queueing follow-up…"
|
||||
: "Sending prompt…";
|
||||
return pending.delivery === "follow_up"
|
||||
? "Follow-up queued · waiting for Pi"
|
||||
: "Prompt accepted · waiting for Pi";
|
||||
}
|
||||
|
||||
function todos(messages: RuntimeView["messages"]) {
|
||||
const order: Record<TodoTask["status"], number> = {
|
||||
in_progress: 0,
|
||||
@@ -41,6 +76,8 @@ export function ConversationWorkspace({
|
||||
onModel,
|
||||
onThinking,
|
||||
isSubmitting = false,
|
||||
isAborting = false,
|
||||
onCommand,
|
||||
}: {
|
||||
runtime: RuntimeView;
|
||||
onDraft: (value: string) => void;
|
||||
@@ -50,13 +87,16 @@ export function ConversationWorkspace({
|
||||
onModel: (model: Model) => void;
|
||||
onThinking: (level: string) => void;
|
||||
isSubmitting?: boolean;
|
||||
isAborting?: boolean;
|
||||
onCommand: (command: RpcCommand) => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const tasks = useMemo(() => todos(runtime.messages), [runtime.messages]);
|
||||
const runtimeIsWorking =
|
||||
runtime.summary.state === "streaming" ||
|
||||
runtime.progress.phase === "working";
|
||||
const isWorking =
|
||||
isSubmitting ||
|
||||
runtime.progress.phase === "working" ||
|
||||
runtime.progress.phase === "recovering";
|
||||
isSubmitting || runtimeIsWorking || runtime.progress.phase === "recovering";
|
||||
useEffect(() => {
|
||||
if (runtime.scroll.atBottom && ref.current)
|
||||
ref.current.scrollTop = ref.current.scrollHeight;
|
||||
@@ -108,13 +148,7 @@ export function ConversationWorkspace({
|
||||
<p className="muted">No messages yet.</p>
|
||||
)}
|
||||
{runtime.messages.map((message, index) => (
|
||||
<article
|
||||
className={`message ${message.role ?? "system"}`}
|
||||
key={index}
|
||||
>
|
||||
<strong>{message.role ?? "message"}</strong>
|
||||
<pre>{messageText(message)}</pre>
|
||||
</article>
|
||||
<TranscriptMessage key={index} message={message} />
|
||||
))}
|
||||
{runtime.pendingSubmissions.map((pending) => (
|
||||
<article
|
||||
@@ -122,12 +156,7 @@ export function ConversationWorkspace({
|
||||
key={pending.id}
|
||||
>
|
||||
<strong>
|
||||
You{" "}
|
||||
<span>
|
||||
{pending.phase === "sending"
|
||||
? "Sending…"
|
||||
: "Sent · waiting for Pi"}
|
||||
</span>
|
||||
You <span>{pendingStatus(pending)}</span>
|
||||
</strong>
|
||||
<pre>{pending.text}</pre>
|
||||
</article>
|
||||
@@ -215,6 +244,11 @@ export function ConversationWorkspace({
|
||||
{runtime.progress.tool && <small>{runtime.progress.tool}</small>}
|
||||
</div>
|
||||
<div className="composer">
|
||||
<CommandPalette
|
||||
draft={runtime.draft}
|
||||
commands={rpcCommandCatalog}
|
||||
onSelect={onCommand}
|
||||
/>
|
||||
<textarea
|
||||
aria-label="Prompt"
|
||||
value={runtime.draft}
|
||||
@@ -229,9 +263,14 @@ export function ConversationWorkspace({
|
||||
placeholder="Ask Pi…"
|
||||
/>
|
||||
<div className="composer-actions">
|
||||
{runtime.state.isStreaming && (
|
||||
<button type="button" className="quiet" onClick={onAbort}>
|
||||
Abort
|
||||
{runtimeIsWorking && (
|
||||
<button
|
||||
type="button"
|
||||
className="quiet"
|
||||
disabled={isAborting}
|
||||
onClick={onAbort}
|
||||
>
|
||||
{isAborting ? "Aborting…" : "Abort"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
|
||||
@@ -2,57 +2,136 @@ import { useEffect, useRef, useState } from "react";
|
||||
import type { Extension } from "../workspace/types";
|
||||
|
||||
function controls(container: HTMLElement | null) {
|
||||
return [...(container?.querySelectorAll<HTMLElement>(
|
||||
'button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [href], [tabindex]:not([tabindex="-1"])',
|
||||
) ?? [])];
|
||||
return [
|
||||
...(container?.querySelectorAll<HTMLElement>(
|
||||
'button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [href], [tabindex]:not([tabindex="-1"])',
|
||||
) ?? []),
|
||||
];
|
||||
}
|
||||
|
||||
export function ExtensionDialog({ extension, onRespond }: { extension?: Extension; onRespond: (response: Record<string, unknown>) => void }) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const opener = useRef<HTMLElement | null>(null);
|
||||
const respond = useRef(onRespond);
|
||||
const [value, setValue] = useState("");
|
||||
respond.current = onRespond;
|
||||
export function ExtensionDialog({
|
||||
extension,
|
||||
onRespond,
|
||||
}: {
|
||||
extension?: Extension;
|
||||
onRespond: (response: Record<string, unknown>) => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const opener = useRef<HTMLElement | null>(null);
|
||||
const respond = useRef(onRespond);
|
||||
const [value, setValue] = useState("");
|
||||
respond.current = onRespond;
|
||||
|
||||
useEffect(() => {
|
||||
if (!extension) return;
|
||||
opener.current = document.activeElement as HTMLElement | null;
|
||||
setValue(extension.initialValue ?? extension.text ?? "");
|
||||
const frame = requestAnimationFrame(() => controls(ref.current)[0]?.focus());
|
||||
const keydown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
respond.current({ cancelled: true });
|
||||
return;
|
||||
}
|
||||
if (event.key !== "Tab") return;
|
||||
const focusable = controls(ref.current);
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (!first || !last) return;
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", keydown);
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
window.removeEventListener("keydown", keydown);
|
||||
opener.current?.focus();
|
||||
};
|
||||
}, [extension]);
|
||||
useEffect(() => {
|
||||
if (!extension) return;
|
||||
opener.current = document.activeElement as HTMLElement | null;
|
||||
setValue(
|
||||
extension.prefill ?? extension.initialValue ?? extension.text ?? "",
|
||||
);
|
||||
const frame = requestAnimationFrame(() =>
|
||||
controls(ref.current)[0]?.focus(),
|
||||
);
|
||||
const keydown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
respond.current({ cancelled: true });
|
||||
return;
|
||||
}
|
||||
if (event.key !== "Tab") return;
|
||||
const focusable = controls(ref.current);
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (!first || !last) return;
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", keydown);
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
window.removeEventListener("keydown", keydown);
|
||||
opener.current?.focus();
|
||||
};
|
||||
}, [extension]);
|
||||
|
||||
if (!extension) return null;
|
||||
return <div className="extension-backdrop"><section ref={ref} className="extension" role="dialog" aria-modal="true" aria-labelledby="extension-title">
|
||||
<h2 id="extension-title">{extension.title ?? "Pi needs input"}</h2>{extension.message && <p>{extension.message}</p>}
|
||||
{extension.method === "select" && <div className="extension-options">{extension.options?.map((option) => <button key={option} onClick={() => onRespond({ value: option })}>{option}</button>)}</div>}
|
||||
{extension.method === "confirm" && <div className="extension-options"><button onClick={() => onRespond({ confirmed: true })}>Confirm</button><button onClick={() => onRespond({ confirmed: false })}>Decline</button></div>}
|
||||
{extension.method === "input" && <><input aria-label="Extension value" value={value} placeholder={extension.placeholder} onChange={(event) => setValue(event.currentTarget.value)} /><button onClick={() => onRespond({ value })}>Submit</button></>}
|
||||
{extension.method === "editor" && <><textarea aria-label="Extension value" value={value} onChange={(event) => setValue(event.currentTarget.value)} /><button onClick={() => onRespond({ value })}>Submit</button></>}
|
||||
<button className="quiet" onClick={() => onRespond({ cancelled: true })}>Cancel</button>
|
||||
</section></div>;
|
||||
if (!extension) return null;
|
||||
return (
|
||||
<div className="extension-backdrop">
|
||||
<section
|
||||
ref={ref}
|
||||
className="extension"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="extension-title"
|
||||
>
|
||||
<p className="extension-eyebrow">Pi agent request</p>
|
||||
<h2 id="extension-title">Review request</h2>
|
||||
<div className="extension-request">
|
||||
<p className="extension-request-label">Requested action</p>
|
||||
<p className="extension-request-action">
|
||||
{extension.title ?? "Pi needs input"}
|
||||
</p>
|
||||
{extension.message && (
|
||||
<>
|
||||
<p className="extension-request-label">Request details</p>
|
||||
<p className="extension-request-details">{extension.message}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{extension.method === "select" && (
|
||||
<div className="extension-options">
|
||||
{extension.options?.map((option) => (
|
||||
<button key={option} onClick={() => onRespond({ value: option })}>
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{extension.method === "confirm" && (
|
||||
<div className="extension-options">
|
||||
<button onClick={() => onRespond({ confirmed: true })}>
|
||||
Allow request
|
||||
</button>
|
||||
<button
|
||||
className="quiet"
|
||||
onClick={() => onRespond({ confirmed: false })}
|
||||
>
|
||||
Decline request
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{extension.method === "input" && (
|
||||
<>
|
||||
<input
|
||||
aria-label="Extension value"
|
||||
value={value}
|
||||
placeholder={extension.placeholder}
|
||||
onChange={(event) => setValue(event.currentTarget.value)}
|
||||
/>
|
||||
<button onClick={() => onRespond({ value })}>Submit</button>
|
||||
</>
|
||||
)}
|
||||
{extension.method === "editor" && (
|
||||
<>
|
||||
<textarea
|
||||
aria-label="Extension value"
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.currentTarget.value)}
|
||||
/>
|
||||
<button onClick={() => onRespond({ value })}>Submit</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
className="quiet"
|
||||
onClick={() => onRespond({ cancelled: true })}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,27 +1,176 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { type RefObject, useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { DirectorySession } from "../workspace/types";
|
||||
export function SessionPicker({ sessions, onOpen, onClose }: { sessions: DirectorySession[]; onOpen: (session: DirectorySession) => void; onClose: () => void }) {
|
||||
const dialogRef = useRef<HTMLElement>(null);
|
||||
const openerRef = useRef<HTMLElement | null>(document.activeElement as HTMLElement | null);
|
||||
useEffect(() => {
|
||||
const dialog = dialogRef.current;
|
||||
const controls = () => [...(dialog?.querySelectorAll<HTMLElement>('button:not(:disabled), [href], [tabindex]:not([tabindex="-1"])') ?? [])];
|
||||
controls()[0]?.focus();
|
||||
const keydown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") { event.preventDefault(); onClose(); return; }
|
||||
if (event.key !== "Tab") return;
|
||||
const focusable = controls(); const first = focusable[0]; const last = focusable[focusable.length - 1];
|
||||
if (!first || !last) return;
|
||||
if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
|
||||
else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
|
||||
};
|
||||
window.addEventListener("keydown", keydown);
|
||||
return () => { window.removeEventListener("keydown", keydown); openerRef.current?.focus(); };
|
||||
}, [onClose]);
|
||||
return <div className="modal-backdrop"><section ref={dialogRef} className="session-picker" role="dialog" aria-modal="true" aria-labelledby="session-picker-title">
|
||||
<div className="picker-heading"><h2 id="session-picker-title">Saved sessions</h2><button onClick={onClose}>Close</button></div>
|
||||
{sessions.length ? <div className="session-list">{sessions.map((session) => <button key={session.path} onClick={() => onOpen(session)}>
|
||||
<span>{session.name ?? session.firstMessage ?? "Untitled session"}</span><small>{session.runtimeId ? "Already open" : `${session.messageCount} messages · ${new Date(session.modified).toLocaleDateString()}`}</small>
|
||||
</button>)}</div> : <p className="muted">No saved sessions for this directory.</p>}
|
||||
</section></div>;
|
||||
|
||||
const focusableSelector =
|
||||
'button:not(:disabled), input:not(:disabled), [href], [tabindex]:not([tabindex="-1"])';
|
||||
|
||||
function sessionTitle(session: DirectorySession) {
|
||||
return session.name ?? session.firstMessage ?? "Untitled session";
|
||||
}
|
||||
|
||||
function messageCountLabel(count: number) {
|
||||
return `${count} ${count === 1 ? "message" : "messages"}`;
|
||||
}
|
||||
|
||||
function matchesQuery(session: DirectorySession, query: string) {
|
||||
return [session.name, session.firstMessage, session.id].some((value) =>
|
||||
value?.toLocaleLowerCase().includes(query),
|
||||
);
|
||||
}
|
||||
|
||||
function SessionRow({
|
||||
session,
|
||||
onOpen,
|
||||
}: {
|
||||
session: DirectorySession;
|
||||
onOpen: (session: DirectorySession) => void;
|
||||
}) {
|
||||
const showPreview = Boolean(
|
||||
session.name &&
|
||||
session.firstMessage &&
|
||||
session.firstMessage !== session.name,
|
||||
);
|
||||
return (
|
||||
<li>
|
||||
<button className="session-row" onClick={() => onOpen(session)}>
|
||||
<span className="session-row-content">
|
||||
<strong>{sessionTitle(session)}</strong>
|
||||
{showPreview ? (
|
||||
<span className="session-preview">{session.firstMessage}</span>
|
||||
) : null}
|
||||
<small className="session-metadata">
|
||||
<span>{messageCountLabel(session.messageCount)}</span>
|
||||
<time dateTime={session.modified}>
|
||||
Modified {new Date(session.modified).toLocaleDateString()}
|
||||
</time>
|
||||
</small>
|
||||
</span>
|
||||
{session.runtimeId ? <span className="session-open">Open</span> : null}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function SessionResults({
|
||||
sessions,
|
||||
query,
|
||||
onOpen,
|
||||
}: {
|
||||
sessions: DirectorySession[];
|
||||
query: string;
|
||||
onOpen: (session: DirectorySession) => void;
|
||||
}) {
|
||||
if (sessions.length === 0)
|
||||
return <p className="muted">No saved sessions match “{query}”.</p>;
|
||||
return (
|
||||
<ul id="session-results" className="session-list">
|
||||
{sessions.map((session) => (
|
||||
<SessionRow key={session.path} session={session} onOpen={onOpen} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
function useDialogFocus(
|
||||
dialogRef: RefObject<HTMLElement | null>,
|
||||
searchRef: RefObject<HTMLInputElement | null>,
|
||||
onClose: () => void,
|
||||
) {
|
||||
const openerRef = useRef<HTMLElement | null>(
|
||||
document.activeElement as HTMLElement | null,
|
||||
);
|
||||
useEffect(() => {
|
||||
const dialog = dialogRef.current;
|
||||
const controls = () => [
|
||||
...(dialog?.querySelectorAll<HTMLElement>(focusableSelector) ?? []),
|
||||
];
|
||||
searchRef.current?.focus();
|
||||
const keydown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
if (event.key !== "Tab") return;
|
||||
const focusable = controls();
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (!first || !last) return;
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", keydown);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", keydown);
|
||||
openerRef.current?.focus();
|
||||
};
|
||||
}, [dialogRef, onClose, searchRef]);
|
||||
}
|
||||
|
||||
export function SessionPicker({
|
||||
sessions,
|
||||
onOpen,
|
||||
onClose,
|
||||
}: {
|
||||
sessions: DirectorySession[];
|
||||
onOpen: (session: DirectorySession) => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [query, setQuery] = useState("");
|
||||
const dialogRef = useRef<HTMLElement>(null);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
const normalizedQuery = query.trim().toLocaleLowerCase();
|
||||
const filteredSessions = useMemo(
|
||||
() => sessions.filter((session) => matchesQuery(session, normalizedQuery)),
|
||||
[normalizedQuery, sessions],
|
||||
);
|
||||
useDialogFocus(dialogRef, searchRef, onClose);
|
||||
const resultLabel = `${filteredSessions.length} saved session${filteredSessions.length === 1 ? "" : "s"}`;
|
||||
return (
|
||||
<div className="modal-backdrop">
|
||||
<section
|
||||
ref={dialogRef}
|
||||
className="session-picker"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="session-picker-title"
|
||||
>
|
||||
<div className="picker-heading">
|
||||
<h2 id="session-picker-title">Saved sessions</h2>
|
||||
<button onClick={onClose}>Close</button>
|
||||
</div>
|
||||
<div className="session-search">
|
||||
<label className="sr-only" htmlFor="session-search">
|
||||
Search saved sessions
|
||||
</label>
|
||||
<input
|
||||
ref={searchRef}
|
||||
id="session-search"
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search by name, message, or ID"
|
||||
aria-controls="session-results"
|
||||
/>
|
||||
</div>
|
||||
<p className="session-result-count" role="status" aria-live="polite">
|
||||
{sessions.length ? resultLabel : "No saved sessions"}
|
||||
</p>
|
||||
{sessions.length === 0 ? (
|
||||
<p className="muted">No saved sessions for this directory.</p>
|
||||
) : (
|
||||
<SessionResults
|
||||
sessions={filteredSessions}
|
||||
query={query}
|
||||
onOpen={onOpen}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,12 +4,14 @@ import { describe, expect, it, vi } from "vitest";
|
||||
import { DirectorySidebar } from "./DirectorySidebar";
|
||||
import { SessionTabs } from "./SessionTabs";
|
||||
import { SessionPicker } from "./SessionPicker";
|
||||
import { ConversationWorkspace } from "./ConversationWorkspace";
|
||||
import { ExtensionDialog } from "./ExtensionDialog";
|
||||
import {
|
||||
initialWorkspaceState,
|
||||
reconcileWorkspace,
|
||||
runtimeView,
|
||||
} from "../workspace/reducer";
|
||||
import type { Workspace } from "../workspace/types";
|
||||
import type { DirectorySession, Workspace } from "../workspace/types";
|
||||
const summary = (id: string, state = "idle") => ({
|
||||
runtimeId: id,
|
||||
worktreePath: "/repo",
|
||||
@@ -96,41 +98,172 @@ describe("multi-session navigation", () => {
|
||||
expect(screen.getByRole("tab", { name: /b/ })).toHaveFocus();
|
||||
expect(onFocusRestored).toHaveBeenCalled();
|
||||
});
|
||||
it("traps and restores focus for the saved-session picker", async () => {
|
||||
it("collapses a tool result until its summary is expanded", async () => {
|
||||
const user = userEvent.setup();
|
||||
const runtime = runtimeView(summary("tool-result"));
|
||||
runtime.messages = [
|
||||
{ role: "toolResult", toolName: "read", content: "Detailed tool output" },
|
||||
];
|
||||
const { container } = render(
|
||||
<ConversationWorkspace
|
||||
runtime={runtime}
|
||||
onDraft={vi.fn()}
|
||||
onSubmit={vi.fn()}
|
||||
onAbort={vi.fn()}
|
||||
onScroll={vi.fn()}
|
||||
onModel={vi.fn()}
|
||||
onThinking={vi.fn()}
|
||||
onCommand={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
const details = container.querySelector("details");
|
||||
expect(details).not.toHaveAttribute("open");
|
||||
await user.click(screen.getByText("Tool result · read"));
|
||||
expect(details).toHaveAttribute("open");
|
||||
});
|
||||
it("shows an aborting control and labels an accepted follow-up", () => {
|
||||
const runtime = runtimeView(summary("working", "streaming"));
|
||||
runtime.progress = {
|
||||
phase: "working",
|
||||
detail: "Thinking and preparing a response",
|
||||
toolCount: 0,
|
||||
};
|
||||
runtime.pendingSubmissions = [
|
||||
{
|
||||
id: 1,
|
||||
text: "Continue with the plan",
|
||||
userMessageCount: 0,
|
||||
phase: "sent",
|
||||
delivery: "follow_up",
|
||||
},
|
||||
];
|
||||
render(
|
||||
<ConversationWorkspace
|
||||
runtime={runtime}
|
||||
onDraft={vi.fn()}
|
||||
onSubmit={vi.fn()}
|
||||
onAbort={vi.fn()}
|
||||
onScroll={vi.fn()}
|
||||
onModel={vi.fn()}
|
||||
onThinking={vi.fn()}
|
||||
onCommand={vi.fn()}
|
||||
isAborting
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByRole("button", { name: "Aborting…" })).toBeDisabled();
|
||||
expect(
|
||||
screen.getByText("Follow-up queued · waiting for Pi"),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
it("searches saved sessions and displays useful metadata", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onOpen = vi.fn();
|
||||
const sessions: DirectorySession[] = [
|
||||
{
|
||||
path: "/planning",
|
||||
id: "plan-id",
|
||||
cwd: "/repo",
|
||||
name: "Planning",
|
||||
firstMessage: "Sketch the release plan",
|
||||
modified: "2026-08-15T10:00:00.000Z",
|
||||
messageCount: 1,
|
||||
runtimeId: "already-open",
|
||||
},
|
||||
{
|
||||
path: "/incident",
|
||||
id: "incident-42",
|
||||
cwd: "/repo",
|
||||
firstMessage: "Investigate search crash",
|
||||
modified: "2026-08-14T10:00:00.000Z",
|
||||
messageCount: 2,
|
||||
},
|
||||
];
|
||||
render(
|
||||
<SessionPicker sessions={sessions} onOpen={onOpen} onClose={vi.fn()} />,
|
||||
);
|
||||
const search = screen.getByRole("searchbox", {
|
||||
name: "Search saved sessions",
|
||||
});
|
||||
expect(screen.getByRole("status")).toHaveTextContent("2 saved sessions");
|
||||
expect(screen.getByText("Sketch the release plan")).toBeInTheDocument();
|
||||
expect(screen.getByText("1 message")).toBeInTheDocument();
|
||||
expect(screen.getByText("Open")).toBeInTheDocument();
|
||||
|
||||
await user.type(search, "release");
|
||||
expect(screen.getByRole("status")).toHaveTextContent("1 saved session");
|
||||
expect(
|
||||
screen.getByRole("button", { name: /Planning/ }),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: /Investigate/ })).toBeNull();
|
||||
await user.clear(search);
|
||||
await user.type(search, "INCIDENT-42");
|
||||
await user.click(screen.getByRole("button", { name: /Investigate/ }));
|
||||
expect(onOpen).toHaveBeenCalledWith(sessions[1]);
|
||||
await user.clear(search);
|
||||
await user.type(search, "missing");
|
||||
expect(screen.getByText(/No saved sessions match/)).toBeInTheDocument();
|
||||
});
|
||||
it("focuses search, traps focus, and restores the opener", async () => {
|
||||
const user = userEvent.setup();
|
||||
const opener = document.createElement("button");
|
||||
document.body.append(opener);
|
||||
opener.focus();
|
||||
const onClose = vi.fn();
|
||||
const { unmount } = render(
|
||||
<SessionPicker
|
||||
sessions={[
|
||||
{
|
||||
path: "/s",
|
||||
id: "s",
|
||||
cwd: "/repo",
|
||||
modified: new Date().toISOString(),
|
||||
messageCount: 0,
|
||||
},
|
||||
]}
|
||||
onOpen={vi.fn()}
|
||||
onClose={onClose}
|
||||
/>,
|
||||
<SessionPicker sessions={[]} onOpen={vi.fn()} onClose={onClose} />,
|
||||
);
|
||||
const search = screen.getByRole("searchbox", {
|
||||
name: "Search saved sessions",
|
||||
});
|
||||
const close = screen.getByRole("button", { name: "Close" });
|
||||
expect(search).toHaveFocus();
|
||||
await user.keyboard("{Shift>}{Tab}{/Shift}");
|
||||
expect(close).toHaveFocus();
|
||||
await user.keyboard("{Tab}");
|
||||
expect(
|
||||
screen.getByRole("button", { name: /Untitled session/ }),
|
||||
).toHaveFocus();
|
||||
await user.keyboard("{Tab}");
|
||||
expect(close).toHaveFocus();
|
||||
await user.keyboard("{Shift>}{Tab}{/Shift}");
|
||||
expect(search).toHaveFocus();
|
||||
await user.keyboard("{Escape}");
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
unmount();
|
||||
expect(opener).toHaveFocus();
|
||||
document.body.removeChild(opener);
|
||||
});
|
||||
it("labels permission requests with the action and exact details", async () => {
|
||||
const user = userEvent.setup();
|
||||
const onRespond = vi.fn();
|
||||
render(
|
||||
<ExtensionDialog
|
||||
extension={{
|
||||
method: "confirm",
|
||||
title: "Run a shell command",
|
||||
message:
|
||||
"rm -rf ./build\nThis removes the generated build directory.",
|
||||
}}
|
||||
onRespond={onRespond}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText("Pi agent request")).toBeInTheDocument();
|
||||
expect(screen.getByText("Requested action")).toBeInTheDocument();
|
||||
expect(screen.getByText("Run a shell command")).toBeInTheDocument();
|
||||
expect(screen.getByText("Request details")).toBeInTheDocument();
|
||||
expect(screen.getByText(/rm -rf .\/build/)).toBeInTheDocument();
|
||||
await user.click(screen.getByRole("button", { name: "Allow request" }));
|
||||
expect(onRespond).toHaveBeenCalledWith({ confirmed: true });
|
||||
});
|
||||
it("uses Pi editor prefill content", () => {
|
||||
render(
|
||||
<ExtensionDialog
|
||||
extension={{
|
||||
method: "editor",
|
||||
title: "Edit request",
|
||||
prefill: "Existing request",
|
||||
}}
|
||||
onRespond={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByLabelText("Extension value")).toHaveValue(
|
||||
"Existing request",
|
||||
);
|
||||
});
|
||||
it("routes new, saved-open, and close controls through callbacks", async () => {
|
||||
const onNew = vi.fn(),
|
||||
onResume = vi.fn(),
|
||||
|
||||
@@ -1,16 +1,73 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { legacyPreferences, removeLegacyPreferences, presentationState } from "./persistence";
|
||||
import { initialWorkspaceState, reconcileWorkspace, workspaceReducer } from "./reducer";
|
||||
import {
|
||||
legacyPreferences,
|
||||
removeLegacyPreferences,
|
||||
presentationState,
|
||||
} from "./persistence";
|
||||
import {
|
||||
initialWorkspaceState,
|
||||
reconcileWorkspace,
|
||||
workspaceReducer,
|
||||
} from "./reducer";
|
||||
import type { Workspace } from "./types";
|
||||
const workspace: Workspace = { bridgeInstanceId: "e", latestSeq: 7, directories: [{ worktreePath: "/repo", isHome: true, openCount: 1, workingCount: 0, attentionCount: 0, recoveringCount: 0, errorCount: 0, runtimes: [{ runtimeId: "r", worktreePath: "/repo", state: "idle", label: "r", attention: false, queueCount: 0, lastActivity: "now", openedAt: "now", agentId: "ephemeral" }] }] };
|
||||
const workspace: Workspace = {
|
||||
bridgeInstanceId: "e",
|
||||
latestSeq: 7,
|
||||
directories: [
|
||||
{
|
||||
worktreePath: "/repo",
|
||||
isHome: true,
|
||||
openCount: 1,
|
||||
workingCount: 0,
|
||||
attentionCount: 0,
|
||||
recoveringCount: 0,
|
||||
errorCount: 0,
|
||||
runtimes: [
|
||||
{
|
||||
runtimeId: "r",
|
||||
worktreePath: "/repo",
|
||||
state: "idle",
|
||||
label: "r",
|
||||
attention: false,
|
||||
queueCount: 0,
|
||||
lastActivity: "now",
|
||||
openedAt: "now",
|
||||
agentId: "ephemeral",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
describe("presentation persistence", () => {
|
||||
it("persists only allowlisted presentation state, never agent or session payloads", () => {
|
||||
let state = reconcileWorkspace(initialWorkspaceState, workspace); state = workspaceReducer(state, { type: "draftChanged", runtimeId: "r", draft: "safe draft" });
|
||||
const persisted = presentationState(state); const encoded = JSON.stringify(persisted);
|
||||
expect(persisted.drafts.r).toBe("safe draft"); expect(encoded).not.toContain("ephemeral"); expect(encoded).not.toContain("messages"); expect(encoded).not.toContain("extensions");
|
||||
});
|
||||
it("reads and removes legacy worktree/scale only after caller saves", () => {
|
||||
const getItem = vi.fn((key: string) => key.includes("selected") ? "/repo" : "1.2"); expect(legacyPreferences({ getItem })).toEqual({ path: "/repo", scale: 1.2 });
|
||||
const removeItem = vi.fn(); removeLegacyPreferences({ removeItem }); expect(removeItem).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
it("persists only allowlisted presentation state, never agent or session payloads", () => {
|
||||
let state = reconcileWorkspace(initialWorkspaceState, workspace);
|
||||
state = workspaceReducer(state, {
|
||||
type: "draftChanged",
|
||||
runtimeId: "r",
|
||||
draft: "safe draft",
|
||||
});
|
||||
state = workspaceReducer(state, {
|
||||
type: "setDefaultNewSessionWorktree",
|
||||
worktreePath: "/repo",
|
||||
});
|
||||
const persisted = presentationState(state);
|
||||
const encoded = JSON.stringify(persisted);
|
||||
expect(persisted.drafts.r).toBe("safe draft");
|
||||
expect(persisted.defaultNewSessionWorktree).toBe("/repo");
|
||||
expect(encoded).not.toContain("ephemeral");
|
||||
expect(encoded).not.toContain("messages");
|
||||
expect(encoded).not.toContain("extensions");
|
||||
});
|
||||
it("reads and removes legacy worktree/scale only after caller saves", () => {
|
||||
const getItem = vi.fn((key: string) =>
|
||||
key.includes("selected") ? "/repo" : "1.2",
|
||||
);
|
||||
expect(legacyPreferences({ getItem })).toEqual({
|
||||
path: "/repo",
|
||||
scale: 1.2,
|
||||
});
|
||||
const removeItem = vi.fn();
|
||||
removeLegacyPreferences({ removeItem });
|
||||
expect(removeItem).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -33,6 +33,7 @@ export function presentationState(state: WorkspaceState): UiState {
|
||||
}
|
||||
: undefined,
|
||||
interfaceScale: state.interfaceScale,
|
||||
defaultNewSessionWorktree: state.defaultNewSessionWorktree,
|
||||
dismissedCollisionWarning: state.dismissedCollisionWarning,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -112,6 +112,70 @@ describe("workspace reducer", () => {
|
||||
});
|
||||
expect(state.runtimesById.a.pendingSubmissions).toEqual([]);
|
||||
});
|
||||
it("reconciles duplicate pending submissions one message at a time and honors Pi queue totals", () => {
|
||||
let state = reconcileWorkspace(initialWorkspaceState, workspace);
|
||||
for (const id of [1, 2])
|
||||
state = workspaceReducer(state, {
|
||||
type: "submissionAdded",
|
||||
runtimeId: "a",
|
||||
submission: {
|
||||
id,
|
||||
text: "Continue",
|
||||
userMessageCount: 0,
|
||||
phase: "sent",
|
||||
},
|
||||
});
|
||||
state = workspaceReducer(state, {
|
||||
type: "snapshotRequested",
|
||||
runtimeId: "a",
|
||||
generation: 1,
|
||||
});
|
||||
state = workspaceReducer(state, {
|
||||
type: "snapshotLoaded",
|
||||
runtimeId: "a",
|
||||
generation: 1,
|
||||
snapshot: {
|
||||
bridgeInstanceId: "epoch",
|
||||
latestSeq: 1,
|
||||
runtime: runtime("a"),
|
||||
transcript: {
|
||||
data: { messages: [{ role: "user", content: "Continue" }] },
|
||||
},
|
||||
extensions: [],
|
||||
},
|
||||
});
|
||||
expect(state.runtimesById.a.pendingSubmissions).toHaveLength(1);
|
||||
state = applyWorkspaceEvent(state, {
|
||||
bridgeInstanceId: "epoch",
|
||||
seq: 1,
|
||||
type: "runtime_event",
|
||||
data: {
|
||||
runtimeId: "a",
|
||||
eventType: "queue",
|
||||
eventData: {
|
||||
event: {
|
||||
pendingMessageCount: 3,
|
||||
followUp: ["one"],
|
||||
steering: ["two"],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(state.runtimesById.a.summary.queueCount).toBe(3);
|
||||
});
|
||||
it("keeps a hotkey-triggered new-session startup visible until completion", () => {
|
||||
let state = reconcileWorkspace(initialWorkspaceState, workspace);
|
||||
state = workspaceReducer(state, {
|
||||
type: "newSessionLaunch",
|
||||
launch: { phase: "starting", detail: "Starting a new Pi session…" },
|
||||
});
|
||||
expect(state.newSessionLaunch?.phase).toBe("starting");
|
||||
state = workspaceReducer(state, {
|
||||
type: "newSessionLaunch",
|
||||
launch: undefined,
|
||||
});
|
||||
expect(state.newSessionLaunch).toBeUndefined();
|
||||
});
|
||||
it("rejects out-of-order snapshots and detects duplicate/gap/epoch events", () => {
|
||||
let state = reconcileWorkspace(initialWorkspaceState, workspace);
|
||||
state = workspaceReducer(state, {
|
||||
|
||||
+48
-10
@@ -24,6 +24,28 @@ function messageText(message: RuntimeView["messages"][number]) {
|
||||
.join("");
|
||||
}
|
||||
|
||||
function reconcilePendingSubmissions(
|
||||
pendingSubmissions: RuntimeView["pendingSubmissions"],
|
||||
messages: RuntimeView["messages"],
|
||||
) {
|
||||
const userMessages = messages
|
||||
.filter((message) => message.role === "user")
|
||||
.map(messageText);
|
||||
const consumed = new Set<number>();
|
||||
return pendingSubmissions.filter((pending) => {
|
||||
for (
|
||||
let index = pending.userMessageCount;
|
||||
index < userMessages.length;
|
||||
index++
|
||||
) {
|
||||
if (consumed.has(index) || userMessages[index] !== pending.text) continue;
|
||||
consumed.add(index);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
export function runtimeView(
|
||||
summary: RuntimeSummary,
|
||||
previous?: RuntimeView,
|
||||
@@ -84,6 +106,7 @@ export const initialWorkspaceState: WorkspaceState = {
|
||||
runtimeOrderByDirectory: {},
|
||||
windowActive: true,
|
||||
resourceWarning: false,
|
||||
defaultNewSessionWorktree: undefined,
|
||||
dismissedCollisionWarning: false,
|
||||
interfaceScale: 1,
|
||||
};
|
||||
@@ -169,6 +192,8 @@ export function reconcileWorkspace(
|
||||
selectedDirectoryPath,
|
||||
dismissedCollisionWarning:
|
||||
persisted?.dismissedCollisionWarning ?? state.dismissedCollisionWarning,
|
||||
defaultNewSessionWorktree:
|
||||
persisted?.defaultNewSessionWorktree ?? state.defaultNewSessionWorktree,
|
||||
interfaceScale: persisted?.interfaceScale ?? state.interfaceScale,
|
||||
};
|
||||
}
|
||||
@@ -319,9 +344,11 @@ export function applyWorkspaceEvent(
|
||||
(String(payload.type ?? "").endsWith("_start") ? 1 : 0),
|
||||
};
|
||||
} else if (type === "queue") {
|
||||
const queueCount = Array.isArray(payload.followUp)
|
||||
? payload.followUp.length
|
||||
: view.summary.queueCount;
|
||||
const queueCount =
|
||||
typeof payload.pendingMessageCount === "number"
|
||||
? payload.pendingMessageCount
|
||||
: (Array.isArray(payload.followUp) ? payload.followUp.length : 0) +
|
||||
(Array.isArray(payload.steering) ? payload.steering.length : 0);
|
||||
view.summary = { ...view.summary, queueCount };
|
||||
view.progress = {
|
||||
...view.progress,
|
||||
@@ -372,13 +399,20 @@ export type WorkspaceAction =
|
||||
| { type: "setWindowActive"; active: boolean }
|
||||
| { type: "setScale"; scale: number }
|
||||
| { type: "setResourceWarning"; value: boolean }
|
||||
| { type: "setDefaultNewSessionWorktree"; worktreePath?: string }
|
||||
| { type: "newSessionLaunch"; launch?: WorkspaceState["newSessionLaunch"] }
|
||||
| { type: "dismissCollisionWarning" }
|
||||
| {
|
||||
type: "submissionAdded";
|
||||
runtimeId: string;
|
||||
submission: RuntimeView["pendingSubmissions"][number];
|
||||
}
|
||||
| { type: "submissionSent"; runtimeId: string; id: number }
|
||||
| {
|
||||
type: "submissionSent";
|
||||
runtimeId: string;
|
||||
id: number;
|
||||
delivery: "prompt" | "follow_up";
|
||||
}
|
||||
| { type: "submissionRemoved"; runtimeId: string; id: number };
|
||||
|
||||
export function workspaceReducer(
|
||||
@@ -438,6 +472,10 @@ export function workspaceReducer(
|
||||
return { ...state, interfaceScale: action.scale };
|
||||
if (action.type === "setResourceWarning")
|
||||
return { ...state, resourceWarning: action.value };
|
||||
if (action.type === "setDefaultNewSessionWorktree")
|
||||
return { ...state, defaultNewSessionWorktree: action.worktreePath };
|
||||
if (action.type === "newSessionLaunch")
|
||||
return { ...state, newSessionLaunch: action.launch };
|
||||
if (action.type === "dismissCollisionWarning")
|
||||
return { ...state, dismissedCollisionWarning: true };
|
||||
const runtimeId = "runtimeId" in action ? action.runtimeId : undefined;
|
||||
@@ -463,11 +501,9 @@ export function workspaceReducer(
|
||||
view.state = action.snapshot.state?.data ?? {};
|
||||
view.stats = action.snapshot.stats?.data ?? {};
|
||||
view.messages = action.snapshot.transcript?.data?.messages ?? [];
|
||||
const receivedUserMessages = view.messages
|
||||
.filter((message) => message.role === "user")
|
||||
.map(messageText);
|
||||
view.pendingSubmissions = view.pendingSubmissions.filter(
|
||||
(pending) => !receivedUserMessages.includes(pending.text),
|
||||
view.pendingSubmissions = reconcilePendingSubmissions(
|
||||
view.pendingSubmissions,
|
||||
view.messages,
|
||||
);
|
||||
view.commands = action.snapshot.commands?.data?.commands ?? [];
|
||||
view.models = action.snapshot.models?.data?.models ?? [];
|
||||
@@ -494,7 +530,9 @@ export function workspaceReducer(
|
||||
view.pendingSubmissions = [...view.pendingSubmissions, action.submission];
|
||||
else if (action.type === "submissionSent")
|
||||
view.pendingSubmissions = view.pendingSubmissions.map((item) =>
|
||||
item.id === action.id ? { ...item, phase: "sent" } : item,
|
||||
item.id === action.id
|
||||
? { ...item, phase: "sent", delivery: action.delivery }
|
||||
: item,
|
||||
);
|
||||
else if (action.type === "submissionRemoved")
|
||||
view.pendingSubmissions = view.pendingSubmissions.filter(
|
||||
|
||||
@@ -97,6 +97,7 @@ export type Extension = {
|
||||
message?: string;
|
||||
options?: string[];
|
||||
placeholder?: string;
|
||||
prefill?: string;
|
||||
initialValue?: string;
|
||||
text?: string;
|
||||
notifyType?: "info" | "warning" | "error";
|
||||
@@ -118,6 +119,7 @@ export type PendingSubmission = {
|
||||
text: string;
|
||||
userMessageCount: number;
|
||||
phase: "sending" | "sent";
|
||||
delivery?: "prompt" | "follow_up";
|
||||
};
|
||||
export type RuntimeSnapshot = {
|
||||
bridgeInstanceId: string;
|
||||
@@ -211,6 +213,8 @@ export type WorkspaceState = {
|
||||
selectedRuntimeId?: string;
|
||||
windowActive: boolean;
|
||||
resourceWarning: boolean;
|
||||
newSessionLaunch?: { phase: "starting" | "error"; detail: string };
|
||||
defaultNewSessionWorktree?: string;
|
||||
dismissedCollisionWarning: boolean;
|
||||
interfaceScale: number;
|
||||
};
|
||||
@@ -228,5 +232,6 @@ export type UiState = {
|
||||
>;
|
||||
workspaceCursor?: { bridgeInstanceId: string; seq: number };
|
||||
interfaceScale?: number;
|
||||
defaultNewSessionWorktree?: string;
|
||||
dismissedCollisionWarning?: boolean;
|
||||
};
|
||||
|
||||
+258
-132
@@ -3,145 +3,271 @@ import { listen } from "@tauri-apps/api/event";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { useCallback, useEffect, useReducer, useRef } from "react";
|
||||
import { initialWorkspaceState, workspaceReducer } from "./reducer";
|
||||
import { legacyPreferences, loadPresentation, presentationState, removeLegacyPreferences, savePresentation } from "./persistence";
|
||||
import type { HostEvent, RuntimeSnapshot, UiState, Workspace, WorkspaceSummary } from "./types";
|
||||
import {
|
||||
legacyPreferences,
|
||||
loadPresentation,
|
||||
presentationState,
|
||||
removeLegacyPreferences,
|
||||
savePresentation,
|
||||
} from "./persistence";
|
||||
import type {
|
||||
HostEvent,
|
||||
RuntimeSnapshot,
|
||||
UiState,
|
||||
Workspace,
|
||||
WorkspaceSummary,
|
||||
} from "./types";
|
||||
|
||||
export function useWorkspace() {
|
||||
const [state, dispatch] = useReducer(workspaceReducer, initialWorkspaceState);
|
||||
const stateRef = useRef(state); stateRef.current = state;
|
||||
const loadGeneration = useRef<Record<string, number>>({});
|
||||
const timers = useRef<Record<string, number>>({});
|
||||
const initialized = useRef(false);
|
||||
const legacyMigrationPending = useRef(false);
|
||||
const disposed = useRef(true);
|
||||
const refreshGeneration = useRef(0);
|
||||
const [state, dispatch] = useReducer(workspaceReducer, initialWorkspaceState);
|
||||
const stateRef = useRef(state);
|
||||
stateRef.current = state;
|
||||
const loadGeneration = useRef<Record<string, number>>({});
|
||||
const timers = useRef<Record<string, number>>({});
|
||||
const initialized = useRef(false);
|
||||
const legacyMigrationPending = useRef(false);
|
||||
const disposed = useRef(true);
|
||||
const refreshGeneration = useRef(0);
|
||||
|
||||
const loadSnapshot = useCallback(async (runtimeId: string) => {
|
||||
if (disposed.current) return;
|
||||
const generation = (loadGeneration.current[runtimeId] ?? 0) + 1;
|
||||
loadGeneration.current[runtimeId] = generation;
|
||||
dispatch({ type: "snapshotRequested", runtimeId, generation });
|
||||
try {
|
||||
const snapshot = await invoke<RuntimeSnapshot>("get_session_runtime_snapshot", { runtimeId });
|
||||
if (!disposed.current)
|
||||
dispatch({ type: "snapshotLoaded", runtimeId, generation, snapshot });
|
||||
} catch (error) {
|
||||
if (!disposed.current)
|
||||
dispatch({ type: "snapshotFailed", runtimeId, generation, error: String(error) });
|
||||
}
|
||||
}, []);
|
||||
const loadSnapshot = useCallback(async (runtimeId: string) => {
|
||||
if (disposed.current) return;
|
||||
const generation = (loadGeneration.current[runtimeId] ?? 0) + 1;
|
||||
loadGeneration.current[runtimeId] = generation;
|
||||
dispatch({ type: "snapshotRequested", runtimeId, generation });
|
||||
try {
|
||||
const snapshot = await invoke<RuntimeSnapshot>(
|
||||
"get_session_runtime_snapshot",
|
||||
{ runtimeId },
|
||||
);
|
||||
if (!disposed.current)
|
||||
dispatch({ type: "snapshotLoaded", runtimeId, generation, snapshot });
|
||||
} catch (error) {
|
||||
if (!disposed.current)
|
||||
dispatch({
|
||||
type: "snapshotFailed",
|
||||
runtimeId,
|
||||
generation,
|
||||
error: String(error),
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleSnapshot = useCallback((runtimeId: string) => {
|
||||
if (timers.current[runtimeId]) return;
|
||||
timers.current[runtimeId] = window.setTimeout(() => {
|
||||
delete timers.current[runtimeId]; void loadSnapshot(runtimeId);
|
||||
}, 120);
|
||||
}, [loadSnapshot]);
|
||||
const scheduleSnapshot = useCallback(
|
||||
(runtimeId: string) => {
|
||||
if (timers.current[runtimeId]) return;
|
||||
timers.current[runtimeId] = window.setTimeout(() => {
|
||||
delete timers.current[runtimeId];
|
||||
void loadSnapshot(runtimeId);
|
||||
}, 120);
|
||||
},
|
||||
[loadSnapshot],
|
||||
);
|
||||
|
||||
const refresh = useCallback(async (initialUiState?: UiState, reloadAllSnapshots = false) => {
|
||||
const generation = ++refreshGeneration.current;
|
||||
const cancelled = () => disposed.current || generation !== refreshGeneration.current;
|
||||
const workspace = await invoke<Workspace>("get_workspace");
|
||||
if (cancelled()) return;
|
||||
let nextPersisted = initialUiState;
|
||||
if (nextPersisted) {
|
||||
const legacy = legacyPreferences(localStorage);
|
||||
const candidate = nextPersisted.selectedRuntimeId
|
||||
? undefined
|
||||
: workspace.directories.find((directory) => directory.worktreePath === legacy.path)?.runtimes[0];
|
||||
nextPersisted = {
|
||||
...nextPersisted,
|
||||
...(candidate ? { selectedRuntimeId: candidate.runtimeId } : {}),
|
||||
...(nextPersisted.interfaceScale === undefined && legacy.scale !== undefined
|
||||
? { interfaceScale: legacy.scale }
|
||||
: {}),
|
||||
};
|
||||
legacyMigrationPending.current = Boolean(
|
||||
(!initialUiState?.selectedRuntimeId && candidate) ||
|
||||
(initialUiState?.interfaceScale === undefined && legacy.scale !== undefined),
|
||||
);
|
||||
}
|
||||
dispatch({ type: "workspaceLoaded", workspace, persisted: nextPersisted });
|
||||
const summary = await invoke<WorkspaceSummary>("get_workspace_summary");
|
||||
if (cancelled()) return;
|
||||
dispatch({ type: "setResourceWarning", value: summary.resourceWarning });
|
||||
const selected = nextPersisted?.selectedRuntimeId && workspace.directories.some((directory) => directory.runtimes.some((runtime) => runtime.runtimeId === nextPersisted?.selectedRuntimeId))
|
||||
? nextPersisted.selectedRuntimeId : workspace.directories[0]?.runtimes[0]?.runtimeId;
|
||||
const runtimeIds = workspace.directories.flatMap((directory) => directory.runtimes.map((runtime) => runtime.runtimeId));
|
||||
for (const runtimeId of reloadAllSnapshots ? runtimeIds : selected ? [selected] : []) {
|
||||
if (cancelled()) return;
|
||||
void loadSnapshot(runtimeId);
|
||||
}
|
||||
if (cancelled()) return;
|
||||
await invoke("subscribe_workspace", { cursor: { bridgeInstanceId: workspace.bridgeInstanceId, seq: workspace.latestSeq } });
|
||||
if (cancelled()) await invoke("unsubscribe_workspace").catch(() => {});
|
||||
}, [loadSnapshot]);
|
||||
const refresh = useCallback(
|
||||
async (initialUiState?: UiState, reloadAllSnapshots = false) => {
|
||||
const generation = ++refreshGeneration.current;
|
||||
const cancelled = () =>
|
||||
disposed.current || generation !== refreshGeneration.current;
|
||||
const workspace = await invoke<Workspace>("get_workspace");
|
||||
if (cancelled()) return;
|
||||
let nextPersisted = initialUiState;
|
||||
if (nextPersisted) {
|
||||
const legacy = legacyPreferences(localStorage);
|
||||
const candidate = nextPersisted.selectedRuntimeId
|
||||
? undefined
|
||||
: workspace.directories.find(
|
||||
(directory) => directory.worktreePath === legacy.path,
|
||||
)?.runtimes[0];
|
||||
nextPersisted = {
|
||||
...nextPersisted,
|
||||
...(candidate ? { selectedRuntimeId: candidate.runtimeId } : {}),
|
||||
...(nextPersisted.interfaceScale === undefined &&
|
||||
legacy.scale !== undefined
|
||||
? { interfaceScale: legacy.scale }
|
||||
: {}),
|
||||
};
|
||||
legacyMigrationPending.current = Boolean(
|
||||
(!initialUiState?.selectedRuntimeId && candidate) ||
|
||||
(initialUiState?.interfaceScale === undefined &&
|
||||
legacy.scale !== undefined),
|
||||
);
|
||||
}
|
||||
dispatch({
|
||||
type: "workspaceLoaded",
|
||||
workspace,
|
||||
persisted: nextPersisted,
|
||||
});
|
||||
const summary = await invoke<WorkspaceSummary>("get_workspace_summary");
|
||||
if (cancelled()) return;
|
||||
dispatch({ type: "setResourceWarning", value: summary.resourceWarning });
|
||||
const selected =
|
||||
nextPersisted?.selectedRuntimeId &&
|
||||
workspace.directories.some((directory) =>
|
||||
directory.runtimes.some(
|
||||
(runtime) => runtime.runtimeId === nextPersisted?.selectedRuntimeId,
|
||||
),
|
||||
)
|
||||
? nextPersisted.selectedRuntimeId
|
||||
: workspace.directories[0]?.runtimes[0]?.runtimeId;
|
||||
const runtimeIds = workspace.directories.flatMap((directory) =>
|
||||
directory.runtimes.map((runtime) => runtime.runtimeId),
|
||||
);
|
||||
for (const runtimeId of reloadAllSnapshots
|
||||
? runtimeIds
|
||||
: selected
|
||||
? [selected]
|
||||
: []) {
|
||||
if (cancelled()) return;
|
||||
void loadSnapshot(runtimeId);
|
||||
}
|
||||
if (cancelled()) return;
|
||||
await invoke("subscribe_workspace", {
|
||||
cursor: {
|
||||
bridgeInstanceId: workspace.bridgeInstanceId,
|
||||
seq: workspace.latestSeq,
|
||||
},
|
||||
});
|
||||
if (cancelled()) await invoke("unsubscribe_workspace").catch(() => {});
|
||||
},
|
||||
[loadSnapshot],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
disposed.current = false;
|
||||
let stop: (() => void) | undefined;
|
||||
void listen<HostEvent>("workspace-bridge", (message) => {
|
||||
if (disposed.current) return;
|
||||
const host = message.payload;
|
||||
dispatch({ type: "hostEvent", host });
|
||||
if (host.kind === "resetRequired") void refresh(undefined, true);
|
||||
else if (host.kind === "event") {
|
||||
const runtimeId = host.event.data?.runtimeId;
|
||||
const eventType = host.event.type;
|
||||
const piType = String(host.event.data?.eventData?.event?.type ?? "");
|
||||
if (["runtime_opened", "runtime_closed", "runtime_recovered", "runtime_restore_failed"].includes(eventType ?? "")) {
|
||||
void refresh();
|
||||
} else if (runtimeId && (host.event.data?.eventType === "transcript" || piType === "agent_settled" || piType === "compaction_end")) {
|
||||
scheduleSnapshot(runtimeId);
|
||||
}
|
||||
}
|
||||
}).then((unlisten) => { if (disposed.current) unlisten(); else stop = unlisten; });
|
||||
void (async () => {
|
||||
try {
|
||||
const loaded = await loadPresentation();
|
||||
if (disposed.current) return;
|
||||
await refresh(loaded);
|
||||
if (disposed.current) return;
|
||||
initialized.current = true;
|
||||
} catch (error) {
|
||||
if (!disposed.current)
|
||||
dispatch({ type: "hostEvent", host: { kind: "disconnected", message: String(error), retryInMs: 0 } });
|
||||
}
|
||||
})();
|
||||
const appWindow = getCurrentWindow();
|
||||
const visibility = () => dispatch({ type: "setWindowActive", active: document.visibilityState === "visible" && document.hasFocus() });
|
||||
window.addEventListener("focus", visibility); window.addEventListener("blur", visibility); document.addEventListener("visibilitychange", visibility);
|
||||
return () => {
|
||||
disposed.current = true;
|
||||
refreshGeneration.current += 1;
|
||||
stop?.();
|
||||
void invoke("unsubscribe_workspace").catch(() => {});
|
||||
window.removeEventListener("focus", visibility);
|
||||
window.removeEventListener("blur", visibility);
|
||||
document.removeEventListener("visibilitychange", visibility);
|
||||
Object.values(timers.current).forEach(clearTimeout);
|
||||
void appWindow;
|
||||
};
|
||||
}, [refresh, scheduleSnapshot]);
|
||||
useEffect(() => {
|
||||
disposed.current = false;
|
||||
let stop: (() => void) | undefined;
|
||||
let stopNewRuntime: (() => void) | undefined;
|
||||
void listen<{
|
||||
phase: "starting" | "ready" | "error";
|
||||
runtimeId?: string;
|
||||
detail: string;
|
||||
}>("workspace-new-session", (message) => {
|
||||
const launch = message.payload;
|
||||
if (launch.phase === "starting") {
|
||||
dispatch({
|
||||
type: "newSessionLaunch",
|
||||
launch: { phase: "starting", detail: launch.detail },
|
||||
});
|
||||
} else if (launch.phase === "ready" && launch.runtimeId) {
|
||||
dispatch({ type: "newSessionLaunch", launch: undefined });
|
||||
void refresh().then(() => {
|
||||
if (!disposed.current)
|
||||
dispatch({ type: "selectRuntime", runtimeId: launch.runtimeId! });
|
||||
});
|
||||
} else if (launch.phase === "error") {
|
||||
dispatch({
|
||||
type: "newSessionLaunch",
|
||||
launch: { phase: "error", detail: launch.detail },
|
||||
});
|
||||
}
|
||||
}).then((unlisten) => {
|
||||
if (disposed.current) unlisten();
|
||||
else stopNewRuntime = unlisten;
|
||||
});
|
||||
void listen<HostEvent>("workspace-bridge", (message) => {
|
||||
if (disposed.current) return;
|
||||
const host = message.payload;
|
||||
dispatch({ type: "hostEvent", host });
|
||||
if (host.kind === "resetRequired") void refresh(undefined, true);
|
||||
else if (host.kind === "event") {
|
||||
const runtimeId = host.event.data?.runtimeId;
|
||||
const eventType = host.event.type;
|
||||
const piType = String(host.event.data?.eventData?.event?.type ?? "");
|
||||
if (
|
||||
[
|
||||
"runtime_opened",
|
||||
"runtime_closed",
|
||||
"runtime_recovered",
|
||||
"runtime_restore_failed",
|
||||
].includes(eventType ?? "")
|
||||
) {
|
||||
void refresh();
|
||||
} else if (
|
||||
runtimeId &&
|
||||
(host.event.data?.eventType === "transcript" ||
|
||||
piType === "agent_settled" ||
|
||||
piType === "compaction_end")
|
||||
) {
|
||||
scheduleSnapshot(runtimeId);
|
||||
}
|
||||
}
|
||||
}).then((unlisten) => {
|
||||
if (disposed.current) unlisten();
|
||||
else stop = unlisten;
|
||||
});
|
||||
void (async () => {
|
||||
try {
|
||||
const loaded = await loadPresentation();
|
||||
if (disposed.current) return;
|
||||
await refresh(loaded);
|
||||
if (disposed.current) return;
|
||||
initialized.current = true;
|
||||
} catch (error) {
|
||||
if (!disposed.current)
|
||||
dispatch({
|
||||
type: "hostEvent",
|
||||
host: {
|
||||
kind: "disconnected",
|
||||
message: String(error),
|
||||
retryInMs: 0,
|
||||
},
|
||||
});
|
||||
}
|
||||
})();
|
||||
const appWindow = getCurrentWindow();
|
||||
const visibility = () =>
|
||||
dispatch({
|
||||
type: "setWindowActive",
|
||||
active: document.visibilityState === "visible" && document.hasFocus(),
|
||||
});
|
||||
window.addEventListener("focus", visibility);
|
||||
window.addEventListener("blur", visibility);
|
||||
document.addEventListener("visibilitychange", visibility);
|
||||
return () => {
|
||||
disposed.current = true;
|
||||
refreshGeneration.current += 1;
|
||||
stop?.();
|
||||
stopNewRuntime?.();
|
||||
void invoke("unsubscribe_workspace").catch(() => {});
|
||||
window.removeEventListener("focus", visibility);
|
||||
window.removeEventListener("blur", visibility);
|
||||
document.removeEventListener("visibilitychange", visibility);
|
||||
Object.values(timers.current).forEach(clearTimeout);
|
||||
void appWindow;
|
||||
};
|
||||
}, [refresh, scheduleSnapshot]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!initialized.current) return;
|
||||
const timer = window.setTimeout(() => {
|
||||
void savePresentation(presentationState(state)).then(() => {
|
||||
if (legacyMigrationPending.current) {
|
||||
removeLegacyPreferences(localStorage);
|
||||
legacyMigrationPending.current = false;
|
||||
}
|
||||
}).catch(() => {});
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [state.directoryOrder, state.runtimeOrderByDirectory, state.selectedRuntimeId, state.interfaceScale, state.bridge.latestSeq, state.runtimesById]);
|
||||
useEffect(() => {
|
||||
if (!initialized.current) return;
|
||||
const timer = window.setTimeout(() => {
|
||||
void savePresentation(presentationState(state))
|
||||
.then(() => {
|
||||
if (legacyMigrationPending.current) {
|
||||
removeLegacyPreferences(localStorage);
|
||||
legacyMigrationPending.current = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [
|
||||
state.directoryOrder,
|
||||
state.runtimeOrderByDirectory,
|
||||
state.selectedRuntimeId,
|
||||
state.defaultNewSessionWorktree,
|
||||
state.interfaceScale,
|
||||
state.bridge.latestSeq,
|
||||
state.runtimesById,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const id = state.selectedRuntimeId; if (!id) return;
|
||||
if (!state.runtimesById[id]?.loading && !state.runtimesById[id]?.messages.length) void loadSnapshot(id);
|
||||
}, [state.selectedRuntimeId, loadSnapshot]);
|
||||
useEffect(() => {
|
||||
const id = state.selectedRuntimeId;
|
||||
if (!id) return;
|
||||
if (
|
||||
!state.runtimesById[id]?.loading &&
|
||||
!state.runtimesById[id]?.messages.length
|
||||
)
|
||||
void loadSnapshot(id);
|
||||
}, [state.selectedRuntimeId, loadSnapshot]);
|
||||
|
||||
return { state, dispatch, refresh, loadSnapshot, scheduleSnapshot };
|
||||
return { state, dispatch, refresh, loadSnapshot, scheduleSnapshot };
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user