omp-onlyne 0.0.0-stage → 0.1.0

package/src/ui/bootstrap.ts

@@ -0,0 +1,358 @@
+import type { ExtensionAPI, ExtensionContext } from "@oh-my-pi/pi-coding-agent";
+import { getLocale } from "@onlyne/node-host/i18n";
+import {
+	type Component,
+	type DescribeContext,
+	Editor,
+	FormField,
+	type NativeChild,
+	type NativeNode,
+	type NativeUiEvent,
+	Text,
+	type Theme,
+	getEditorTheme,
+	matchesKey,
+	node,
+	span,
+	text as textNode,
+} from "@oh-my-pi/pi-tui";
+import { configPath, normalizeNodeId, normalizeRegion, normalizeServiceUrl, saveConfig, shortNodeId } from "../config.ts";
+import { startRuntime } from "../runtime.ts";
+import type { OnlyneConfig } from "../types.ts";
+import { t, type UiTextKey } from "./bootstrap-text.ts";
+
+const FIELDS = ["region", "nodeId", "bind", "keyScope", "pageSize", "contact"] as const;
+type FieldName = (typeof FIELDS)[number];
+
+const LABELS: Record<FieldName, UiTextKey> = {
+	region: "bootstrap.field.region",
+	nodeId: "bootstrap.field.nodeId",
+	bind: "bootstrap.field.bind",
+	keyScope: "bootstrap.field.keyScope",
+	pageSize: "bootstrap.field.pageSize",
+	contact: "bootstrap.field.contact",
+};
+
+const HINTS: Record<FieldName, UiTextKey> = {
+	region: "bootstrap.hint.region",
+	nodeId: "bootstrap.hint.nodeId",
+	bind: "bootstrap.hint.bind",
+	keyScope: "bootstrap.hint.keyScope",
+	pageSize: "bootstrap.hint.pageSize",
+	contact: "bootstrap.hint.contact",
+};
+
+/** The values the command handler derived from Tern and the saved config. */
+export interface BootstrapDefaults {
+	/** Saved region when re-running, otherwise the Tern session suggestion; empty without Tern. */
+	region: string;
+	regionSource: string;
+	nodeId: string;
+	bind: string;
+	keyScope: string;
+	pageSize: number;
+	/** Existing configuration; the draft carries what the form does not edit. */
+	current?: OnlyneConfig;
+}
+
+type DraftField = { editor: Editor; field: FormField };
+
+/** First-run form. Save writes the project config and starts the node; cancel writes nothing. */
+export class OnlyneBootstrap implements Component {
+	private readonly fields: Record<FieldName, DraftField>;
+	private active: FieldName = "region";
+	private saving = false;
+	private error: string | undefined;
+	private described: NativeNode | undefined;
+	private disposed = false;
+	private locale = getLocale();
+	focused = true;
+	get nativeOverlay() {
+		return {
+			role: "onlyne.bootstrap",
+			size: "lg" as const,
+			anchor: "center" as const,
+			head: t("bootstrap.overlayHead"),
+		};
+	}
+
+	constructor(
+		private readonly pi: ExtensionAPI,
+		private readonly ctx: ExtensionContext,
+		private readonly defaults: BootstrapDefaults,
+		private readonly theme: Theme,
+		private readonly requestRender: () => void,
+		private readonly done: () => void,
+		private readonly signal: AbortSignal,
+	) {
+		this.fields = {
+			region: this.makeField(t(LABELS.region), defaults.region, t(HINTS.region)),
+			nodeId: this.makeField(t(LABELS.nodeId), shortNodeId(defaults.nodeId), t(HINTS.nodeId)),
+			bind: this.makeField(t(LABELS.bind), defaults.bind, t(HINTS.bind)),
+			keyScope: this.makeField(t(LABELS.keyScope), defaults.keyScope, t(HINTS.keyScope)),
+			pageSize: this.makeField(t(LABELS.pageSize), String(defaults.pageSize), t(HINTS.pageSize)),
+			contact: this.makeField(
+				t(LABELS.contact),
+				(defaults.current?.discovery?.seeds ?? []).join(", "),
+				t(HINTS.contact),
+			),
+		};
+	}
+
+	private changed(): void {
+		if (this.disposed || this.signal.aborted) return;
+		this.described = undefined;
+		this.requestRender();
+	}
+
+	private makeField(label: string, value: string, hint: string): DraftField {
+		const editor = new Editor(getEditorTheme());
+		editor.disableSubmit = true;
+		editor.setText(value);
+		editor.setMaxHeight(2);
+		editor.onChange = () => this.changed();
+		const field = new FormField(editor, {
+			label,
+			hint,
+			theme: {
+				label: text => this.theme.bold(text),
+				description: text => this.theme.fg("muted", text),
+				error: text => this.theme.fg("error", text),
+				hint: text => this.theme.fg("muted", text),
+			},
+		});
+		return { editor, field };
+	}
+
+	private value(name: FieldName): string {
+		return this.fields[name].editor.getExpandedText().trim();
+	}
+
+	/** The URI that saving will store; empty input reports the required field instead. */
+	private regionPreview(): string {
+		const raw = this.value("region");
+		return raw.length === 0
+			? t("bootstrap.regionMissing")
+			: t("bootstrap.regionPreview", { uri: normalizeRegion(raw) });
+	}
+
+	private async save(): Promise<void> {
+		if (this.disposed || this.signal.aborted || this.saving) return;
+		const region = this.value("region");
+		const nodeId = this.value("nodeId");
+		const bind = this.value("bind");
+		const keyScope = this.value("keyScope").trim().toLowerCase();
+		if (region.length === 0) {
+			this.fail(t("bootstrap.regionEmpty"));
+			return;
+		}
+		const scope = keyScope === "" ? "project" : keyScope;
+		if (scope !== "project" && scope !== "global" && scope !== "none") {
+			this.fail(t("bootstrap.keyScopeInvalid"));
+			return;
+		}
+		let seeds: string[];
+		try {
+			seeds = this.value("contact")
+				.split(/[,\s]+/)
+				.map(part => part.trim())
+				.filter(part => part.length > 0)
+				.map(normalizeServiceUrl);
+		} catch (error) {
+			this.fail(error instanceof Error ? error.message : String(error));
+			return;
+		}
+		const previous = this.defaults.current;
+		const config: OnlyneConfig = {
+			path: configPath(this.ctx.cwd),
+			region: normalizeRegion(region),
+			node: {
+				id: normalizeNodeId(nodeId),
+				key_scope: scope,
+				// The form does not edit these; saving must not erase them.
+				...(previous?.node.key_ref === undefined ? {} : { key_ref: previous.node.key_ref }),
+			},
+			server: { bind, ...(previous?.server.public_url === undefined ? {} : { public_url: previous.server.public_url }) },
+			threads: { page_size: Number(this.value("pageSize")) },
+			...(seeds.length === 0 ? {} : { discovery: { seeds } }),
+			...(previous?.trust === undefined ? {} : { trust: previous.trust }),
+			...(previous?.language === undefined ? {} : { language: previous.language }),
+		};
+		this.saving = true;
+		this.error = undefined;
+		this.changed();
+		let persisted = false;
+		try {
+			await saveConfig(config);
+			persisted = true;
+			const runtime = await startRuntime(this.pi, this.ctx);
+			// The start already read every saved seed; a seed typed just now is read again only
+			// to report its failure in the form the user typed it in.
+			const known = new Set(previous?.discovery?.seeds ?? []);
+			for (const seed of seeds.filter(seed => !known.has(seed))) {
+				try { await runtime.contact(seed); }
+				catch (error) {
+					if (this.signal.aborted) return;
+					this.fail(
+						t("bootstrap.seedFailed", {
+							seed,
+							reason: error instanceof Error ? error.message : String(error),
+						}),
+					);
+					return;
+				}
+			}
+			if (this.disposed || this.signal.aborted) return;
+			this.ctx.ui.notify(t("bootstrap.started", { region: config.region }), "info");
+			this.done();
+		} catch (error) {
+			if (this.signal.aborted) return;
+			const reason = error instanceof Error ? error.message : String(error);
+			this.error = persisted ? t("bootstrap.startFailed", { reason }) : t("bootstrap.notSaved", { reason });
+		} finally {
+			if (!this.disposed && !this.signal.aborted) {
+				this.saving = false;
+				this.changed();
+			}
+		}
+	}
+
+	private fail(message: string): void {
+		this.error = message;
+		this.changed();
+	}
+
+	private fieldRow(name: FieldName): NativeNode {
+		const selected = name === this.active;
+		return node(
+			"row",
+			{
+				role: "omp.btn",
+				actions: { click: `onlyne.bootstrap.field.${name}` },
+				title: t(LABELS[name]),
+				tone: selected ? "accent" : undefined,
+			},
+			[
+				node("text", {
+					spans: [
+						span(t(LABELS[name]), "strong"),
+						span(`: ${this.value(name) || t("bootstrap.empty")}`, "muted"),
+					],
+					wrap: "word",
+				}),
+			],
+			name,
+		);
+	}
+
+	private button(label: string, act: string): NativeNode {
+		return node("row", { role: "omp.btn", actions: { click: act }, title: label }, [textNode(label)], act);
+	}
+
+	describe(_cx: DescribeContext): NativeNode {
+		if (this.locale !== getLocale()) {
+			this.locale = getLocale();
+			this.described = undefined;
+		}
+		if (this.described !== undefined) return this.described;
+		const body: NativeChild[] = [node("text", { text: this.header(), wrap: "word" })];
+		for (const name of FIELDS) {
+			if (name === this.active && !this.saving) {
+				const draft = this.fields[name];
+				draft.field.focused = this.focused;
+				body.push(draft.field);
+			} else body.push(this.fieldRow(name));
+			if (name === "region") body.push(node("text", { text: this.regionPreview(), wrap: "word" }));
+		}
+		if (this.error !== undefined) body.push(node("text", { spans: [span(this.error, "error")], wrap: "word" }));
+		body.push(
+			node("col", { gap: "xs" }, [
+				this.button(this.saving ? t("bootstrap.saving") : t("bootstrap.save"), "onlyne.bootstrap.save"),
+				this.button(t("bootstrap.cancel"), "onlyne.bootstrap.cancel"),
+			]),
+		);
+		body.push(node("text", { text: t("bootstrap.keys"), wrap: "word" }));
+		this.described = node("card", { role: "onlyne.bootstrap" }, body);
+		return this.described;
+	}
+
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (this.disposed || this.signal.aborted || event.type !== "action") return;
+		const act = event.act;
+		if (act === "onlyne.bootstrap.save") {
+			void this.save();
+			return;
+		}
+		if (act === "onlyne.bootstrap.cancel" || act === "onlyne.close") {
+			this.done();
+			return;
+		}
+		if (act.startsWith("onlyne.bootstrap.field.")) {
+			const name = act.slice("onlyne.bootstrap.field.".length) as FieldName;
+			if (FIELDS.includes(name)) {
+				this.active = name;
+				this.changed();
+			}
+		}
+	}
+
+	handleInput(data: string): void {
+		if (this.disposed || this.signal.aborted) return;
+		if (matchesKey(data, "escape")) {
+			this.done();
+			return;
+		}
+		if (matchesKey(data, "ctrl+enter")) {
+			void this.save();
+			return;
+		}
+		if (matchesKey(data, "tab") || matchesKey(data, "shift+tab")) {
+			const step = matchesKey(data, "shift+tab") ? FIELDS.length - 1 : 1;
+			this.active = FIELDS[(FIELDS.indexOf(this.active) + step) % FIELDS.length]!;
+			this.changed();
+			return;
+		}
+		if (matchesKey(data, "enter")) {
+			this.active = FIELDS[(FIELDS.indexOf(this.active) + 1) % FIELDS.length]!;
+			this.changed();
+			return;
+		}
+		this.fields[this.active].editor.handleInput(data);
+		this.changed();
+	}
+
+	render(width: number): readonly string[] {
+		const lines: string[] = [this.theme.bold(t("bootstrap.title")), this.header()];
+		for (const name of FIELDS) {
+			if (name === this.active && !this.saving) {
+				const draft = this.fields[name];
+				draft.field.focused = this.focused;
+				lines.push(...draft.field.render(width));
+			} else {
+				lines.push(
+					`${name === this.active ? ">" : " "} ${t(LABELS[name])}: ${this.value(name) || t("bootstrap.empty")}`,
+				);
+			}
+			if (name === "region") lines.push(this.regionPreview());
+		}
+		if (this.error !== undefined) lines.push(this.theme.fg("error", this.error));
+		lines.push(t("bootstrap.keys"));
+		return new Text(lines.join("\n"), 0, 0).render(width);
+	}
+
+	invalidate(): void {
+		this.described = undefined;
+	}
+
+	private header(): string {
+		const existing = this.defaults.current === undefined ? "" : t("bootstrap.headerExisting");
+		return t("bootstrap.header", { source: this.defaults.regionSource, existing });
+	}
+
+	dispose(): void {
+		if (this.disposed) return;
+		this.disposed = true;
+		for (const name of FIELDS) this.fields[name].field.dispose();
+		this.described = undefined;
+	}
+}

