@makerstufferupper/flypi 0.1.4 → 0.1.6

package/src/server/protocol.ts

@@ -51,10 +51,17 @@ export const NewSessionCommand = Type.Object({
 	requestId: Type.Optional(RequestId),
 });
 
-/** Rebind this conversation to an existing session file (the sidebar's "open"). */
+/**
+ * Open an existing session file (the sidebar's "open") as its **own** conversation.
+ *
+ * Path-scoped, not conversation-scoped: every session file gets one conversation of its own, so opening a
+ * session never rebinds or disposes whatever the client was looking at. The `result` names the conversation
+ * that answers the file — the one already on it when there is one, otherwise a new one — and the client
+ * resumes it. No `conversationId` is asked for, because a page recovering from a restart holds ids the
+ * server has forgotten and still has to be able to open a session.
+ */
 export const SwitchSessionCommand = Type.Object({
 	type: Type.Literal("switchSession"),
-	conversationId: Id,
 	sessionPath: Id,
 	requestId: Type.Optional(RequestId),
 });
@@ -118,6 +125,18 @@ export const ResumeCommand = Type.Object({
 	requestId: Type.Optional(RequestId),
 });
 
+/**
+ * Stop streaming one conversation to this socket. A page holds every session it has opened, but only the
+ * ones with a turn in flight (and the one on screen) need to keep their pi session attached: an idle
+ * background conversation can be detached and then evicted by its own idle TTL, and a later `resume`
+ * re-attaches it. Detaching is per socket, so another tab's subscription is untouched.
+ */
+export const UnsubscribeCommand = Type.Object({
+	type: Type.Literal("unsubscribe"),
+	conversationId: Id,
+	requestId: Type.Optional(RequestId),
+});
+
 /** The sidebar's "open": the session files flypi owns. No conversation needed. */
 export const ListSessionsCommand = Type.Object({
 	type: Type.Literal("listSessions"),
@@ -618,6 +637,7 @@ export const ClientCommandSchema = Type.Union([
 	SetModelCommand,
 	SetThinkingLevelCommand,
 	ResumeCommand,
+	UnsubscribeCommand,
 	ExtensionReplyCommand,
 	ListSessionsCommand,
 	RenameSessionCommand,
@@ -659,6 +679,12 @@ export const HelloFrame = Type.Object({
 	type: Type.Literal("hello"),
 	protocolVersion: Type.Integer(),
 	serverVersion: Type.String(),
+	/**
+	 * The server's clock at handshake, in epoch ms. Event frames are stamped with that same clock, so a
+	 * page on another machine can measure a streaming response against it instead of against a skewed
+	 * local clock. Optional: a server that does not send it is assumed to share this one's clock.
+	 */
+	now: Type.Optional(Type.Integer()),
 	/** Optional so an older server still parses; every flypi server from here on sends it. */
 	pi: Type.Optional(PiInfoFrame),
 });
@@ -667,6 +693,13 @@ export const EventFrame = Type.Object({
 	type: Type.Literal("event"),
 	conversationId: Id,
 	seq: Type.Integer({ minimum: 1 }),
+	/**
+	 * When the **backend** first saw this event, in epoch milliseconds. It rides on replays too, so the
+	 * same event carries the same clock whenever it arrives — which is what lets a client that attaches
+	 * late (a reconnect, or opening a session it was not holding) measure the response's real window
+	 * instead of the burst the replay arrived in. Optional: a client without it falls back to arrival.
+	 */
+	at: Type.Optional(Type.Integer({ minimum: 0 })),
 	event: SessionEventFrameBody,
 });
 
@@ -677,6 +710,12 @@ export const SessionSummary = Type.Object({
 	modified: Type.String(),
 	messageCount: Type.Integer(),
 	firstMessage: Type.String(),
+	/**
+	 * Is a turn running in this session right now, in this process? The sidebar needs it as its own fact:
+	 * sessions keep running with nobody looking, so the only place a background turn is visible before it
+	 * lands is this flag — and it says nothing about a turn a previous process was cut short on.
+	 */
+	running: Type.Optional(Type.Boolean()),
 });
 
 /**

package/src/server/session-registry.ts

@@ -25,7 +25,9 @@ import { createExtensionUiBridge } from "./extension-ui.ts";
 import type { CommandRow, DebugInfo, ExtensionUiFrame, SessionSummary, ConfigSnapshot, McpStatusSnapshot, PackagesSnapshot } from "./protocol.ts";
 import type { FlypiMessage } from "../shared/transcript.ts";
 
-export type EventListener = (seq: number, event: AgentSessionEvent) => void;
+/** `at` is when this process saw the event (src/server/event-log.ts); a listener that does not need the
+ *  clock for its own accounting can ignore it. */
+export type EventListener = (seq: number, event: AgentSessionEvent, at: number) => void;
 /** What an extension said to the user (`src/server/extension-ui.ts`) — a second channel, not a pi event. */
 export type ExtensionUiListener = (frame: ExtensionUiFrame) => void;
 /** Supplies the session for a conversation: production uses `createFlypiSession`, tests use the stub model. */
@@ -63,8 +65,8 @@ export interface Conversation {
 	memory: { block: string | null };
 	/**
 	 * The conversation's extension UI bridge: `ctx.ui.notify/select/confirm/input` reach the page through it,
-	 * and it holds the dialogs still waiting for an answer. It outlives the session — `switchSession` binds a
-	 * new session to the same bridge, so a dialog survives the chat being reopened.
+	 * and it holds the dialogs still waiting for an answer. It belongs to the conversation and to nothing
+	 * else — one per conversation, for the whole life of the session it answers.
 	 */
 	extensionUi: ReturnType<typeof createExtensionUiBridge>;
 	/** Sockets watching this conversation's extension output. Detached with the socket, like event listeners. */
@@ -126,24 +128,30 @@ export class SessionRegistry {
 		);
 	}
 
-	/** Rebind a conversation to an existing session file. The conversationId — what the client holds — does not change. */
-	async switchSession(conversationId: string, sessionPath: string): Promise<Conversation> {
-		const conversation = this.get(conversationId);
+	/**
+	 * The conversation answering a session file, opened if there is none. **One session file, one
+	 * conversation** — this is the whole mapping, and it is what makes a client's chr(c) safe to leave: a
+	 * conversation is never moved onto another file and never taken away because someone looked at something
+	 * else.
+	 *
+	 * Two readers of the same file would be two writers on it, so a file another conversation is already
+	 * answering hands *that* conversation back — including a mid-turn one, whose answer is on its way to a
+	 * page that may or may not be looking at it. Nothing is disposed here: a background turn keeps running
+	 * and its events keep landing in its own log, which is what a client that comes back resumes.
+	 */
+	async switchSession(sessionPath: string): Promise<Conversation> {
 		const target = this.sessionFileIn(sessionPath);
-		this.teardown(conversation);
-		conversation.session = await this.createSession({
-			sessionManager: SessionManager.open(target, this.paths.sessionsDir),
-			conversationId,
-			onMemoryBlock: (block) => (conversation.memory.block = block),
-			extensionUi: conversation.extensionUi.uiContext,
-		});
-		conversation.memory.block = null;
-		this.watch(conversation);
-		// The transcript a client is looking at becomes the opened session's, from the start — so the
-		// log restarts and the seed above is the whole of it. The client re-reads it with `resume`.
-		conversation.log.reset();
-		this.seedHistory(conversation);
-		return conversation;
+		const live = this.findByFile(target);
+		if (live) return live;
+		return this.bind(SessionManager.open(target, this.paths.sessionsDir));
+	}
+
+	/** The conversation answering a session file, or undefined. There is at most one, by construction. */
+	findByFile(sessionFile: string): Conversation | undefined {
+		for (const conversation of this.conversations.values()) {
+			if (conversation.session.sessionFile === sessionFile) return conversation;
+		}
+		return undefined;
 	}
 
 	/**
@@ -171,7 +179,9 @@ export class SessionRegistry {
 
 	get(conversationId: string): Conversation {
 		const conversation = this.conversations.get(conversationId);
-		if (!conversation) throw new Error(`unknown conversation ${conversationId}`);
+		// The code is what a page acts on: it holds a conversation id across reconnects, and after a restart
+		// every command it sends names a conversation this process never had (ui/lib/app-state.svelte.ts).
+		if (!conversation) throw Object.assign(new Error(`unknown conversation ${conversationId}`), { code: "unknownConversation" });
 		return conversation;
 	}
 
@@ -237,6 +247,11 @@ export class SessionRegistry {
 	 * The session files flypi owns, for the sidebar's list. pi's own list, so flypi keeps no second index
 	 * of conversations (docs/decisions.md: one source of truth) — which is also why a chat you have only
 	 * started, with nothing written, has no row: pi creates the file on its first entry.
+	 *
+	 * `running` is the one thing pi's list cannot know: whether a conversation in *this* process is
+	 * mid-turn on that file. A turn keeps running with nobody looking at it, and that flag is the only
+	 * sign of it on screen. It says nothing about a turn a previous process was cut short on — that is
+	 * the daemon's `runs` record, reported when the session is opened.
 	 */
 	async listSessions(): Promise<SessionSummary[]> {
 		const sessions = await SessionManager.list(this.paths.root, this.paths.sessionsDir);
@@ -246,6 +261,7 @@ export class SessionRegistry {
 			modified: session.modified.toISOString(),
 			messageCount: session.messageCount,
 			firstMessage: session.firstMessage,
+			running: this.findByFile(session.path)?.session.isIdle === false,
 		}));
 	}
 
@@ -258,16 +274,14 @@ export class SessionRegistry {
 	 * Delete a session file for good. Anything that was showing it goes first: pi appends lazily, so a
 	 * live session bound to a deleted file would write it back and the row would come straight back.
 	 * A turn still running is refused rather than cut short — that work would be lost silently.
-	 * ponytail: one user, one browser. Another tab holding the same session loses its conversation id
-	 * when this runs; if tabs ever share the server, tell them over the socket instead.
 	 */
 	async deleteSession(sessionPath: string): Promise<void> {
 		const target = this.sessionFileIn(sessionPath);
-		for (const conversation of this.conversations.values()) {
-			if (conversation.session.sessionFile !== target) continue;
-			if (!conversation.session.isIdle) throw new Error(`session ${target} is mid-turn; abort it first`);
-			this.teardown(conversation);
-			this.conversations.delete(conversation.id);
+		const holder = this.findByFile(target);
+		if (holder) {
+			if (!holder.session.isIdle) throw new Error(`session ${target} is mid-turn; abort it first`);
+			this.teardown(holder);
+			this.conversations.delete(holder.id);
 		}
 		rmSync(target); // no force: a file that is not there is an error frame, not a silent success
 	}
@@ -447,7 +461,8 @@ export class SessionRegistry {
 		});
 		const conversation: Conversation = {
 			id,
-			log: new EventLog<AgentSessionEvent>(this.options.logCapacity),
+			// The same clock eviction uses, so a scripted clock in a test stamps the events it drives.
+			log: new EventLog<AgentSessionEvent>(this.options.logCapacity, this.now),
 			listeners: new Set(),
 			messages: new Map(),
 			session: await this.createSession({
@@ -530,7 +545,7 @@ export class SessionRegistry {
 			}
 			const buffered = conversation.log.push(event);
 			if (event.type === "message_end") conversation.messages.set(buffered.seq, event.message);
-			for (const listener of conversation.listeners) listener(buffered.seq, event);
+			for (const listener of conversation.listeners) listener(buffered.seq, event, buffered.at);
 		});
 	}
 

package/src/shared/metrics.ts

@@ -2,8 +2,11 @@
  * Live model speed metrics, read out of the same pi event stream the transcript mapper reads
  * (`src/shared/transcript.ts`).
  *
- * pi reports tokens, never tokens/second, so the only clock available is when the events arrived here.
- * That decides what each number honestly means:
+ * pi reports tokens, never tokens/second, so the only clock available is when the events were **seen**. That
+ * clock is the backend's: every event frame carries an `at` stamp taken when the server logged it
+ * (src/server/event-log.ts), and a replay carries the same stamp. Timing the arrival here instead made a
+ * replayed response — a reconnect, or a session opened late — arrive as one burst, which reported a
+ * thousands-of-tokens/second rate for a model that streamed at twenty. What each number honestly means:
  *
  * - **prefill** — the provider request up to the first content token, over the prompt tokens that
  *   request carried. pi emits `turn_start` once per provider request, which is the closest the stream
@@ -18,8 +21,9 @@
  * cannot pull either rate down.
  *
  * `now` is injectable for the same reason the transcript reducer takes one: the numbers are testable
- * without a clock. A response with no measurable window (both events inside one ms, which a local model
- * does) reports `null`, not a huge number — an unknown rate is shown as unknown.
+ * without a clock. The caller passes the event's own stamp, so `now()` is one fixed instant per event. A
+ * response with no measurable window (both events inside one ms, which a local model does) reports `null`,
+ * not a huge number — an unknown rate is shown as unknown.
  *
  * A response that is still streaming is counted only from what the provider reported about it. Providers
  * differ in when they report: some carry usage in every chunk, so those numbers move as the answer streams;

package/dist/ui/assets/index-CBuNmrDT.css

@@ -1 +0,0 @@
-.revealed.svelte-19l53a6{color:var(--ink)}.memory-body.svelte-3w3u32{color:var(--ink);flex-basis:100%}.memory-row.svelte-3w3u32{align-items:flex-start}.memory-why.svelte-3w3u32,.memory-history.svelte-3w3u32,.memory-uses.svelte-3w3u32{gap:.25rem;width:100%;margin:.3rem 0 0;padding:0;list-style:none;display:grid}.memory-why.svelte-3w3u32 li:where(.svelte-3w3u32),.memory-history.svelte-3w3u32 li:where(.svelte-3w3u32){flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.search.svelte-3w3u32{font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:.2rem .3rem}.preimage.svelte-3w3u32 summary:where(.svelte-3w3u32){color:var(--muted);cursor:pointer;font-size:11px}.preimage.svelte-3w3u32 pre:where(.svelte-3w3u32){max-height:12rem}.wiki-page.svelte-3w3u32 h4:where(.svelte-3w3u32){margin:.8rem 0 .2rem;font-size:13px}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fbfbfd;--panel:#fff;--line:#e3e4e9;--ink:#17181d;--muted:#6b6f7a;--accent:#2f6f4f;--error:#a3262a;--surface:#f4f5f7;--code:#f6f7f9;--queue:#f2f7f4}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#13151a;--panel:#1b1e25;--line:#2c303a;--ink:#e6e8ee;--muted:#98a0ae;--accent:#6cb892;--error:#e08084;--surface:#232730;--code:#1f232b;--queue:#1d2b24}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}.layout{grid-template-columns:var(--sidebar-w,15rem) .5rem minmax(0, 1fr) .5rem var(--activity-w,22rem);gap:.25rem;height:100vh;padding:.75rem;font:14px/1.5 ui-sans-serif,system-ui,sans-serif;display:grid}.updating{text-align:center;height:100vh;color:var(--muted);place-content:center;gap:.3rem;padding:1rem;font:14px/1.5 ui-sans-serif,system-ui,sans-serif;display:grid}.updating h2{color:var(--ink);margin:0 0 .3rem;font-size:1.1rem}.updating p{margin:0}.sidebar,.chat,.activity-panel,.settings-view{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.75rem;overflow:auto}.gutter{cursor:col-resize;touch-action:none;background:var(--line);border-radius:3px}.gutter:hover,.gutter:focus-visible{background:var(--accent)}.activity-panel{flex-direction:column;display:flex}.sidebar h1{margin:0 0 .5rem;font-size:1rem}.sidebar .port{color:var(--muted);font-weight:400}.sidebar .update{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.3rem;margin:0 0 .5rem;font-size:.8rem;display:flex}.panel-head{flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.5rem;display:flex}.panel-head h1{flex:1;margin:0}.panel-actions{gap:.35rem;margin-bottom:.5rem;display:flex}.icon{flex:none;padding:.2rem .35rem}.panel-head .logo{border-radius:6px;flex:none;width:2.5rem;height:2.5rem}.icon svg{width:1.05rem;height:1.05rem;display:block}.field{color:var(--muted);margin-bottom:.5rem;font-size:12px;display:block}.field select{width:100%;margin-top:.15rem}.sessions{margin:.5rem 0;padding:0;list-style:none}.sessions li{align-items:center;gap:.15rem;display:flex}.sessions li>:first-child{flex:1;min-width:0}.sessions .remove{opacity:.6}.sessions .remove:hover{opacity:1}.sessions .session{text-align:left;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;border-radius:6px;width:100%;overflow:hidden}.sessions .session:hover{background:var(--surface)}.sessions .session.current{background:var(--queue)}.sessions input.name{background:var(--queue);width:100%;color:inherit;border:0;border-radius:6px;font-weight:600}.sessions input.name:hover{background:var(--queue)}button,select,input,textarea{font:inherit;color:inherit}button{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:6px;padding:.25rem .5rem}button:hover{border-color:var(--accent)}input:not([type=checkbox]),select,textarea{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:.3rem .4rem}textarea{width:100%}.chat{flex-direction:column;display:flex}.messages{flex:1;margin:0;padding:0;list-style:none;overflow:auto}.msg{border-bottom:1px solid var(--line);padding:.4rem 0}.msg .role{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:11px;display:block}.msg[data-role=user] .role{color:var(--accent)}.usage{color:var(--muted);float:right;font-size:11px}.msg .fork{opacity:.45;margin-top:.2rem}.msg:hover .fork{opacity:.8}.msg .fork:hover{opacity:1}.markdown pre,.tool-output,.thinking pre,.system-prompt,.orphan-result,.memory-block,.cache-usage,.cfg-log{background:var(--code);border:1px solid var(--line);white-space:pre-wrap;border-radius:6px;padding:.4rem;font-family:ui-monospace,monospace;font-size:12.5px;overflow:auto}.markdown pre{margin:.35rem 0}.markdown code{font-family:ui-monospace,monospace}details.thinking summary{cursor:pointer;color:var(--muted);font-size:12px}.tool-card{border:1px solid var(--line);border-radius:6px;margin:.35rem 0;padding:.35rem .5rem}.tool-card[data-state=running]{border-color:var(--accent)}.tool-card[data-state=error]{border-color:var(--error)}.tool-card header{align-items:baseline;gap:.5rem;display:flex}.tool-name{font-weight:600}.tool-args{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;overflow:hidden}.tool-state{color:var(--muted);font-size:11px}.queue{margin:.35rem 0 0;padding:0;list-style:none}.queued{border-left:3px solid var(--accent);background:var(--queue);padding:.25rem .4rem;font-size:12.5px}.extension-output{margin:.35rem 0 0;padding:0;list-style:none}.extension-note{border-left:3px solid var(--accent);background:var(--queue);white-space:pre-wrap;padding:.25rem .4rem;font-size:12.5px}.extension-note[data-level=warning]{border-left-color:var(--muted)}.extension-note[data-level=error]{border-left-color:var(--error)}.extension-dialog{border:1px solid var(--line);background:var(--surface);border-radius:8px;margin:.35rem 0 0;padding:.4rem .5rem}.extension-dialog .ask{white-space:pre-wrap;margin:0 0 .35rem;font-size:13px}.answers{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.answer-input{align-items:center;gap:.35rem;display:flex}.commands{flex-wrap:wrap;gap:.3rem;margin:.35rem 0 0;padding:0;list-style:none;display:flex}.command{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:6px;padding:.15rem .4rem;font-size:12px}.command .desc{color:var(--muted);margin-left:.3rem}.attachments{flex-wrap:wrap;gap:.35rem;margin:0 0 .35rem;padding:0;list-style:none;display:flex}.attachment{border:1px solid var(--line);background:var(--surface);border-radius:6px;align-items:center;gap:.35rem;padding:.2rem .35rem;font-size:12px;display:flex}.attachment .thumb{object-fit:cover;border-radius:4px;flex:none;width:1.5rem;height:1.5rem}.attachment .name{text-overflow:ellipsis;white-space:nowrap;max-width:14rem;overflow:hidden}.attachment .remove{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 .15rem}.attachment .remove:hover{color:var(--error)}.attachment-image{border:1px solid var(--line);border-radius:6px;max-width:min(100%,32rem);max-height:24rem;margin:.35rem 0;display:block}.error{color:var(--error)}.muted{color:var(--muted)}.notice{color:var(--muted);border-left:2px solid var(--line);padding:.15rem 0 .15rem .5rem}.picker{gap:.5rem;margin-top:.5rem;display:flex}.picker .field{flex:1;margin-bottom:0}.composer{border-top:1px solid var(--line);padding-top:.5rem}.controls{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem;display:flex}.controls .stop{border-color:var(--error);color:var(--error)}.offline{color:var(--muted);font-size:12px}.metrics{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.6rem;margin-left:auto;font-size:11.5px;display:flex}.metrics b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}.gauge{flex:none;width:1.15rem;height:1.15rem;position:relative}.gauge svg{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.gauge circle{fill:none;stroke-width:3px}.gauge .track{stroke:var(--line)}.gauge .fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dasharray .3s}.activity-panel h2{text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;font-size:12px}.activity-panel h2 .count{font-weight:400}.activity-panel footer{border-top:1px solid var(--line);padding-top:.5rem}.activity{flex:1;margin:0;padding:0;list-style:none;overflow:auto}.activity li{border-bottom:1px solid var(--line);padding:.3rem 0}.activity li .tool-card{margin:0}.activity-empty{color:var(--muted);font-size:12px}.settings-view{grid-column:3/-1}.settings-view .panel-head h2{flex:1;margin:0;font-size:1rem}.settings-view .cfg-note{color:var(--muted);margin:0 0 .5rem;font-size:12px}.settings-view .cfg-note code{font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.cfg-stack{gap:1rem;max-width:46rem;display:grid}.cfg-section{align-items:center;gap:.5rem;margin:.9rem 0 .25rem;display:flex}.cfg-section h3{flex:1;margin:0;font-size:13px}.cfg-list.cfg-plain{border:0}.cfg-list.cfg-plain li{border-bottom:0;padding-left:0}.cfg-list{border:1px solid var(--line);border-radius:6px;margin:0;padding:0;list-style:none}.cfg-list li{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.4rem;padding:.3rem .4rem;display:flex}.cfg-list li:last-child{border-bottom:0}.cfg-list code{min-width:8rem;color:var(--muted);overflow-wrap:anywhere;flex:1;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.cfg-list .cfg-name{color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600}.cfg-list .field{flex:none;margin:0}.cfg-list .field select{width:auto;margin-top:0}.cfg-list .icon{opacity:.6;flex:none}.cfg-list .icon:hover{opacity:1}.cfg-list .icon:disabled{opacity:.2;cursor:default}.cfg-list .remove{color:var(--error)}.cfg-default{color:var(--accent);white-space:nowrap;align-items:center;gap:.25rem;font-size:11px;font-weight:600;display:flex}.cfg-default select{font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:.1rem .2rem;font-weight:400}.cfg-list .cfg-off,.cfg-list .cfg-none{color:var(--muted);font-size:11px}.cfg-list .cfg-state{color:var(--muted);white-space:nowrap;font-size:11px}.cfg-list .cfg-state.connected{color:var(--accent)}.cfg-list .cfg-state.failed,.cfg-list .cfg-state.needs-auth,.cfg-list .cfg-state-error{color:var(--error)}.cfg-log{max-height:12rem;margin:.4rem 0 0}.cfg-signin{border-top:1px solid var(--line);flex:1 0 100%;margin-top:.3rem;padding-top:.35rem}.cfg-signin p{overflow-wrap:anywhere;margin:.2rem 0;font-size:12px}.cfg-signin-form{flex-wrap:wrap;align-items:end;gap:.4rem;display:flex}.cfg-signin-form .field{flex:18rem;margin:0}.cfg-signin-form input{background:var(--panel);width:100%;color:var(--ink);border:1px solid var(--line);border-radius:4px;margin-top:.15rem;padding:.2rem .3rem;font:11px/1.4 ui-monospace,monospace}.cfg-modal{background:var(--panel);width:min(30rem,92vw);color:var(--ink);border:1px solid var(--line);border-radius:8px;max-height:78vh;margin:12vh auto auto;padding:.9rem;overflow:auto}.cfg-modal::backdrop{background:#0000008c}.cfg-modal .cfg-section{margin-top:0}.cfg-modal .field{margin-bottom:.35rem}.cfg-modal input,.cfg-modal select{width:100%;font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:4px;margin-top:.15rem;padding:.2rem .3rem}.cfg-modal input:disabled{color:var(--muted)}.cfg-inline{align-items:end;gap:.5rem;display:flex}.cfg-inline .field:first-child{flex:1}.cfg-install{align-items:end;gap:.5rem;margin-bottom:.4rem;display:flex}.cfg-install .field{flex:18rem;margin:0}.cfg-install input{background:var(--panel);width:100%;color:var(--ink);border:1px solid var(--line);border-radius:4px;margin-top:.15rem;padding:.2rem .3rem;font:11px/1.4 ui-monospace,monospace}.cfg-modal textarea,.cfg-raw{background:var(--panel);width:100%;color:var(--ink);border:1px solid var(--line);resize:vertical;border-radius:4px;margin-top:.15rem;padding:.2rem .3rem;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.cfg-modal details{margin:.45rem 0}.cfg-modal summary{color:var(--accent);cursor:pointer;font-size:12px}.cfg-modal details .cfg-note{margin:.35rem 0}.cfg-modal .error{font-size:12px}.cfg-modal .cfg-note{color:var(--muted);margin:0 0 .6rem;font-size:12px}.cfg-enabled{white-space:nowrap;align-items:center;gap:.25rem;display:flex}.cfg-enabled input{margin:0;width:auto!important}.cfg-actions{gap:.4rem;display:flex}.cfg-actions .remove{color:var(--error)}.linklike{color:var(--accent);font:inherit;background:0 0;border:0;padding:0;text-decoration:underline}.cfg-errors{max-width:46rem;margin:0 0 .5rem;padding:0;font-size:12px;list-style:none}