@workflow-code/cli 0.2.4-20261010001.codex-cli-web → 0.2.4-20261010002.codex-cli-web

package/dist/index.js

@@ -24,7 +24,7 @@ async function main(argv = process.argv.slice(2)) {
   const prepared = prepareCliInvocation(argv);
   argv = prepared.argv;
   if (argv[0] === "web") {
-    const webCli = await import("./web-U23BFLG4.js");
+    const webCli = await import("./web-KTQSEVQT.js");
     return webCli.main(argv.slice(1));
   }
   if (argv[0] === "workspace") {

package/dist/web/theme.css

@@ -25,6 +25,7 @@
   --vscode-errorForeground: #c72e2e;
   --vscode-button-background: #0078d4;
   --vscode-button-foreground: #ffffff;
+  --vscode-button-hoverBackground: #006ab1;
   --vscode-button-secondaryBackground: #eeeeee;
   --vscode-button-secondaryForeground: #333333;
   --vscode-editorWidget-background: #ffffff;
@@ -33,6 +34,9 @@
   --vscode-menu-foreground: #333333;
   --vscode-menu-selectionBackground: #e8e8e8;
   --vscode-menu-selectionForeground: #333333;
+  --vscode-testing-iconPassed: #16825d;
+  --vscode-scrollbarSlider-background: #79797955;
+  --vscode-scrollbarSlider-hoverBackground: #64646488;
 }
 :root[data-theme=dark] {
   color-scheme: dark;
@@ -61,12 +65,10 @@
   --vscode-menu-foreground: #cccccc;
   --vscode-menu-selectionBackground: #3c3c3c;
   --vscode-menu-selectionForeground: #ffffff;
+  --vscode-testing-iconPassed: #89d185;
+  --vscode-scrollbarSlider-background: #79797966;
+  --vscode-scrollbarSlider-hoverBackground: #646464b3;
 }
+* { scrollbar-width: thin; scrollbar-color: var(--vscode-scrollbarSlider-background) transparent; }
 #chats { flex: 1; }
-.web-account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin: auto 8px 8px; padding: 10px; min-height: 44px; border: none; border-top: 1px solid var(--vscode-panel-border); background: transparent; text-align: left; }
-.web-account > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.web-account:hover { background: var(--vscode-toolbar-hoverBackground); }
-.web-avatar { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; position: relative; }
-.web-avatar img { position: absolute; width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }
 .web-preview { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--vscode-editor-font-family); }
-@media (max-width: 680px) { .web-account { margin: 0 8px; min-height: 36px; padding: 6px 10px; } }

package/dist/web/workflow-ui.css

