Merge branch 'Stack-Cairn:main' into main

Author: yyg-max

crates/agent-gateway/web/src/app/GatewayApp.tsx

@@ -311,6 +311,7 @@ export default function GatewayApp() {
   const [projectPickerOpen, setProjectPickerOpen] = useState(false);
   const [workspaceCreateModalOpen, setWorkspaceCreateModalOpen] = useState(false);
   const [settingsSection, setSettingsSection] = useState<SectionId>("system");
+  const [settingsProviderId, setSettingsProviderId] = useState<string>();
   const [overlay, setOverlay] = useState<OverlayState>("closed");
   const { settings, setSettings, settingsSyncReady, settingsSyncError, settingsSaveState } =
     useGatewaySettingsSync({ token, api, activeAgentId: activeAgentScope });
@@ -3626,11 +3627,12 @@ export default function GatewayApp() {
 
   const handleComposerBusyChange = useCallback((_isBusy: boolean) => {}, []);
 
-  function openSettings(section: SectionId = "system") {
+  function openSettings(section: SectionId = "system", providerId?: string) {
     if (isMobileSidebarLayout()) {
       setSidebarOpen(false);
     }
     setSettingsSection(section);
+    setSettingsProviderId(section === "providers" ? providerId : undefined);
     setSettingsOpen(true);
     setOverlay("entering");
     requestAnimationFrame(() => requestAnimationFrame(() => setOverlay("open")));
@@ -5203,6 +5205,7 @@ export default function GatewayApp() {
                 saveState={settingsSaveState}
                 onBack={closeSettings}
                 initialSection={settingsSection}
+                initialProviderId={settingsProviderId}
                 hiddenSections={["remote"]}
                 onAgentDirectoryChanged={async () => {
                   if (!api) return;

crates/agent-gateway/web/src/components/chat/AskUserQuestionCard.tsx

@@ -26,11 +26,23 @@ function formatCountdown(remainingMs: number) {
 /**
  * 倒计时提示：优先使用调用方传入的权威截止时间（GUI 读工具挂起表，WebUI 读
  * 网关参数上的 deadline 盖章），两端与桌面计时同源；缺失时（历史/降级数据）
- * 回退为挂载时刻近似。超时后 tool_result 会把卡片切到只读态。
+ * 回退为挂载时刻近似。倒计时归零立即禁止交互，随后 tool_result 把卡片
+ * 切到只读态。
+ *
+ * 盖章用的是桌面时钟，而倒计时读本机时钟：远端浏览器时钟偏移足够大时，
+ * 一个仍在挂起的提问会在挂载瞬间就显示过期（或远超完整窗口）。因此仅当
+ * 截止时间落在“挂载时刻（不含）～挂载时刻 + 完整应答窗口（含）”内才采信，
+ * 否则视为时钟不可比、回退挂载近似，避免把可作答的卡片锁死；真正过期的
+ * 提交仍由桌面挂起表权威拒绝。
  */
 function useAnswerCountdown(active: boolean, deadlineAt?: number) {
-  const [fallbackDeadline] = useState(() => Date.now() + ASK_USER_QUESTION_TIMEOUT_MS);
-  const deadline = deadlineAt ?? fallbackDeadline;
+  const [mountedAt] = useState(() => Date.now());
+  const deadline =
+    deadlineAt !== undefined &&
+    deadlineAt > mountedAt &&
+    deadlineAt <= mountedAt + ASK_USER_QUESTION_TIMEOUT_MS
+      ? deadlineAt
+      : mountedAt + ASK_USER_QUESTION_TIMEOUT_MS;
   const [remainingMs, setRemainingMs] = useState(() => deadline - Date.now());
 
   useEffect(() => {
@@ -98,8 +110,10 @@ export function AskUserQuestionCard({
 
   const isSettled = (answers?.length ?? 0) > 0;
   const selections = isSettled ? settledSelections : draftSelections;
-  const canInteract = interactive && !isSettled && !cancelled && !submitting;
-  const remainingMs = useAnswerCountdown(interactive && !isSettled && !cancelled, deadlineAt);
+  const countdownActive = interactive && !isSettled && !cancelled;
+  const remainingMs = useAnswerCountdown(countdownActive, deadlineAt);
+  const countdownExpired = countdownActive && remainingMs <= 0;
+  const canInteract = countdownActive && remainingMs > 0 && !submitting;
 
   // 该题是否已作答：普通选项已选，或“其他”选中且文本非空。
   const isQuestionAnswered = (questionId: string) => {
@@ -267,7 +281,9 @@ export function AskUserQuestionCard({
                     canInteract && !isSelected
                       ? "hover:border-border/70 hover:bg-foreground/[0.03] dark:hover:border-white/[0.14]"
                       : "",
-                    !canInteract && !isSelected && (isSettled || cancelled) ? "opacity-55" : "",
+                    !canInteract && !isSelected && (isSettled || cancelled || countdownExpired)
+                      ? "opacity-55"
+                      : "",
                     canInteract ? "cursor-pointer" : "cursor-default",
                   )}
                 >
@@ -323,7 +339,9 @@ export function AskUserQuestionCard({
                 canInteract && !activeCustomSelected
                   ? "hover:border-border/70 hover:bg-foreground/[0.03] dark:hover:border-white/[0.14]"
                   : "",
-                !canInteract && !activeCustomSelected && (isSettled || cancelled)
+                !canInteract &&
+                  !activeCustomSelected &&
+                  (isSettled || cancelled || countdownExpired)
                   ? "opacity-55"
                   : "",
                 canInteract ? "cursor-pointer" : "cursor-default",
@@ -403,7 +421,7 @@ export function AskUserQuestionCard({
             </span>
             <button
               type="button"
-              disabled={!allAnswered || submitting}
+              disabled={!allAnswered || !canInteract}
               onClick={() => void submit()}
               className="shrink-0 rounded-lg bg-primary px-3 py-1.5 text-[calc(11px*var(--zone-font-scale,1))] font-medium leading-none text-primary-foreground transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-40"
             >

crates/agent-gateway/web/src/i18n/config.ts

@@ -1386,8 +1386,6 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.noCustomHeaders": "暂无自定义请求头",
     "settings.noCustomHeadersHint": "点击此处新增，输入名称时会自动联想常用请求头。",
     "settings.customHeaderReservedTitle": "保留头，由系统管理",
-    "settings.showCustomHeaderValue": "显示请求头值",
-    "settings.hideCustomHeaderValue": "隐藏请求头值",
     "settings.manualAddModel": "手动添加",
     "settings.customHeaderKeyPlaceholder": "请求头名称",
     "settings.addCustomHeader": "添加",
@@ -3613,8 +3611,6 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.noCustomHeadersHint":
       "Click to add one — common header names are suggested as you type.",
     "settings.customHeaderReservedTitle": "Reserved header managed by the system",
-    "settings.showCustomHeaderValue": "Show header value",
-    "settings.hideCustomHeaderValue": "Hide header value",
     "settings.manualAddModel": "Add manually",
     "settings.customHeaderKeyPlaceholder": "Header name",
     "settings.addCustomHeader": "Add",

crates/agent-gateway/web/src/pages/SettingsPage.tsx

@@ -130,11 +130,13 @@ export function SettingsPage(props: SettingsPageProps) {
     saveState,
     onBack,
     initialSection = "system",
+    initialProviderId,
     hiddenSections = [],
     onAgentDirectoryChanged,
   } = props;
   const { t } = useLocale();
   const [section, setSection] = useState<SectionId>(initialSection);
+  const [pendingProviderId, setPendingProviderId] = useState(initialProviderId);
 
   const sectionLabels: Record<SectionId, string> = {
     system: t("settings.navSystem"),
@@ -164,7 +166,8 @@ export function SettingsPage(props: SettingsPageProps) {
 
   useEffect(() => {
     setSection(initialSection);
-  }, [initialSection]);
+    setPendingProviderId(initialProviderId);
+  }, [initialProviderId, initialSection]);
 
   useEffect(() => {
     if (allNavItems.some((item) => item.id === section)) {
@@ -177,7 +180,14 @@ export function SettingsPage(props: SettingsPageProps) {
   const sectionContent = (() => {
     switch (section) {
       case "providers":
-        return <ProvidersSection settings={settings} setSettings={setSettings} />;
+        return (
+          <ProvidersSection
+            settings={settings}
+            setSettings={setSettings}
+            initialProviderId={pendingProviderId}
+            onInitialProviderHandled={() => setPendingProviderId(undefined)}
+          />
+        );
       case "system":
         return <SystemSettingsForm settings={settings} setSettings={setSettings} />;
       case "systemTools":

crates/agent-gateway/web/src/pages/chat/ChatHeader.tsx

@@ -12,6 +12,7 @@ import {
   Moon,
   OpenaiChatgptIcon,
   PanelLeft,
+  Pencil,
   Search,
   Settings,
   Sun,
@@ -64,7 +65,7 @@ export const ChatHeader = memo(function ChatHeader(props: {
   // 模型下拉内嵌的执行模式分段器：请求切到 Chat("text") 或 Agent("tools")。
   // agent-dev 视为 Agent 的一种，由调用方决定是否保持不降级。
   onSelectExecutionMode: (mode: "text" | "tools") => void;
-  onOpenSettings: (section?: SectionId) => void;
+  onOpenSettings: (section?: SectionId, providerId?: string) => void;
   onToggleTheme: () => void;
   onOpenSidebar: () => void;
   preThemeActions?: ReactNode;
@@ -303,28 +304,50 @@ export const ChatHeader = memo(function ChatHeader(props: {
                       return (
                         <div key={group.id} className="flex flex-col gap-0.5">
                           {groupIndex > 0 ? <hr className="my-1 h-px border-0 bg-muted" /> : null}
-                          <button
-                            type="button"
-                            onClick={() => toggleGroup(group.id)}
-                            aria-expanded={expanded}
-                            title={expanded ? t("chat.collapseProvider") : t("chat.expandProvider")}
-                            className="model-selector-group-label sticky top-0 z-10 flex h-[30px] w-full shrink-0 cursor-pointer items-center gap-1.5 bg-popover/95 px-2 py-0 text-left text-xs font-medium text-muted-foreground backdrop-blur transition-colors hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 supports-[backdrop-filter]:bg-popover/80 dark:text-white/80"
-                          >
-                            <ProviderBrandIcon
-                              type={group.providerType}
-                              className="h-3.5 w-3.5 opacity-90"
-                            />
-                            <span className="min-w-0 flex-1 truncate">{group.name}</span>
-                            <span className="inline-flex h-4 min-w-[1.1rem] shrink-0 items-center justify-center rounded-full bg-muted/70 px-1 text-[10px] tabular-nums">
-                              {group.opts.length}
-                            </span>
-                            <ChevronDown
-                              className={cn(
-                                "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
-                                expanded && "rotate-180",
-                              )}
-                            />
-                          </button>
+                          <div className="group sticky top-0 z-10 flex h-[30px] shrink-0 items-stretch bg-popover/95 backdrop-blur transition-colors hover:bg-muted/40 focus-within:bg-muted/40 supports-[backdrop-filter]:bg-popover/80">
+                            <button
+                              type="button"
+                              onClick={() => toggleGroup(group.id)}
+                              aria-expanded={expanded}
+                              className="model-selector-group-label flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 px-2 py-0 text-left text-xs font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 dark:text-white/80"
+                            >
+                              <ProviderBrandIcon
+                                type={group.providerType}
+                                className="h-3.5 w-3.5 opacity-90"
+                              />
+                              <span className="min-w-0 flex-1 truncate">{group.name}</span>
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setIsModelPickerOpen(false);
+                                onOpenSettings("providers", group.id);
+                              }}
+                              aria-label={`${t("settings.editProvider")}: ${group.name}`}
+                              className="pointer-events-none flex w-7 max-w-0 shrink-0 cursor-pointer items-center justify-center overflow-hidden text-muted-foreground/70 opacity-0 transition-[max-width,opacity,color,background-color] duration-150 group-hover:max-w-7 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:max-w-7 group-focus-within:pointer-events-auto group-focus-within:opacity-100 hover:bg-muted/60 hover:text-foreground focus-visible:max-w-7 focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+                            >
+                              <Pencil className="h-3.5 w-3.5" />
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => toggleGroup(group.id)}
+                              aria-expanded={expanded}
+                              aria-label={`${
+                                expanded ? t("chat.collapseProvider") : t("chat.expandProvider")
+                              }: ${group.name}`}
+                              className="model-selector-group-label flex shrink-0 cursor-pointer items-center gap-1.5 px-2 py-0 text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 dark:text-white/80"
+                            >
+                              <span className="inline-flex h-4 min-w-[1.1rem] shrink-0 items-center justify-center rounded-full bg-muted/70 px-1 text-[10px] tabular-nums">
+                                {group.opts.length}
+                              </span>
+                              <ChevronDown
+                                className={cn(
+                                  "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+                                  expanded && "rotate-180",
+                                )}
+                              />
+                            </button>
+                          </div>
                           {expanded
                             ? group.opts.map((option) => {
                                 const isSelected = option.value === selectedValue;