@tt-a1i/openpi 0.6.0 → 0.7.0

package/web/ui/src/i18n.ts

@@ -0,0 +1,159 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+const resources = {
+  en: {
+    translation: {
+      activeOnlyHint: "Only the active Web session accepts messages.",
+      acceptedHint: "Message accepted by OpenPI Web.",
+      stopTurn: "Stop current turn",
+      stoppingTurn: "Stopping current turn…",
+      stoppedTurn: "Current turn stopped.",
+      pendingFollowUpsHint: "{{count}} messages queued",
+      addWorkspace: "Add workspace",
+      addWorkspaceMenu: "Add workspace...",
+      archiveConversation: "Archive conversation",
+      cancel: "Cancel",
+      chooseWorkspaceHint: "Choose a workspace and describe the work",
+      close: "Close",
+      closeSearch: "Close search",
+      collapseSidebar: "Collapse sidebar",
+      confirmEdit: "OK",
+      connected: "Connected",
+      connecting: "Connecting",
+      conversationName: "Conversation name",
+      conversationOptions: "Conversation options",
+      conversationTurns: "Conversation turns",
+      copiedMessage: "Copied",
+      copyMessage: "Copy message",
+      deleteWorkspace: "Delete workspace",
+      describeTask: "Describe a task",
+      editMessage: "Edit message",
+      enterHint: "Enter to send, Shift+Enter for a new line.",
+      expandSidebar: "Expand sidebar",
+      importWorkspace: "Import workspace",
+      loadingModels: "Loading models...",
+      modelPreparing: "Preparing task...",
+      modelRetrying: "Retrying model request...",
+      modelRunning: "Working...",
+      newSession: "New session",
+      noConversations: "No conversations yet",
+      noMatching: "No matching conversations",
+      noModels: "No models available",
+      noOutput: "no output",
+      noSessions: "No sessions",
+      openSidebar: "Open sidebar",
+      promptMessage: "Send a message to the active Web session",
+      promptReadonly: "A non-active session cannot receive prompts",
+      promptStart: "Choose a workspace to begin.",
+      promptTask: "Describe what you want to build.",
+      queuedHint: "The message will be queued after the current turn.",
+      reconnecting: "Reconnecting",
+      removeWorkspace: "Remove from sidebar",
+      renameConversation: "Rename conversation",
+      renameWorkspace: "Rename workspace",
+      save: "Save",
+      searchConversations: "Search conversations",
+      searchPlaceholder: "Search conversations...",
+      selectModel: "Select model",
+      selectWorkspace: "Select workspace",
+      send: "Send",
+      stepsLabel: "steps",
+      switchingSession: "Switching session...",
+      thinkingActive: "Thinking...",
+      thinkingDone: "Thinking",
+      unavailable: "Unavailable",
+      ungrouped: "Ungrouped",
+      untitledSession: "New session",
+      workspaceDeleteConfirm:
+        "The folder and conversation records will be kept. Its conversations will move to Ungrouped.",
+      workspaceName: "Workspace name",
+      workspaces: "Workspaces",
+    },
+  },
+  zh: {
+    translation: {
+      activeOnlyHint: "只有当前 Web 会话可以接收消息。",
+      stopTurn: "停止当前轮次",
+      stoppingTurn: "正在停止当前轮次…",
+      stoppedTurn: "当前轮次已停止。",
+      pendingFollowUpsHint: "{{count}} 条消息正在排队",
+      acceptedHint: "OpenPI Web 已接收消息。",
+      addWorkspace: "添加工作区",
+      addWorkspaceMenu: "添加工作区...",
+      archiveConversation: "归档会话",
+      cancel: "取消",
+      chooseWorkspaceHint: "选择工作区并描述任务",
+      close: "关闭",
+      closeSearch: "关闭搜索",
+      collapseSidebar: "收起侧边栏",
+      confirmEdit: "确定",
+      connected: "已连接",
+      connecting: "正在连接",
+      conversationName: "会话名称",
+      conversationOptions: "会话选项",
+      conversationTurns: "会话轮次",
+      copiedMessage: "已复制",
+      copyMessage: "复制消息",
+      deleteWorkspace: "删除工作区",
+      describeTask: "描述任务",
+      editMessage: "编辑消息",
+      enterHint: "按 Enter 发送，Shift+Enter 换行。",
+      expandSidebar: "展开侧边栏",
+      importWorkspace: "导入工作区",
+      loadingModels: "正在加载模型...",
+      modelPreparing: "正在准备任务...",
+      modelRetrying: "模型请求重试中...",
+      modelRunning: "正在运行...",
+      newSession: "新建会话",
+      noConversations: "暂无对话",
+      noMatching: "没有匹配的会话",
+      noModels: "没有可用模型",
+      noOutput: "无输出",
+      noSessions: "暂无会话",
+      openSidebar: "打开侧边栏",
+      promptMessage: "向当前 Web 会话发送消息",
+      promptReadonly: "非当前会话不能接收消息",
+      promptStart: "选择一个工作区开始",
+      promptTask: "描述你想要构建的任务",
+      queuedHint: "当前回合结束后将发送消息。",
+      reconnecting: "正在重连",
+      removeWorkspace: "从侧边栏移除",
+      renameConversation: "重命名会话",
+      renameWorkspace: "重命名工作区",
+      save: "保存",
+      searchConversations: "搜索会话",
+      searchPlaceholder: "搜索会话...",
+      selectModel: "选择模型",
+      selectWorkspace: "选择工作区",
+      send: "发送",
+      stepsLabel: "个步骤",
+      switchingSession: "正在切换会话...",
+      thinkingActive: "思考中...",
+      thinkingDone: "思考过程",
+      unavailable: "不可用",
+      ungrouped: "未分组",
+      untitledSession: "新会话",
+      workspaceDeleteConfirm:
+        "文件夹与会话记录会保留，其中的会话会被放到“未分组”；再次打开此目录时将是一个干净的工作区。",
+      workspaceName: "工作区名称",
+      workspaces: "工作区",
+    },
+  },
+} as const;
+
+const language = navigator.language?.toLowerCase().startsWith("zh")
+  ? "zh"
+  : "en";
+
+void i18n.use(initReactI18next).init({
+  fallbackLng: "en",
+  initAsync: false,
+  interpolation: { escapeValue: false },
+  lng: language,
+  resources,
+});
+
+document.documentElement.lang = language === "zh" ? "zh-CN" : "en";
+
+export { i18n };

