fix: make gateway headers structured in settings

Author: Pyiner

desktop/garyx-desktop/src/renderer/src/GatewayHeadersEditor.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+
+import {
+  formatGatewayHeaderEntries,
+  parseGatewayHeaderEntries,
+  type GatewayHeaderEntry,
+} from '@shared/gateway-headers';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useI18n } from './i18n';
+
+type GatewayHeaderRow = GatewayHeaderEntry & {
+  id: string;
+};
+
+type GatewayHeadersEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+};
+
+let nextHeaderRowId = 0;
+
+function createHeaderRow(entry?: Partial<GatewayHeaderEntry>): GatewayHeaderRow {
+  nextHeaderRowId += 1;
+  return {
+    id: `gateway-header-${nextHeaderRowId}`,
+    name: entry?.name ?? '',
+    value: entry?.value ?? '',
+  };
+}
+
+function rowsFromValue(value: string): GatewayHeaderRow[] {
+  const rows = parseGatewayHeaderEntries(value).map((entry) => createHeaderRow(entry));
+  return rows.length > 0 ? rows : [createHeaderRow()];
+}
+
+function rowsToValue(rows: readonly GatewayHeaderRow[]): string {
+  return formatGatewayHeaderEntries(rows);
+}
+
+export function GatewayHeadersEditor({
+  value,
+  onChange,
+  className,
+}: GatewayHeadersEditorProps) {
+  const { t } = useI18n();
+  const lastValueRef = useRef(value);
+  const [rows, setRows] = useState<GatewayHeaderRow[]>(() => rowsFromValue(value));
+
+  useEffect(() => {
+    if (value === lastValueRef.current) {
+      return;
+    }
+    lastValueRef.current = value;
+    setRows(rowsFromValue(value));
+  }, [value]);
+
+  function emit(nextRows: GatewayHeaderRow[]) {
+    setRows(nextRows);
+    const nextValue = rowsToValue(nextRows);
+    lastValueRef.current = nextValue;
+    onChange(nextValue);
+  }
+
+  function updateRow(rowId: string, field: 'name' | 'value', nextValue: string) {
+    emit(rows.map((row) => (row.id === rowId ? { ...row, [field]: nextValue } : row)));
+  }
+
+  function removeRow(rowId: string) {
+    const nextRows = rows.filter((row) => row.id !== rowId);
+    emit(nextRows.length > 0 ? nextRows : [createHeaderRow()]);
+  }
+
+  function addRow() {
+    setRows((current) => [...current, createHeaderRow()]);
+  }
+
+  return (
+    <div className={['gateway-headers-editor', className].filter(Boolean).join(' ')}>
+      <div className="gateway-headers-editor-list">
+        {rows.map((row) => (
+          <div className="gateway-headers-editor-row" key={row.id}>
+            <Input
+              autoCapitalize="off"
+              autoComplete="off"
+              aria-label={t('Header name')}
+              className="gateway-headers-editor-input"
+              placeholder={t('Header name')}
+              spellCheck={false}
+              type="text"
+              value={row.name}
+              onChange={(event) => updateRow(row.id, 'name', event.target.value)}
+            />
+            <Input
+              autoCapitalize="off"
+              autoComplete="off"
+              aria-label={t('Header value')}
+              className="gateway-headers-editor-input"
+              placeholder={t('Header value')}
+              spellCheck={false}
+              type="text"
+              value={row.value}
+              onChange={(event) => updateRow(row.id, 'value', event.target.value)}
+            />
+            <Button
+              aria-label={t('Remove header')}
+              className="gateway-headers-editor-remove"
+              disabled={rows.length === 1 && !row.name.trim() && !row.value.trim()}
+              onClick={() => removeRow(row.id)}
+              size="icon-sm"
+              type="button"
+              variant="ghost"
+            >
+              <Trash2 aria-hidden />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button
+        className="gateway-headers-editor-add"
+        onClick={addRow}
+        size="sm"
+        type="button"
+        variant="outline"
+      >
+        <Plus aria-hidden />
+        {t('Add header')}
+      </Button>
+    </div>
+  );
+}

desktop/garyx-desktop/src/renderer/src/GatewaySettingsPanel.tsx

@@ -76,6 +76,7 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { buildAgentTargetOptions, type AgentTargetOption } from './app-shell/agent-options';
 import { AddBotDialog } from './app-shell/components/AddBotDialog';
 import { AgentOptionAvatar } from './app-shell/components/AgentOptionAvatar';
+import { GatewayHeadersEditor } from './GatewayHeadersEditor';
 import { WorkspacePathPicker } from './components/WorkspacePathPicker';
 import { MoreDotsIcon } from './app-shell/icons';
 import { ChannelPluginCatalogPanel } from './channel-plugins/ChannelPluginCatalogPanel';
@@ -1344,18 +1345,13 @@ function GatewayProfileDialog({
               onChange={(event) => setGatewayAuthToken(event.target.value)}
             />
           </label>
-          <label className="gateway-setup-field">
+          <div className="gateway-setup-field">
             <span>{t('Headers')}</span>
-            <Textarea
-              autoCapitalize="off"
-              autoComplete="off"
-              className="gateway-profile-headers-editor"
-              placeholder="X-Garyx-Gateway: value"
-              spellCheck={false}
+            <GatewayHeadersEditor
               value={gatewayHeaders}
-              onChange={(event) => setGatewayHeaders(event.target.value)}
+              onChange={setGatewayHeaders}
             />
-          </label>
+          </div>
         </div>
         <DialogFooter>
           <Button

desktop/garyx-desktop/src/renderer/src/app-shell/AppShell.tsx

@@ -98,10 +98,10 @@ import {
 } from "../message-machine";
 import type { SettingsTabId } from "../settings-tabs";
 import { GatewayProfileHistoryButton } from "../GatewayProfileHistoryButton";
+import { GatewayHeadersEditor } from "../GatewayHeadersEditor";
 import { GatewayIdentityBar } from "../GatewaySwitcher";
 import { SettingsErrorBoundary } from "../SettingsErrorBoundary";
 import { Input } from "../components/ui/input";
-import { Textarea } from "../components/ui/textarea";
 import { WorkspacePathPickerDialog } from "../components/WorkspacePathPicker";
 import { AddBotDialog } from "./components/AddBotDialog";
 import { DreamsPanel } from "./components/DreamsPanel";
@@ -9981,24 +9981,19 @@ export function AppShell() {
                 />
               </label>
 
-              <label className="gateway-setup-field">
+              <div className="gateway-setup-field">
                 <span>{t('Headers')}</span>
-                <Textarea
-                  autoCapitalize="off"
-                  autoComplete="off"
-                  className="gateway-setup-textarea"
-                  placeholder="X-Garyx-Gateway: value"
-                  spellCheck={false}
+                <GatewayHeadersEditor
                   value={settingsDraft.gatewayHeaders}
-                  onChange={(event) => {
+                  onChange={(value) => {
                     setLocalSettingsStatus(null);
                     setSettingsDraft((current) => ({
                       ...current,
-                      gatewayHeaders: event.target.value,
+                      gatewayHeaders: value,
                     }));
                   }}
                 />
-              </label>
+              </div>
             </div>
 
             <p

desktop/garyx-desktop/src/renderer/src/i18n/index.tsx

@@ -811,6 +811,10 @@ const zhCN: Record<string, string> = {
   'Global': '全局',
   'Global prompt shortcuts are loaded from the current Gateway config.': '全局提示词快捷指令会从当前 Gateway 配置加载。',
   'Headers': '标头',
+  'Header name': '标头名称',
+  'Header value': '标头值',
+  'Add header': '添加标头',
+  'Remove header': '删除标头',
   '{count} custom headers': '{count} 个自定义标头',
   'Hide Advanced': '隐藏高级',
   'hours': '小时',

desktop/garyx-desktop/src/renderer/src/styles.css

@@ -468,13 +468,48 @@ code {
   box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
 }
 
-.gateway-setup-textarea,
-.gateway-profile-headers-editor {
-  min-height: 92px;
+.gateway-headers-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.gateway-headers-editor-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gateway-headers-editor-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 32px;
+  gap: 6px;
+  align-items: center;
+}
+
+.gateway-headers-editor-row .gateway-headers-editor-input:first-child {
+  grid-column: 1 / -1;
+}
+
+.gateway-headers-editor-input {
+  height: 34px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 12px;
 }
 
+.gateway-headers-editor-remove {
+  color: rgba(15, 23, 42, 0.52);
+}
+
+.gateway-headers-editor-add {
+  align-self: flex-start;
+  border-color: #e7e7e5;
+  background: #fff;
+  color: #111;
+  box-shadow: none;
+}
+
 .gateway-url-input-shell {
   position: relative;
   width: 100%;

desktop/garyx-desktop/src/shared/gateway-headers.ts

@@ -1,5 +1,10 @@
 const HEADER_NAME_PATTERN = /^[!#$%&'*+.^_`|~0-9A-Za-z-]+$/;
 
+export interface GatewayHeaderEntry {
+  name: string;
+  value: string;
+}
+
 export function normalizeGatewayHeadersBlock(value: unknown): string {
   if (typeof value !== "string") {
     return "";
@@ -12,32 +17,60 @@ export function normalizeGatewayHeadersBlock(value: unknown): string {
     .join("\n");
 }
 
-export function parseGatewayHeadersBlock(value: unknown): Record<string, string> {
-  const headers: Record<string, string> = {};
+function headerSeparatorIndex(line: string): number {
+  const colonIndex = line.indexOf(":");
+  const equalsIndex = line.indexOf("=");
+  if (colonIndex >= 0 && (equalsIndex < 0 || colonIndex < equalsIndex)) {
+    return colonIndex;
+  }
+  return equalsIndex;
+}
+
+export function parseGatewayHeaderEntries(value: unknown): GatewayHeaderEntry[] {
   const block = normalizeGatewayHeadersBlock(value);
   if (!block) {
-    return headers;
+    return [];
   }
 
+  const entries: GatewayHeaderEntry[] = [];
   for (const line of block.split("\n")) {
     if (!line || line.startsWith("#")) {
       continue;
     }
-    const colonIndex = line.indexOf(":");
-    const equalsIndex = line.indexOf("=");
-    const separatorIndex =
-      colonIndex >= 0 && (equalsIndex < 0 || colonIndex < equalsIndex)
-        ? colonIndex
-        : equalsIndex;
+    const separatorIndex = headerSeparatorIndex(line);
     if (separatorIndex <= 0) {
       continue;
     }
     const name = line.slice(0, separatorIndex).trim();
-    const rawValue = line.slice(separatorIndex + 1).trim();
+    if (!name) {
+      continue;
+    }
+    entries.push({
+      name,
+      value: line.slice(separatorIndex + 1).trim(),
+    });
+  }
+  return entries;
+}
+
+export function formatGatewayHeaderEntries(entries: readonly GatewayHeaderEntry[]): string {
+  return entries
+    .map((entry) => ({
+      name: entry.name.trim(),
+      value: entry.value.trim(),
+    }))
+    .filter((entry) => entry.name.length > 0)
+    .map((entry) => `${entry.name}: ${entry.value}`)
+    .join("\n");
+}
+
+export function parseGatewayHeadersBlock(value: unknown): Record<string, string> {
+  const headers: Record<string, string> = {};
+  for (const { name, value: headerValue } of parseGatewayHeaderEntries(value)) {
     if (!HEADER_NAME_PATTERN.test(name)) {
       continue;
     }
-    headers[name] = rawValue;
+    headers[name] = headerValue;
   }
 
   return headers;

docs/configuration.md

@@ -867,8 +867,8 @@ gateway connection shape:
 
 - `gatewayUrl`: the URL the phone can reach.
 - `gatewayAuthToken`: the token created by `garyx gateway token`.
-- `gatewayHeaders`: optional custom HTTP headers, one per line, for reverse
-  proxies or tunnels.
+- `gatewayHeaders`: optional custom HTTP headers for reverse proxies or
+  tunnels; the apps edit these as one name/value row per header.
 
 For a physical phone, the gateway must be reachable from the LAN. A managed
 macOS gateway service is installed to listen on `0.0.0.0`; if you run the