@@ -1335,7 +1335,13 @@ main {
 }
 .composer-area {
   flex-shrink: 0;
-  padding: 8px max(28px, calc((100% - 820px) / 2)) 14px;
+  min-width: 0;
+  padding: 8px 28px 14px;
+}
+.composer-area > * {
+  width: 100%;
+  max-width: 820px;
+  margin-inline: auto;
 }
 .parameter-login {
   display: flex;
@@ -1477,9 +1483,19 @@ textarea::placeholder {
 .parameter-popover-heading strong {
   font-weight: 500;
 }
+.parameter-popover[data-kind=auxiliary] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.parameter-popover-heading {
+  flex-shrink: 0;
+}
 .parameter-popover-fields {
   display: grid;
   gap: 18px;
+  min-height: 0;
+  overflow: auto;
   padding: 16px;
 }
 .parameter-popover[data-kind=quick] {
@@ -1708,3 +1724,248 @@ textarea::placeholder {
     max-width: 190px;
   }
 }
+
+/* src/web/ui/account.css */
+.web-account {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: calc(100% - 16px);
+  min-width: 0;
+  flex-shrink: 0;
+  margin: auto 8px 8px;
+  padding: 10px;
+  min-height: 44px;
+  border: none;
+  border-top: 1px solid var(--border);
+  border-radius: 4px;
+  background: transparent;
+  text-align: left;
+}
+.web-account-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.web-account:hover {
+  background: var(--vscode-toolbar-hoverBackground);
+}
+.web-avatar,
+.account-avatar {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+}
+.web-avatar img,
+.account-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.account-dialog {
+  width: min(460px, calc(100vw - 32px));
+}
+.account-body {
+  padding: 24px;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.account-body #account-status {
+  margin-bottom: 24px;
+  color: var(--muted);
+}
+.account-body #account-status.connected {
+  color: var(--vscode-testing-iconPassed, #16825d);
+}
+.account-body form {
+  display: grid;
+  gap: 8px;
+}
+.account-body form > label:not(:first-child) {
+  margin-top: 12px;
+}
+.account-body input {
+  width: 100%;
+  height: 36px;
+  padding: 6px 10px;
+}
+.account-password {
+  position: relative;
+}
+.account-password input {
+  padding-right: 40px;
+}
+.account-password .icon-button {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  width: 32px;
+  height: 32px;
+}
+.account-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+}
+.account-primary,
+.account-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+}
+.account-primary {
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+}
+.account-primary:hover:not(:disabled) {
+  background: var(--vscode-button-hoverBackground, var(--vscode-button-background));
+}
+.account-secondary {
+  background: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+}
+.account-secondary:hover:not(:disabled) {
+  background: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
+}
+.account-identity {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--border);
+}
+.account-identity > div {
+  min-width: 0;
+}
+.account-avatar {
+  width: 48px;
+  height: 48px;
+}
+.account-avatar > .codicon {
+  font-size: 28px;
+}
+.account-identity h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.account-muted {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.account-body dl {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px 16px;
+  margin: 24px 0;
+}
+.account-body dt {
+  color: var(--muted);
+}
+.account-body dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.account-body #account-error {
+  margin-top: 18px;
+  color: var(--vscode-errorForeground);
+  overflow-wrap: anywhere;
+}
+@media (max-width: 680px) {
+  .web-account {
+    margin: 0 8px 4px;
+    min-height: 36px;
+    padding: 6px 10px;
+  }
+}
+@media (max-width: 420px) {
+  .account-body {
+    padding: 18px;
+  }
+}
+
+/* src/web/ui/connection.css */
+.connection-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  min-width: 0;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--vscode-sideBar-background);
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.connection-icon {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.connection-banner[data-status=connecting] .connection-icon .codicon,
+.connection-banner[data-status=reconnecting] .connection-icon .codicon {
+  animation: spin 1.2s linear infinite;
+}
+.connection-copy {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 10px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.connection-copy strong {
+  font-weight: 500;
+  color: var(--vscode-editor-foreground);
+}
+.connection-retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  min-height: 30px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-editor-foreground);
+  font-size: 12px;
+}
+.connection-retry:hover:not(:disabled) {
+  background: var(--vscode-toolbar-hoverBackground);
+}
+@media (max-width: 680px) {
+  .connection-banner {
+    padding: 10px 12px;
+    align-items: flex-start;
+  }
+  .connection-copy {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .connection-retry {
+    margin-top: -3px;
+  }
+}

package/dist/web/workflow-ui.js

@@ -3917,6 +3917,342 @@ ${JSON.stringify(output.details, null, 2)}` : "");
     }
   };
 
+  // src/web/ui/account.ts
+  var AccountPanel = class {
+    constructor(menu, request) {
+      this.request = request;
+      this.button.id = "web-account";
+      this.button.className = "web-account";
+      this.button.type = "button";
+      this.button.hidden = true;
+      this.button.setAttribute("aria-haspopup", "dialog");
+      this.button.setAttribute("aria-controls", "account-dialog");
+      this.button.innerHTML = '<span class="web-avatar"></span><span class="web-account-name"></span>';
+      this.button.addEventListener("click", () => this.open());
+      menu.append(this.button);
+      this.dialog.id = "account-dialog";
+      this.dialog.className = "conversation-dialog account-dialog";
+      this.dialog.setAttribute("aria-labelledby", "account-title");
+      this.dialog.innerHTML = `
+      <header><span class="codicon codicon-account" aria-hidden="true"></span><h2 id="account-title">Workflow \u8D26\u53F7</h2><button id="close-account" type="button" class="icon-button" title="\u5173\u95ED\u8D26\u53F7" aria-label="\u5173\u95ED\u8D26\u53F7">${iconHtml("close")}</button></header>
+      <div class="dialog-body account-body">
+        <div id="account-status" role="status"></div>
+        <form id="login-form">
+          <label for="server-url">\u670D\u52A1\u5668</label><input id="server-url" type="url" required spellcheck="false" autocomplete="url">
+          <label for="login-email">\u90AE\u7BB1</label><input id="login-email" type="email" required autocomplete="username">
+          <label for="login-password">\u5BC6\u7801</label><div class="account-password"><input id="login-password" type="password" required autocomplete="current-password"><button id="show-password" type="button" class="icon-button" title="\u663E\u793A\u5BC6\u7801" aria-label="\u663E\u793A\u5BC6\u7801">${iconHtml("eye")}</button></div>
+          <div class="account-actions"><button id="login-submit" type="submit" class="account-primary">${iconHtml("sign-in")}<span>\u767B\u5F55</span></button><button id="browser-login" type="button" class="account-secondary">${iconHtml("link-external")}<span>\u6D4F\u89C8\u5668\u767B\u5F55</span></button></div>
+        </form>
+        <section id="account-profile" hidden>
+          <div class="account-identity"><span class="account-avatar"></span><div><h3 id="account-display-name"></h3><div id="account-email" class="account-muted"></div></div></div>
+          <dl><dt>\u670D\u52A1\u5668</dt><dd id="account-server"></dd><dt>\u6709\u6548\u671F</dt><dd id="account-expiry"></dd></dl>
+          <div class="account-actions"><button id="verify-login" type="button" class="account-secondary">${iconHtml("verified")}<span>\u9A8C\u8BC1\u767B\u5F55</span></button><button id="account-logout" type="button" class="account-secondary">${iconHtml("sign-out")}<span>\u9000\u51FA\u767B\u5F55</span></button></div>
+        </section>
+        <div id="account-error" role="alert" hidden></div>
+      </div>`;
+      document.body.append(this.dialog);
+      this.element("#close-account").addEventListener("click", () => this.dialog.close());
+      this.dialog.addEventListener("close", () => {
+        this.element("#login-password").value = "";
+        this.button.focus();
+      });
+      this.element("#login-form").addEventListener("submit", (event) => {
+        event.preventDefault();
+        if (this.pending || !this.element("#login-form").reportValidity()) {
+          return;
+        }
+        const password = this.element("#login-password");
+        const action = { type: "login", serverUrl: this.element("#server-url").value, email: this.element("#login-email").value, password: password.value };
+        password.value = "";
+        void this.perform(action);
+      });
+      this.element("#browser-login").addEventListener("click", () => {
+        const server = this.element("#server-url");
+        if (!this.pending && server.reportValidity()) {
+          void this.perform({ type: "login", serverUrl: server.value });
+        }
+      });
+      this.element("#show-password").addEventListener("click", (event) => {
+        const password = this.element("#login-password");
+        const visible = password.type === "password";
+        password.type = visible ? "text" : "password";
+        const button = event.currentTarget;
+        button.innerHTML = iconHtml(visible ? "eye-closed" : "eye");
+        button.title = button.ariaLabel = visible ? "\u9690\u85CF\u5BC6\u7801" : "\u663E\u793A\u5BC6\u7801";
+      });
+      this.element("#verify-login").addEventListener("click", () => {
+        if (!this.pending) {
+          void this.perform({ type: "verify" });
+        }
+      });
+      this.element("#account-logout").addEventListener("click", () => {
+        if (!this.pending) {
+          void this.perform({ type: "logout" });
+        }
+      });
+    }
+    request;
+    button = document.createElement("button");
+    dialog = document.createElement("dialog");
+    state;
+    pending = false;
+    avatarKey = "";
+    element(selector) {
+      return this.dialog.querySelector(selector);
+    }
+    open() {
+      this.render();
+      if (!this.dialog.open) {
+        this.dialog.showModal();
+      }
+    }
+    update(state) {
+      this.state = state;
+      this.button.hidden = false;
+      this.pending = state.status === "checking";
+      this.render();
+    }
+    render() {
+      const state = this.state;
+      if (!state) {
+        return;
+      }
+      const signedIn = !!state.user && ["authenticated", "checking", "error"].includes(state.status);
+      const name = signedIn ? state.user.displayName || state.user.email || "Workflow" : this.pending ? "\u767B\u5F55\u4E2D..." : "\u767B\u5F55 Workflow";
+      this.button.querySelector(".web-account-name").textContent = name;
+      this.button.title = this.button.ariaLabel = state.error || state.user?.email || name;
+      const avatarKey = `${state.serverUrl}
+${state.user?.avatarUrl ?? ""}`;
+      if (avatarKey !== this.avatarKey) {
+        this.avatarKey = avatarKey;
+        for (const avatar of [this.button.querySelector(".web-avatar"), this.element(".account-avatar")]) {
+          avatar.innerHTML = iconHtml("account");
+          if (!state.user?.avatarUrl) {
+            continue;
+          }
+          let url;
+          try {
+            url = new URL(state.user.avatarUrl, `${state.serverUrl}/`);
+          } catch {
+            continue;
+          }
+          if (!["http:", "https:"].includes(url.protocol) || url.username || url.password) {
+            continue;
+          }
+          const image = document.createElement("img");
+          image.src = url.toString();
+          image.alt = "";
+          image.hidden = true;
+          image.referrerPolicy = "no-referrer";
+          image.addEventListener("load", () => {
+            image.hidden = false;
+            avatar.firstElementChild.hidden = true;
+          });
+          image.addEventListener("error", () => {
+            image.hidden = true;
+            avatar.firstElementChild.hidden = false;
+          });
+          avatar.append(image);
+        }
+      }
+      this.element("#login-form").hidden = signedIn;
+      this.element("#account-profile").hidden = !signedIn;
+      const server = this.element("#server-url");
+      if (!server.value || signedIn && document.activeElement !== server) {
+        server.value = state.serverUrl;
+      }
+      this.dialog.querySelectorAll("input, #login-submit, #browser-login, #verify-login, #account-logout").forEach((element) => {
+        element.disabled = this.pending;
+      });
+      this.element("#login-submit > span:last-child").textContent = this.pending ? "\u767B\u5F55\u4E2D..." : "\u767B\u5F55";
+      const status = this.element("#account-status");
+      status.textContent = state.status === "authenticated" ? "\u5DF2\u767B\u5F55\uFF0C\u8D26\u53F7\u9A8C\u8BC1\u901A\u8FC7" : this.pending ? "\u6B63\u5728\u9A8C\u8BC1\u8D26\u53F7..." : state.status === "expired" ? "\u767B\u5F55\u5DF2\u5931\u6548" : state.status === "error" && state.user ? "\u8FDE\u63A5\u672A\u9A8C\u8BC1" : "\u672A\u767B\u5F55";
+      status.classList.toggle("connected", state.status === "authenticated");
+      this.showError(state.error);
+      if (state.user) {
+        this.element("#account-display-name").textContent = state.user.displayName || state.user.email;
+        this.element("#account-email").textContent = state.user.email;
+        this.element("#account-server").textContent = state.serverUrl;
+        this.element("#account-expiry").textContent = state.expiresAt ? new Date(state.expiresAt).toLocaleString("zh-CN") : "\u7531\u670D\u52A1\u5668\u7BA1\u7406";
+      }
+    }
+    showError(message) {
+      const error = this.element("#account-error");
+      error.textContent = message ?? "";
+      error.hidden = !message;
+    }
+    async perform(action) {
+      this.pending = true;
+      this.render();
+      this.showError();
+      try {
+        await this.request(action);
+      } catch (error) {
+        this.pending = false;
+        this.render();
+        this.showError(error.message);
+      }
+    }
+  };
+
+  // src/web/ui/connection.ts
+  var ConnectionError = class extends Error {
+  };
+  var BrowserConnection = class {
+    constructor(emit) {
+      this.emit = emit;
+      if (this.token) {
+        history.replaceState(null, "", `${location.pathname}${location.search}`);
+      }
+      queueMicrotask(() => {
+        this.banner = document.createElement("div");
+        this.banner.id = "connection-status";
+        this.banner.className = "connection-banner";
+        this.banner.setAttribute("role", "status");
+        this.banner.setAttribute("aria-live", "polite");
+        this.banner.innerHTML = `<span class="connection-icon" aria-hidden="true"></span><div class="connection-copy"><strong></strong><span></span></div><button type="button" class="connection-retry">${iconHtml("refresh")}<span>\u91CD\u65B0\u8FDE\u63A5</span></button>`;
+        this.banner.querySelector("button").addEventListener("click", () => {
+          void this.connect();
+        });
+        document.querySelector("main").prepend(this.banner);
+        void this.connect();
+      });
+      addEventListener("offline", () => {
+        this.source?.close();
+        clearTimeout(this.retry);
+        this.update("offline");
+      });
+      addEventListener("online", () => {
+        void this.connect();
+      });
+      addEventListener("pagehide", () => {
+        this.closed = true;
+        clearTimeout(this.retry);
+        this.source?.close();
+      }, { once: true });
+    }
+    emit;
+    source;
+    banner;
+    connecting;
+    retry;
+    status = "connecting";
+    attempts = 0;
+    closed = false;
+    token = new URLSearchParams(location.hash.slice(1)).get("session");
+    update(status) {
+      this.status = status;
+      this.emit({ type: "connection", status });
+      if (!this.banner) {
+        return;
+      }
+      this.banner.hidden = status === "connected";
+      this.banner.dataset.status = status;
+      const retrying = status === "connecting" || status === "reconnecting";
+      this.banner.querySelector(".connection-icon").innerHTML = iconHtml(retrying ? "loading" : status === "expired" ? "warning" : "debug-disconnect");
+      this.banner.querySelector("strong").textContent = status === "connecting" ? "\u6B63\u5728\u8FDE\u63A5\u9879\u76EE" : status === "expired" ? "\u9879\u76EE\u8FDE\u63A5\u5DF2\u5931\u6548" : "\u8FDE\u63A5\u5DF2\u4E2D\u65AD";
+      this.banner.querySelector(".connection-copy > span").textContent = status === "reconnecting" ? "\u6B63\u5728\u91CD\u65B0\u8FDE\u63A5..." : status === "offline" ? "\u7F51\u7EDC\u6062\u590D\u540E\u5C06\u81EA\u52A8\u91CD\u8FDE\u3002" : status === "expired" ? "\u8BF7\u4F7F\u7528\u9879\u76EE\u8FD0\u884C\u5730\u5740\u91CD\u65B0\u6253\u5F00\u3002" : "";
+      this.banner.querySelector("button").disabled = status === "offline" || !!this.connecting;
+    }
+    interrupted() {
+      this.source?.close();
+      clearTimeout(this.retry);
+      this.update(navigator.onLine ? "reconnecting" : "offline");
+      if (!this.closed && navigator.onLine) {
+        this.retry = setTimeout(() => {
+          void this.connect();
+        }, Math.min(2e3 * 2 ** this.attempts++, 3e4));
+      }
+    }
+    connect() {
+      if (this.connecting) {
+        return this.connecting;
+      }
+      clearTimeout(this.retry);
+      if (this.closed) {
+        return Promise.resolve();
+      }
+      if (!navigator.onLine) {
+        this.update("offline");
+        return Promise.resolve();
+      }
+      this.source?.close();
+      this.update(this.attempts ? "reconnecting" : "connecting");
+      this.connecting = (async () => {
+        try {
+          if (this.token) {
+            const session2 = await fetch("/api/session", { method: "POST", headers: { Authorization: `Bearer ${this.token}` }, signal: AbortSignal.timeout(1e4) });
+            if (!session2.ok) {
+              this.update("expired");
+              return;
+            }
+            this.token = null;
+          }
+          const session = await fetch("/api/session", { signal: AbortSignal.timeout(1e4) });
+          if (session.status === 401) {
+            this.update("expired");
+            return;
+          }
+          if (!session.ok) {
+            throw new Error("Cannot connect to the project.");
+          }
+          const source = this.source = new EventSource("/api/events");
+          source.onopen = () => {
+            this.attempts = 0;
+            this.update("connected");
+          };
+          source.onmessage = (event) => {
+            this.emit(JSON.parse(event.data));
+          };
+          source.onerror = () => {
+            if (this.source === source && !this.closed) {
+              this.interrupted();
+            }
+          };
+        } catch {
+          if (!this.closed) {
+            this.interrupted();
+          }
+        }
+      })().finally(() => {
+        this.connecting = void 0;
+        if (this.banner) {
+          this.banner.querySelector("button").disabled = this.status === "offline";
+        }
+      });
+      return this.connecting;
+    }
+    async request(message) {
+      await this.connecting;
+      if (this.status !== "connected") {
+        throw new ConnectionError("\u8FDE\u63A5\u5DF2\u4E2D\u65AD\u3002");
+      }
+      let response;
+      try {
+        response = await fetch("/api/message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(message) });
+      } catch {
+        this.interrupted();
+        throw new ConnectionError("\u8FDE\u63A5\u5DF2\u4E2D\u65AD\u3002");
+      }
+      if (response.status === 401) {
+        this.source?.close();
+        this.update("expired");
+        throw new ConnectionError("\u9879\u76EE\u8FDE\u63A5\u5DF2\u5931\u6548\u3002");
+      }
+      let reply;
+      try {
+        reply = await response.json();
+      } catch {
+        this.interrupted();
+        throw new ConnectionError("\u8FDE\u63A5\u5DF2\u4E2D\u65AD\u3002");
+      }
+      if (!response.ok) {
+        throw new Error(reply.message || "Request failed.");
+      }
+      return reply.messages ?? [];
+    }
+  };
+
   // src/web/ui/host.ts
   function acquireWorkflowHost() {
     const embedded = globalThis.acquireVsCodeApi;
@@ -3933,38 +4269,14 @@ ${JSON.stringify(output.details, null, 2)}` : "");
     }
     const storageKey = `workflow-web:${document.querySelector("meta[name=workflow-project]")?.content ?? location.pathname}`;
     const emit = (message) => window.dispatchEvent(new MessageEvent("message", { data: message }));