package/src/ui/command-text.ts

@@ -0,0 +1,38 @@
+import { createTranslator } from '@onlyne/node-host/i18n';
+const en = {
+  usage: 'Usage: /onlyne or /onlyne menu opens the viewer. /onlyne init creates configuration. /onlyne config edits configuration. /onlyne language en|zh-CN switches language.',
+  init: 'Create project configuration and node keys',
+  config: 'Edit region, node identity, key location and seed addresses',
+  menu: 'Open the Onlyne viewer',
+  language: 'Switch language: en or zh-CN',
+  description: 'Show Onlyne messages, edit configuration or switch language',
+  unavailable: 'The Onlyne viewer and configuration form need an interactive terminal. Run /onlyne init in an interactive terminal.',
+  configured: 'This project is configured. Use /onlyne config to edit it.',
+  savedRegion: 'Region comes from the current configuration',
+  noTern: 'No Tern session was detected. Enter a region',
+  ternRegion: 'Region comes from Tern session "{name}" and can be changed',
+  selected: 'Onlyne language: {language}.',
+  initializing: 'Onlyne is initializing',
+  main: 'Main OMP session',
+  thread: 'Thread from {node}',
+  pending: '{author} · pending consumption',
+};
+const zh: Record<keyof typeof en, string> = {
+  usage: '用法：/onlyne 或 /onlyne menu 打开界面；/onlyne init 创建配置；/onlyne config 修改配置；/onlyne language en|zh-CN 切换语言。',
+  init: '创建项目配置与节点密钥',
+  config: '修改区域、节点身份、密钥位置与种子地址',
+  menu: '打开 Onlyne 界面',
+  language: '切换语言：en 或 zh-CN',
+  description: '查看 Onlyne 消息、修改配置或切换语言',
+  unavailable: 'Onlyne 查看界面和配置面板需要交互式终端。请在交互式终端运行 /onlyne init。',
+  configured: '这个项目已有配置。请用 /onlyne config 修改。',
+  savedRegion: '区域来自当前配置',
+  noTern: '未检测到 Tern 会话，请填写区域',
+  ternRegion: '区域建议值来自 Tern 会话“{name}”，可以修改',
+  selected: 'Onlyne 语言：{language}。',
+  initializing: 'Onlyne 正在初始化',
+  main: 'OMP 主会话',
+  thread: '来自 {node} 的线程',
+  pending: '{author} · 等待消费',
+};
+export const commandText = createTranslator({ en, 'zh-CN': zh });