package/web/ui/src/lib/format.ts

@@ -0,0 +1,57 @@
+import type { WebSessionSummary } from "../../../protocol/types.ts";
+
+export function sessionTitle(
+  session: Partial<WebSessionSummary>,
+  fallback: string,
+) {
+  return session.name?.trim() || session.firstMessage?.trim() || fallback;
+}
+
+export function workspaceName(path: string) {
+  return path.split(/[\\/]/u).filter(Boolean).at(-1) || path;
+}
+
+export function compactSummary(value: unknown, limit = 96) {
+  const text = String(value ?? "")
+    .replace(/\s+/gu, " ")
+    .trim();
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+
+export function relativeTime(value: string) {
+  const elapsed = Date.now() - new Date(value).getTime();
+  if (!Number.isFinite(elapsed)) return "";
+  if (elapsed < 60_000) return "now";
+  if (elapsed < 3_600_000) return `${Math.floor(elapsed / 60_000)}m`;
+  if (elapsed < 86_400_000) return `${Math.floor(elapsed / 3_600_000)}h`;
+  return new Date(value).toLocaleDateString(undefined, {
+    day: "numeric",
+    month: "short",
+  });
+}
+
+export function formatTurnTime(timestamp?: string) {
+  if (!timestamp) return "";
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return "";
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+
+export function formatElapsedMs(start?: number, end = Date.now()) {
+  if (typeof start !== "number") return "";
+  const totalSeconds = Math.max(0, Math.round((end - start) / 1_000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return minutes > 0
+    ? `${minutes}m${String(seconds).padStart(2, "0")}s`
+    : `${seconds}s`;
+}
+
+export function turnTitle(content: string) {
+  const line =
+    content
+      .split("\n")
+      .map((part) => part.trim())
+      .find(Boolean) ?? "";
+  return line.length > 60 ? `${line.slice(0, 60)}…` : line;
+}

package/web/ui/src/main.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app/App.tsx";
+import { Providers } from "./app/providers.tsx";
+import "./styles.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("OpenPI Web root is missing");
+
+createRoot(root).render(
+  <React.StrictMode>
+    <Providers>
+      <App />
+    </Providers>
+  </React.StrictMode>,
+);

package/web/ui/src/protocol/client.ts

@@ -0,0 +1,199 @@
+import type { WebSnapshot } from "../../../protocol/types.ts";
+
+const tokenStorageKey = "openpi.web.token";
+
+export class WebApiError extends Error {
+  constructor(
+    message: string,
+    readonly status: number,
+    readonly code?: string,
+  ) {
+    super(message);
+    this.name = "WebApiError";
+  }
+}
+
+function readToken() {
+  const fragmentToken = new URLSearchParams(location.hash.slice(1)).get(
+    "token",
+  );
+  if (fragmentToken) {
+    try {
+      window.sessionStorage.setItem(tokenStorageKey, fragmentToken);
+    } catch {}
+    history.replaceState(null, "", `${location.pathname}${location.search}`);
+    return fragmentToken;
+  }
+  try {
+    return window.sessionStorage.getItem(tokenStorageKey);
+  } catch {
+    return null;
+  }
+}
+
+export interface CommandReceipt {
+  id: string;
+  accepted: boolean;
+  pendingFollowUps?: number;
+}
+
+export interface SessionMutationResult {
+  cancelled?: boolean;
+  path?: string;
+}
+
+export interface WorkspaceSelectionResult {
+  cancelled?: boolean;
+  path?: string;
+}
+
+export class WebClient {
+  readonly token = readToken();
+
+  headers(json = false) {
+    return {
+      Authorization: `Bearer ${this.token ?? ""}`,
+      ...(json ? { "Content-Type": "application/json" } : {}),
+    };
+  }
+
+  async request<T>(
+    path: string,
+    options: RequestInit & { timeoutMs?: number; timeoutMessage?: string } = {},
+  ) {
+    const {
+      timeoutMs = 15_000,
+      timeoutMessage = "Request timed out. Please try again.",
+      ...requestOptions
+    } = options;
+    const controller = new AbortController();
+    let timedOut = false;
+    const abort = () => controller.abort();
+    if (options.signal?.aborted) abort();
+    options.signal?.addEventListener("abort", abort, { once: true });
+    const timer = window.setTimeout(() => {
+      timedOut = true;
+      controller.abort();
+    }, timeoutMs);
+    try {
+      const response = await fetch(path, {
+        ...requestOptions,
+        signal: controller.signal,
+        headers: { ...this.headers(Boolean(options.body)), ...options.headers },
+      });
+      const body = (await response.json()) as {
+        error?: string;
+        code?: string;
+      } & T;
+      if (controller.signal.aborted) throw new Error("Request aborted");
+      if (!response.ok)
+        throw new WebApiError(
+          body.error || `Request failed (${response.status})`,
+          response.status,
+          body.code,
+        );
+      return body;
+    } catch (error) {
+      if (timedOut) throw new Error(timeoutMessage);
+      throw error;
+    } finally {
+      window.clearTimeout(timer);
+      options.signal?.removeEventListener("abort", abort);
+    }
+  }
+
+  snapshot(path?: string | null) {
+    const suffix = path ? `?path=${encodeURIComponent(path)}` : "";
+    return this.request<WebSnapshot>(`/api/snapshot${suffix}`);
+  }
+
+  chooseWorkspace() {
+    return this.request<WorkspaceSelectionResult>("/api/workspaces/select", {
+      method: "POST",
+    });
+  }
+
+  renameWorkspace(path: string, name: string) {
+    return this.request<{ path: string; name: string }>("/api/workspaces", {
+      method: "PATCH",
+      body: JSON.stringify({ path, name }),
+    });
+  }
+
+  removeWorkspace(path: string) {
+    return this.request<{ path: string; removed: true }>(
+      `/api/workspaces?path=${encodeURIComponent(path)}`,
+      { method: "DELETE" },
+    );
+  }
+
+  createSession(workspacePath: string, commandId: string) {
+    return this.request<SessionMutationResult>("/api/sessions", {
+      method: "POST",
+      body: JSON.stringify({ workspacePath, commandId }),
+    });
+  }
+
+  selectSession(path: string) {
+    return this.request<SessionMutationResult>("/api/sessions/select", {
+      method: "POST",
+      body: JSON.stringify({ path }),
+    });
+  }
+
+  renameSession(path: string, name: string) {
+    return this.request<{ path: string; name: string }>("/api/sessions", {
+      method: "PATCH",
+      body: JSON.stringify({ path, name }),
+    });
+  }
+
+  archiveSession(path: string) {
+    return this.request<{ path: string; archived: true }>(
+      `/api/sessions/archive?path=${encodeURIComponent(path)}`,
+      { method: "POST" },
+    );
+  }
+
+  selectModel(provider: string, modelId: string, sessionId: string) {
+    return this.request<CommandReceipt>("/api/model", {
+      method: "POST",
+      body: JSON.stringify({ provider, modelId, sessionId }),
+    });
+  }
+
+  cancelActiveTurn(turn: NonNullable<WebSnapshot["runtime"]["activeTurn"]>) {
+    return this.request<{ state: "accepted" | "already-settled" }>(
+      "/api/turns/cancel",
+      {
+        method: "POST",
+        body: JSON.stringify(turn),
+      },
+    );
+  }
+
+  async prompt(
+    sessionId: string,
+    content: string,
+    commandId: string,
+    retry = false,
+  ) {
+    const receipt = await this.request<CommandReceipt>("/api/prompt", {
+      method: "POST",
+      body: JSON.stringify({ sessionId, content, commandId, retry }),
+      timeoutMs: 30_000,
+      timeoutMessage:
+        "Request timed out; admission may still be pending. Retry the same message to recover its receipt.",
+    });
+    if (
+      typeof receipt.id !== "string" ||
+      !receipt.id ||
+      receipt.accepted !== true
+    ) {
+      throw new Error(
+        "Invalid prompt receipt; retry the same message to recover its admission.",
+      );
+    }
+    return receipt;
+  }
+}

package/web/ui/src/protocol/event-stream.ts

@@ -0,0 +1,88 @@
+import { createParser } from "eventsource-parser";
+import type { WebEvent } from "../../../protocol/types.ts";
+import type { WebClient } from "./client.ts";
+
+export class EventResyncRequired extends Error {}
+
+export interface EventStreamOptions {
+  client: WebClient;
+  cursor: number;
+  onConnected: () => void;
+  onHeartbeat?: () => void;
+  onEvent: (event: WebEvent) => void;
+  signal: AbortSignal;
+}
+
+export async function consumeEventStream(options: EventStreamOptions) {
+  const controller = new AbortController();
+  const abort = () => controller.abort();
+  options.signal.addEventListener("abort", abort, { once: true });
+  if (options.signal.aborted) abort();
+  const timer = window.setTimeout(abort, 45_000);
+  const response = await fetch(`/events?cursor=${options.cursor}`, {
+    headers: options.client.headers(),
+    signal: controller.signal,
+  }).finally(() => {
+    window.clearTimeout(timer);
+    options.signal.removeEventListener("abort", abort);
+  });
+  if (response.status === 409)
+    throw new EventResyncRequired("event replay expired");
+  if (!response.ok || !response.body)
+    throw new Error("event connection failed");
+  options.onConnected();
+
+  let cursor = options.cursor;
+  let heartbeats = 0;
+  const parser = createParser({
+    onComment(comment) {
+      if (comment.trim() === "heartbeat" && ++heartbeats >= 4) {
+        heartbeats = 0;
+        options.onHeartbeat?.();
+      }
+    },
+    onEvent(record) {
+      const event = JSON.parse(record.data) as WebEvent;
+      if (!Number.isSafeInteger(event.sequence)) {
+        throw new EventResyncRequired("invalid event cursor");
+      }
+      if (event.sequence <= cursor) return;
+      if (event.sequence !== cursor + 1) {
+        throw new EventResyncRequired("event cursor gap");
+      }
+      cursor = event.sequence;
+      if (event.type === "state_invalidated") {
+        throw new EventResyncRequired("state invalidated");
+      }
+      options.onEvent(event);
+    },
+  });
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  try {
+    while (!options.signal.aborted) {
+      let timer: number | undefined;
+      let onAbort: (() => void) | undefined;
+      const chunk = reader.read();
+      const interruption = new Promise<never>((_, reject) => {
+        onAbort = () => reject(new Error("event stream aborted"));
+        options.signal.addEventListener("abort", onAbort, { once: true });
+        if (options.signal.aborted) onAbort();
+        timer = window.setTimeout(
+          () => reject(new Error("event stream stalled")),
+          45_000,
+        );
+      });
+      const { done, value } = await Promise.race([chunk, interruption]).finally(
+        () => {
+          window.clearTimeout(timer);
+          if (onAbort) options.signal.removeEventListener("abort", onAbort);
+        },
+      );
+      if (done) throw new Error("event connection closed");
+      parser.feed(decoder.decode(value, { stream: true }));
+    }
+  } finally {
+    await reader.cancel().catch(() => undefined);
+  }
+}