-    const token = new URLSearchParams(location.hash.slice(1)).get("session");
-    if (token) {
-      history.replaceState(null, "", `${location.pathname}${location.search}`);
-    }
-    let source;
-    const connected = (async () => {
-      if (token) {
-        const response = await fetch("/api/session", { method: "POST", headers: { Authorization: `Bearer ${token}` } });
-        if (!response.ok) {
-          throw new Error("Web session is unavailable. Open the URL printed by workflow-code web.");
-        }
+    const connection = new BrowserConnection((message) => {
+      if (message.type === "state" && message.account) {
+        accountPanel.update(message.account);
       }
-      source = new EventSource("/api/events");
-      source.onmessage = (event) => {
-        const message = JSON.parse(event.data);
-        if (message.type === "state") {
-          updateAccount(message);
-        }
-        emit(message);
-      };
-      source.onerror = () => emit({ type: "error", message: "\u8FDE\u63A5\u5DF2\u4E2D\u65AD\uFF0C\u6B63\u5728\u91CD\u65B0\u8FDE\u63A5..." });
-      addEventListener("pagehide", () => source.close(), { once: true });
-    })();
-    connected.catch((error) => emit({ type: "error", message: String(error.message) }));
+      emit(message);
+    });
     const request = async (message) => {
-      await connected;
-      const response = await fetch("/api/message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(message) });
-      const reply = await response.json();
-      if (!response.ok) {
-        throw new Error(reply.message || "Request failed.");
-      }
-      for (const entry of reply.messages ?? []) {
+      for (const entry of await connection.request(message)) {
         handleReply(entry);
       }
     };
@@ -4024,44 +4336,15 @@ ${JSON.stringify(output.details, null, 2)}` : "");
       picker.addEventListener("cancel", () => emit({ type: "attachment-cancelled", sessionId: message.sessionId }));
       picker.click();
     };
-    let account;
-    const updateAccount = (state) => {
-      account = state.account;
-      let button = document.querySelector("#web-account");
-      if (!button) {
-        button = document.createElement("button");
-        button.id = "web-account";
-        button.className = "web-account";
-        document.querySelector("#project-menu").append(button);
-        button.onclick = () => {
-          if (account?.status === "authenticated") {
-            if (confirm("\u9000\u51FA Workflow \u767B\u5F55\uFF1F")) {
-              void request({ type: "logout" }).catch((error) => emit({ type: "error", message: error.message }));
-            }
-          } else {
-            const serverUrl = prompt("Workflow Server", account?.serverUrl || "http://localhost:7126");
-            if (serverUrl) {
-              void request({ type: "login", serverUrl }).catch((error) => emit({ type: "error", message: error.message }));
-            }
-          }
-        };
-      }
-      button.replaceChildren();
-      const avatar = document.createElement("span");
-      avatar.className = "web-avatar codicon codicon-account";
-      if (account?.user?.avatarUrl && /^https?:\/\//.test(account.user.avatarUrl)) {
-        const image = document.createElement("img");
-        image.src = account.user.avatarUrl;
-        image.alt = "";
-        avatar.append(image);
-      }
-      const name = document.createElement("span");
-      name.textContent = account?.status === "authenticated" ? account.user?.displayName || account.user?.email || "Workflow" : account?.status === "checking" ? "\u767B\u5F55\u4E2D..." : "\u767B\u5F55 Workflow";
-      button.title = account?.error || account?.user?.email || name.textContent;
-      button.append(avatar, name);
-    };
+    let accountPanel;
+    queueMicrotask(() => {
+      accountPanel = new AccountPanel(document.querySelector("#project-menu"), request);
+    });
     return {
       postMessage: (message) => {
+        if (message.type === "ready") {
+          return;
+        }
         if (message.type === "copy") {
           void navigator.clipboard.writeText(message.text).catch((error) => emit({ type: "error", message: error.message }));
           return;
@@ -4085,10 +4368,10 @@ ${JSON.stringify(output.details, null, 2)}` : "");
           return;
         }
         if (message.type === "login") {
-          document.querySelector("#web-account")?.click();
+          accountPanel.open();
           return;
         }
-        void request(message).catch((error) => emit({ type: "error", requestType: message.type, sessionId: message.sessionId, messageId: message.messageId, requestId: message.requestId, message: error.message }));
+        void request(message).catch((error) => emit({ type: "error", silent: error instanceof ConnectionError, requestType: message.type, sessionId: message.sessionId, messageId: message.messageId, requestId: message.requestId, message: error.message }));
       },
       getState: () => {
         try {
@@ -4140,6 +4423,7 @@ ${JSON.stringify(output.details, null, 2)}` : "");
     let formKey = "";
     let paramStates = {};
     let resolving = false;
+    let connectionAvailable = true;
     let submitting = false;
     let requestId = 0;
     let paramsNeedInit = false;
@@ -4226,7 +4510,7 @@ ${JSON.stringify(output.details, null, 2)}` : "");
     }
     function requestParams(trigger) {
       clearTimeout(inputTimer);
-      if (!state || busy() || !fields.size) {
+      if (!state || !connectionAvailable || busy() || !fields.size) {
         return;
       }
       paramsNeedInit = false;
@@ -4457,7 +4741,7 @@ ${JSON.stringify(output.details, null, 2)}` : "");
       sendButton.innerHTML = iconHtml(stop ? "debug-stop" : submitting || uploading ? "loading" : conversation ? "arrow-up" : "play");
       sendButton.title = sendButton.ariaLabel = stop ? "\u505C\u6B62" : editingQueueId ? "\u4FDD\u5B58\u5F85\u53D1\u6D88\u606F" : conversation ? "\u53D1\u9001" : "\u8FD0\u884C";
       sendButton.classList.toggle("stop", stop);
-      sendButton.disabled = !stop && (submitting || resolving || uploading > 0 || conversation && state.project.conversation?.defaultInput?.enabled !== false && !hasInput);
+      sendButton.disabled = !connectionAvailable || !stop && (submitting || resolving || uploading > 0 || conversation && state.project.conversation?.defaultInput?.enabled !== false && !hasInput);
       textarea.disabled = busy();
       entrypoint.disabled = busy() || resolving;
       document.querySelector("#new").disabled = false;
@@ -5223,6 +5507,21 @@ ${JSON.stringify(output.details, null, 2)}` : "");
     let renderScheduled = false;
     window.addEventListener("message", (event) => {
       const message = event.data;
+      if (message.type === "connection") {
+        const restored = !connectionAvailable && message.status === "connected";
+        connectionAvailable = message.status === "connected";
+        if (!connectionAvailable) {
+          resolving = false;
+          requestId++;
+        }
+        sendButton.disabled = !connectionAvailable || sendButton.disabled;
+        updateControls();
+        if (restored && state) {
+          paramsNeedInit = true;
+          requestParams({ kind: "init" });
+        }
+        return;
+      }
       if (message.type === "assistant-command") {
         document.querySelector(message.command === "new" ? "#new" : "#history-toggle").click();
         return;
@@ -5323,7 +5622,9 @@ ${JSON.stringify(output.details, null, 2)}` : "");
           messages.get(message.messageId)?.prompt?.setBusy(false, message.message);
         }
         updateControls();
-        showError(message.message);
+        if (!message.silent) {
+          showError(message.message);
+        }
       }
     });
     vscode.postMessage({ type: "ready" });

package/dist/{web-U23BFLG4.js → web-KTQSEVQT.js}

@@ -6,7 +6,8 @@ import "./chunk-J2JMC4MZ.js";
 import "./chunk-G7PZDTYW.js";
 import {
   clearCliAuthConfig,
-  readCliAuthConfig
+  readCliAuthConfig,
+  writeCliAuthConfig
 } from "./chunk-PGM3IPWA.js";
 import "./chunk-BP2VDZQV.js";
 import {
@@ -915,6 +916,52 @@ function conversationResourceCards(items, projectId, conversationId) {
   return [...cards.values()];
 }
 
+// src/web/account-auth.ts
+async function loginWebAccount(serverUrl, email, password) {
+  if (!email.trim() || !password) {
+    throw new Error("\u8BF7\u8F93\u5165\u90AE\u7BB1\u548C\u5BC6\u7801\u3002");
+  }
+  let token = "";
+  let cookie = "";
+  let apiKeyId = "";
+  let saved = false;
+  const request = async (endpoint, options = {}) => {
+    const response = await fetch(`${serverUrl}${endpoint}`, { ...options, redirect: "error", signal: AbortSignal.timeout(15e3) });
+    const result = await response.json();
+    if (!response.ok || result.errCode !== 0 || !result.data) {
+      const message = response.status === 401 ? "\u90AE\u7BB1\u6216\u5BC6\u7801\u4E0D\u6B63\u786E\uFF0C\u6216\u767B\u5F55\u5DF2\u5931\u6548\u3002" : result.errMessage || "Workflow Server login failed.";
+      throw new Error(String(message).replaceAll(password, "[redacted]").replaceAll(token || "\0", "[redacted]"));
+    }
+    return { response, data: result.data };
+  };
+  try {
+    const result = await request("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email: email.trim(), password, source: "cli", clientName: "Workflow CLI Web" })
+    });
+    cookie = result.response.headers.getSetCookie().map((value) => value.split(";", 1)[0]).join("; ");
+    token = typeof result.data.accessToken === "string" ? result.data.accessToken : "";
+    apiKeyId = typeof result.data.apiKey?.id === "string" ? result.data.apiKey.id : "";
+    if (!result.data.authenticated || !token || !apiKeyId) {
+      throw new Error("Workflow Server did not return CLI login credentials.");
+    }
+    const { data: me } = await request("/api/auth/me", { headers: { Authorization: `Bearer ${token}` } });
+    if (typeof me.profile?.userId !== "string" || !me.profile.userId || typeof me.profile.email !== "string" || typeof me.profile.displayName !== "string") {
+      throw new Error("Workflow Server did not return an account profile.");
+    }
+    await writeCliAuthConfig({ serverUrl, apiKey: token, expiresAt: me.principal?.expiresAt ?? result.data.expiresAt, user: me.profile, source: "password" });
+    saved = true;
+  } finally {
+    if (cookie) {
+      if (!saved && apiKeyId) {
+        await request(`/api/auth/api-keys/${encodeURIComponent(apiKeyId)}`, { method: "DELETE", headers: { Cookie: cookie } }).catch(() => void 0);
+      }
+      await request("/api/auth/logout", { method: "POST", headers: { Cookie: cookie } }).catch(() => void 0);
+    }
+  }
+}
+
 // src/web/server.ts
 async function startWebServer(options) {
   const projectDir = await realpath(path2.resolve(options.projectDir));
@@ -927,6 +974,7 @@ async function startWebServer(options) {
   let signedOut = false;
   let authIdentity = "";
   let login;
+  let passwordLogin = false;
   const runtime = options.runtime ?? createWebRuntime(projectDir, storageDir, () => connection);
   let inspected;
   try {
@@ -1006,23 +1054,29 @@ async function startWebServer(options) {
       return pendingSave;
     }
   });
-  const refreshAuth = async () => {
+  const refreshAuth = async (force = false) => {
+    if (passwordLogin || login) {
+      return;
+    }
     const config = await readCliAuthConfig();
     const serverUrl = process.env.WORKFLOW_SERVER_URL ?? config.serverUrl;
     const token = process.env.WORKFLOW_SERVER_ADMIN_KEY ?? config.apiKey;
     const identity = signedOut ? "" : `${serverUrl}
 ${token}`;
-    if (identity === authIdentity && account.status !== "checking") {
+    if (!force && identity === authIdentity && account.status !== "checking") {
       return;
     }
+    const changed = identity !== authIdentity;
     authIdentity = identity;
     connection = !signedOut && serverUrl && token ? { serverUrl: serverUrl.replace(/\/+$/, ""), accessToken: token } : void 0;
-    authRevision++;
-    parameterStates.clear();
-    for (const session of controller.sessions) {
-      controller.stop(session);
+    if (changed) {
+      authRevision++;
+      parameterStates.clear();
+      for (const session of controller.sessions) {
+        controller.stop(session);
+      }
     }
-    account = { status: connection ? "checking" : "signed-out", serverUrl: serverUrl || "http://localhost:7126", revision: authRevision };
+    account = { status: connection ? "checking" : "signed-out", serverUrl: serverUrl || "http://localhost:7126", user: connection ? config.user ?? account.user : void 0, revision: account.revision + 1 };
     if (connection) {
       try {
         const response = await fetch(`${connection.serverUrl}/api/auth/me`, { headers: { Authorization: `Bearer ${connection.accessToken}` }, signal: AbortSignal.timeout(1e4), redirect: "error" });
@@ -1033,6 +1087,13 @@ ${token}`;
         account = { ...account, status: "authenticated", user: result.data.profile, expiresAt: result.data.principal?.expiresAt ?? config.expiresAt };
       } catch (error) {
         connection = void 0;
+        if (!changed) {
+          authRevision++;
+          parameterStates.clear();
+          for (const session of controller.sessions) {
+            controller.stop(session);
+          }
+        }
         account = { ...account, status: "error", error: String(error.message) };
       }
     }
@@ -1281,7 +1342,7 @@ ${token}`;
         if (process.env.WORKFLOW_SERVER_ADMIN_KEY !== void 0) {
           throw new Error("This session is supplied by the host. Sign in through the host.");
         }
-        if (login) {
+        if (login || passwordLogin) {
           break;
         }
         const url = new URL(String(message.serverUrl));
@@ -1291,6 +1352,23 @@ ${token}`;
         signedOut = false;
         account = { ...account, status: "checking" };
         broadcast();
+        if (message.email !== void 0 || message.password !== void 0) {
+          passwordLogin = true;
+          try {
+            if (typeof message.email !== "string" || typeof message.password !== "string") {
+              throw new Error("Invalid login credentials.");
+            }
+            await loginWebAccount(url.toString().replace(/\/+$/, ""), message.email, message.password);
+          } catch (error) {
+            account = { ...account, status: "error", error: String(error.message) };
+            broadcast();
+            throw error;
+          } finally {
+            passwordLogin = false;
+          }
+          await refreshAuth(true);
+          break;
+        }
         login = spawn2(process.execPath, [path2.join(cliRoot(), "dist/index.js"), "workspace", "login", "--server", url.toString().replace(/\/$/, "")], { shell: false, stdio: ["ignore", "ignore", "pipe"] });
         login.stderr?.on("data", (chunk) => process.stderr.write(chunk));
         login.once("error", (error) => {
@@ -1305,6 +1383,9 @@ ${token}`;
         });
         break;
       }
+      case "verify":
+        await refreshAuth(true);
+        break;
       case "logout":
         signedOut = true;
         login?.kill();
@@ -1344,6 +1425,10 @@ ${token}`;
           json(response, 401, { message: "Open the URL printed by workflow-code web." });
           return;
         }
+        if (url.pathname === "/api/session" && request.method === "GET") {
+          json(response, 200, { connected: true });
+          return;
+        }
         if (url.pathname === "/api/events" && request.method === "GET") {
           response.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive" });
           response.write(`data: ${JSON.stringify(state())}
@@ -1393,7 +1478,7 @@ ${token}`;
       }
       if (url.pathname === "/") {
         response.writeHead(200, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store", "Content-Security-Policy": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: http:; font-src 'self'; connect-src 'self'; media-src 'self' blob:; object-src 'none'; base-uri 'none'; frame-ancestors 'self' vscode-webview:; form-action 'self'" });
-        response.end(`<!doctype html><html lang="zh-CN" data-theme="${options.theme ?? "auto"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="workflow-project" content="${key}"><title>Workflow</title><link rel="stylesheet" href="/assets/codicons/codicon.css"><link rel="stylesheet" href="/assets/theme.css"><link rel="stylesheet" href="/assets/workflow-ui.css"></head><body data-surface="editor"><div id="app"></div><script src="/assets/workflow-ui.js" defer></script></body></html>`);
+        response.end(`<!doctype html><html lang="zh-CN" data-theme="${options.theme ?? "auto"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="workflow-project" content="${key}"><title>Workflow</title><link rel="stylesheet" href="/assets/codicons/codicon.css"><link rel="stylesheet" href="/assets/workflow-ui.css"><link rel="stylesheet" href="/assets/theme.css"></head><body data-surface="editor"><div id="app"></div><script src="/assets/workflow-ui.js" defer></script></body></html>`);
         return;
       }
       const assets = { "/assets/workflow-ui.js": "application/javascript", "/assets/workflow-ui.css": "text/css", "/assets/theme.css": "text/css", "/assets/codicons/codicon.css": "text/css", "/assets/codicons/codicon.ttf": "font/ttf" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workflow-code/cli",
-  "version": "0.2.4-20261010001.codex-cli-web",
+  "version": "0.2.4-20261010002.codex-cli-web",
   "type": "module",
   "bin": {
     "workflow-code": "./dist/index.js"
@@ -37,14 +37,14 @@
     "workflow-code": "0.2.4-20260929001",
     "@workflow-code/auth-config": "0.1.0",
     "@workflow-code/execution-targets": "0.1.0",
+    "@workflow-code/i18n": "0.1.0",
     "@workflow-code/openai-responses": "0.1.0",
     "@workflow-code/project-dependencies": "0.1.0",
-    "@workflow-code/i18n": "0.1.0",
     "@workflow-code/project-info": "0.1.0",
     "@workflow-code/project-upload": "0.1.0",
+    "@workflow-code/runtime-compatibility": "0.1.0",
     "@workflow-code/workflow-ids": "0.1.0",
-    "@workflow-code/workflow-mcp": "0.1.0",
-    "@workflow-code/runtime-compatibility": "0.1.0"
+    "@workflow-code/workflow-mcp": "0.1.0"
   },
   "scripts": {
     "bootstrap": "node scripts/bootstrap.mjs",