package/src/ui/format.ts

@@ -0,0 +1,56 @@
+import { truncateToWidth } from "@oh-my-pi/pi-tui";
+import { t } from "./bootstrap-text.ts";
+
+/** Collapse a body to one line without losing the first useful characters. */
+export function oneLine(text: string): string {
+	return text.replace(/\s+/g, " ").trim();
+}
+
+/** Short elapsed time for a queue row, computed when the snapshot is loaded. */
+export function ageText(at: string | undefined, now = Date.now()): string {
+	if (at === undefined) return "";
+	const time = Date.parse(at);
+	if (!Number.isFinite(time)) return "";
+	const seconds = Math.max(0, Math.floor((now - time) / 1000));
+	if (seconds < 60) return `${seconds}s`;
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 48) return `${hours}h`;
+	return `${Math.floor(hours / 24)}d`;
+}
+
+export function clockText(at: string): string {
+	const time = Date.parse(at);
+	if (!Number.isFinite(time)) return at;
+	return new Date(time).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+}
+
+/**
+ * How long ago something happened, in words. `ageText` is the compact column
+ * form (`12m`), which stays untranslated because the unit letter is the whole
+ * label; a sentence needs the unit spelled out in the reader's language. The
+ * first minute reads "just now", since "0 min ago" is not what anyone says.
+ */
+export function sinceText(at: string | undefined, now = Date.now()): string {
+	if (at === undefined) return "";
+	const time = Date.parse(at);
+	if (!Number.isFinite(time)) return "";
+	const seconds = Math.max(0, Math.floor((now - time) / 1000));
+	if (seconds < 60) return t("time.justNow");
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return t("time.minutesAgo", { count: minutes });
+	const hours = Math.floor(minutes / 60);
+	if (hours < 48) return t("time.hoursAgo", { count: hours });
+	return t("time.daysAgo", { count: Math.floor(hours / 24) });
+}
+
+/** The head of a thread alias: its first UUID segment, which is what a narrow row can afford. */
+export function shortAlias(alias: string): string {
+	const head = alias.split("-", 1)[0] ?? alias;
+	return head === "" ? alias : head;
+}
+
+export function fit(text: string, width: number): string {
+	return truncateToWidth(text, Math.max(0, width));
+}

package/src/ui/index.ts

@@ -0,0 +1,156 @@
+import type { ExtensionAPI } from "@oh-my-pi/pi-coding-agent";
+import { ConfigError, loadConfig } from "../config.ts";
+import { getRuntime, startRuntime } from "../runtime.ts";
+import { detectTernSession } from "../tern.ts";
+import type { OnlyneConfig } from "../types.ts";
+import { OnlyneBootstrap, type BootstrapDefaults } from "./bootstrap.ts";
+import { OnlyneViewer } from "./viewer.ts";
+import { LOCALES, setLocale, type Locale } from "@onlyne/node-host/i18n";
+import { saveConfig } from "../config.ts";
+import { commandText as t } from "./command-text.ts";
+import { registerMsgTool } from "../tool.ts";
+import { refreshMailCards } from "./mail-message.ts";
+
+export { attachStatus, OnlyneStatus } from "./status.ts";
+
+/** The subcommands the slash command accepts, with the one-line hint the editor shows. */
+const SUBCOMMANDS = ["init", "config", "menu", "language"] as const;
+
+export function registerUi(pi: ExtensionAPI): void {
+	let active: AbortController | undefined;
+	const cancel = (): void => {
+		active?.abort();
+		active = undefined;
+	};
+	pi.on("session_switch", cancel);
+	pi.on("session_branch", cancel);
+	pi.on("session_tree", cancel);
+	pi.on("session_shutdown", cancel);
+
+	pi.registerCommand("onlyne", {
+		description: t("description"),
+		getArgumentCompletions(argumentPrefix: string) {
+			const prefix = argumentPrefix.trim().toLowerCase();
+			const matches = SUBCOMMANDS.filter(item => item.startsWith(prefix));
+			return matches.length === 0 ? null : matches.map(item => ({ label: item, value: item, description: t(item) }));
+		},
+		handler: async (args, ctx) => {
+			const command = args.trim();
+			if (command === "language" || command.startsWith("language ")) {
+				const language = command.slice("language".length).trim();
+				if (!LOCALES.includes(language as Locale)) { ctx.ui.notify(t("usage"), "warning"); return; }
+				try {
+					const runtime = getRuntime();
+					const config = runtime?.config ?? await loadConfig(ctx.cwd);
+					await saveConfig({ ...config, language: language as Locale });
+					if (runtime !== undefined) runtime.config.language = language as Locale;
+					setLocale(language as Locale);
+					registerMsgTool(pi);
+					refreshMailCards();
+					ctx.ui.notify(t("selected", { language }), "info");
+				} catch (error) { ctx.ui.notify(error instanceof Error ? error.message : String(error), "error"); }
+				return;
+			}
+			if (command !== "" && command !== "init" && command !== "config" && command !== "menu" && command !== "settings") {
+				ctx.ui.notify(t("usage"), "warning");
+				return;
+			}
+			if (!ctx.hasUI) {
+				pi.sendMessage({
+					customType: "onlyne.ui-unavailable",
+					content: t("unavailable"),
+					display: true,
+					attribution: "agent",
+				});
+				return;
+			}
+			if (active !== undefined) return;
+			const controller = new AbortController();
+			active = controller;
+			try {
+				let runtime = getRuntime();
+				if (command === "init") {
+					const existing = runtime?.config ?? (await loadConfig(ctx.cwd).catch(() => undefined));
+					if (existing !== undefined) {
+						ctx.ui.notify(t("configured"), "info");
+						return;
+					}
+				}
+				// A saved config with the runtime down is not a first run: start the node and show
+				// the viewer. Opening the init form here is what made `/onlyne` look like it had
+				// cleared the project.
+				if (runtime === undefined && command !== "init" && command !== "config") {
+					try {
+						runtime = await startRuntime(pi, ctx);
+					} catch (error) {
+						if (!(error instanceof ConfigError && error.code === "missing")) throw error;
+					}
+				}
+				const needsBootstrap = command === "init" || command === "config" || command === "settings" || runtime === undefined;
+				if (needsBootstrap) {
+					const tern = detectTernSession();
+					const current = runtime?.config ?? (await loadConfig(ctx.cwd).catch(() => undefined));
+					const savedRegion = current?.region;
+					const regionSource = savedRegion !== undefined
+						? t("savedRegion")
+						: tern === undefined
+							? t("noTern")
+							: t("ternRegion", { name: tern });
+					const defaults: BootstrapDefaults = {
+						region: savedRegion ?? tern ?? "",
+						regionSource,
+						nodeId: current?.node.id ?? "",
+						bind: current?.server.bind ?? "127.0.0.1",
+						keyScope: current?.node.key_scope ?? "project",
+						pageSize: current?.threads.page_size ?? 50,
+						...(current === undefined ? {} : { current }),
+					};
+					await ctx.ui.custom<void>(
+						(tui, theme, _keys, done) =>
+							new OnlyneBootstrap(
+								pi,
+								ctx,
+								defaults,
+								theme,
+								() => tui.requestRender(),
+								() => done(),
+								controller.signal,
+							),
+						{
+							overlay: true,
+							overlayOptions: { anchor: "center", width: "70%", minWidth: 56, maxHeight: "85%" },
+							signal: controller.signal,
+						},
+					);
+				} else {
+					await ctx.ui.custom<void>(
+						(tui, theme, _keys, done) =>
+							new OnlyneViewer(
+								theme,
+								() => tui.requestRender(),
+								() => done(),
+								controller.signal,
+								() => tui.terminal.rows,
+							),
+						{
+							overlay: true,
+							// Fullscreen is what turns on pointer reporting: a normal overlay never gets mouse
+							// events, so every click on a described node would go nowhere. The alt screen also
+							// gives the sheet the whole pane, which the four columns need.
+							overlayOptions: { margin: 0, fullscreen: true },
+							signal: controller.signal,
+						},
+					);
+				}
+			} catch (error) {
+				if (!controller.signal.aborted) {
+					const message = error instanceof Error ? error.message : String(error);
+					pi.logger.warn("onlyne.ui.failed", { error: message });
+					ctx.ui.notify(message, "error");
+				}
+			} finally {
+				if (active === controller) active = undefined;
+			}
+		},
+	});
+}