From b63b4cefaf9e4251cdd715a33f6850eb08213181 Mon Sep 17 00:00:00 2001
From: Kresna <13603341+slaveofcode@users.noreply.github.com>
Date: Sun, 16 Aug 2026 13:43:18 +0700
Subject: [PATCH] feat(api-client): rename envs, env help, sent-request
 inspector, collection redesign
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Environments can now be renamed (name field in the env editor), not stuck
  on 'New Environment'.
- An info (i) toggle by ENV explains how variables and {{name}} substitution work.
- New 'Request' response tab shows the actual outgoing request (method, resolved
  URL, headers incl. auth, body) with variables resolved — to validate what was
  sent. Pure summarizeSentRequest() is unit-tested.
- Collection list redesigned: method badge chips, active-request highlight,
  request-count pill, hover-reveal actions.
---
 .../2026-08-16-api-client-improvements.md     |  14 ++
 src/islands/dev/ApiClient.tsx                 | 164 ++++++++++++++----
 src/registry/tool-seo.ts                      |  10 +-
 src/tools/dev/api-client-request.lib.test.ts  |  30 +++-
 src/tools/dev/api-client-request.lib.ts       |  25 +++
 5 files changed, 200 insertions(+), 43 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-08-16-api-client-improvements.md

diff --git a/docs/superpowers/plans/2026-08-16-api-client-improvements.md b/docs/superpowers/plans/2026-08-16-api-client-improvements.md
new file mode 100644
index 0000000..b7a7780
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-16-api-client-improvements.md
@@ -0,0 +1,14 @@
+# API Client — UX Improvements
+
+**Date:** 2026-08-16 · Improve existing tool (`api-client`, Dev).
+
+Four user-requested improvements:
+1. **Rename environments** — env edit panel now has a Name field (was stuck on "New Environment"); `onRenameEnv` mutates the env name.
+2. **Explain environments** — an Info (ⓘ) toggle by the ENV header reveals how variables + `{{name}}` substitution work; env edit uses a Pencil icon and shows a KEY=value placeholder.
+3. **Sent-request inspector** — new "Request" tab in the response panel shows the actual outgoing request (method, resolved URL, headers incl. auth, body) with `{{variables}}` resolved. Backed by pure `summarizeSentRequest(req)` in `api-client-request.lib.ts` (unit-tested). The sidebar History tab already logs every sent request.
+4. **Collection list redesign** — colored method badge chips, active-request highlight (accent left-border + tint), collection request-count pill, folder icon, hover-reveal actions.
+
+Also updated EN + ID SEO (howTo + a new FAQ about inspecting the sent request).
+
+## DoD
+`summarizeSentRequest` unit-tested · full suite + lint + build green · env-help verified rendering via headless screenshot · ship develop→main→verify live.
diff --git a/src/islands/dev/ApiClient.tsx b/src/islands/dev/ApiClient.tsx
index a975fd4..dd4f4eb 100644
--- a/src/islands/dev/ApiClient.tsx
+++ b/src/islands/dev/ApiClient.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
-import { Check, Upload, Download, Plus, Folder, History, Key, Trash2, ChevronDown, ChevronRight, Send, RefreshCw, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Check, Upload, Download, Plus, Folder, History, Key, Trash2, ChevronDown, ChevronRight, Send, RefreshCw, X, Info, Pencil } from 'lucide-react';
 import { isTauri } from '@/services/platform';
 import { loadWorkspace, saveWorkspace, defaultRequestDef, pushResponseToRequest, addToHistory } from '@/tools/dev/api-client-store.lib';
 import { substituteRequest, applyCapture } from '@/tools/dev/api-client-env.lib';
-import { executeRequest } from '@/tools/dev/api-client-request.lib';
+import { executeRequest, summarizeSentRequest } from '@/tools/dev/api-client-request.lib';
 import { detectAndParse } from '@/tools/dev/api-client-import.lib';
 import { exportPostman, exportWorkspace } from '@/tools/dev/api-client-export.lib';
 import { downloadService } from '@/services/download';
@@ -221,6 +221,7 @@ export default function ApiClient() {
             mutate(w => ({ ...w, envs: [...w.envs, env], activeEnvId: env.id }));
           }}
           onUpdateEnvVars={(id, vars) => mutate(w => ({ ...w, envs: w.envs.map(e => e.id === id ? { ...e, vars } : e) }))}
+          onRenameEnv={(id, name) => mutate(w => ({ ...w, envs: w.envs.map(e => e.id === id ? { ...e, name } : e) }))}
         />
 
         {/* Right pane */}
@@ -265,7 +266,7 @@ function ImportButton({ onImport }: { onImport: (f: File) => void }) {
 
 function ApiSidebar({
   workspace, onSelectRequest, onNewRequest, onSelectCollection,
-  onSelectEnv, onDeleteCollection, onExportCollection, onAddEnv, onUpdateEnvVars,
+  onSelectEnv, onDeleteCollection, onExportCollection, onAddEnv, onUpdateEnvVars, onRenameEnv,
 }: {
   workspace: Workspace;
   onSelectRequest: (id: string) => void;
@@ -276,11 +277,14 @@ function ApiSidebar({
   onExportCollection: (col: Collection) => void;
   onAddEnv: () => void;
   onUpdateEnvVars: (id: string, vars: Record<string, string>) => void;
+  onRenameEnv: (id: string, name: string) => void;
 }) {
   const [tab, setTab] = useState<'collections' | 'history'>('collections');
   const [openCols, setOpenCols] = useState<Set<string>>(new Set());
   const [editingEnvId, setEditingEnvId] = useState<string | null>(null);
   const [envDraft, setEnvDraft] = useState('');
+  const [envNameDraft, setEnvNameDraft] = useState('');
+  const [showEnvHelp, setShowEnvHelp] = useState(false);
 
   const toggleCol = (id: string) => setOpenCols(prev => {
     const s = new Set(prev);
@@ -293,6 +297,7 @@ function ApiSidebar({
   const startEditEnv = () => {
     if (!activeEnv) return;
     setEnvDraft(Object.entries(activeEnv.vars).map(([k, v]) => `${k}=${v}`).join('\n'));
+    setEnvNameDraft(activeEnv.name);
     setEditingEnvId(activeEnv.id);
   };
 
@@ -304,6 +309,8 @@ function ApiSidebar({
       if (eq > 0) vars[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
     });
     onUpdateEnvVars(editingEnvId, vars);
+    const name = envNameDraft.trim();
+    if (name) onRenameEnv(editingEnvId, name);
     setEditingEnvId(null);
   };
 
@@ -329,22 +336,30 @@ function ApiSidebar({
           {workspace.collections.length === 0 && (
             <p className="p-3 text-xs text-muted-foreground">Import a collection to get started.</p>
           )}
-          {workspace.collections.map(col => (
-            <div key={col.id}>
-              <div className="flex cursor-pointer items-center gap-1 px-2 py-1 font-bold hover:bg-muted"
-                onClick={() => { toggleCol(col.id); onSelectCollection(col.id); }}>
-                {openCols.has(col.id) ? <ChevronDown className="h-3.5 w-3.5 shrink-0" /> : <ChevronRight className="h-3.5 w-3.5 shrink-0" />}
-                <span className="min-w-0 flex-1 truncate text-xs">{col.name}</span>
-                <button title="Export as Postman" onClick={e => { e.stopPropagation(); onExportCollection(col); }}
-                  className="text-muted-foreground hover:text-foreground"><Download className="h-3 w-3" /></button>
-                <button title="Delete" onClick={e => { e.stopPropagation(); onDeleteCollection(col.id); }}
-                  className="text-muted-foreground hover:text-destructive"><Trash2 className="h-3 w-3" /></button>
+          {workspace.collections.map(col => {
+            const count = allRequestsInCol(col).length;
+            const isActiveCol = workspace.activeCollectionId === col.id;
+            return (
+              <div key={col.id} className="border-b border-border/60">
+                <div className={`group flex cursor-pointer items-center gap-1.5 px-2 py-1.5 hover:bg-muted ${isActiveCol ? 'bg-muted/50' : ''}`}
+                  onClick={() => { toggleCol(col.id); onSelectCollection(col.id); }}>
+                  {openCols.has(col.id) ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" /> : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />}
+                  <Folder className="h-3.5 w-3.5 shrink-0 text-accent" />
+                  <span className="min-w-0 flex-1 truncate text-xs font-bold">{col.name}</span>
+                  <span className="shrink-0 rounded-full bg-border/60 px-1.5 text-[10px] font-bold text-muted-foreground">{count}</span>
+                  <button title="Export as Postman" onClick={e => { e.stopPropagation(); onExportCollection(col); }}
+                    className="shrink-0 text-muted-foreground opacity-0 hover:text-foreground group-hover:opacity-100"><Download className="h-3 w-3" /></button>
+                  <button title="Delete" onClick={e => { e.stopPropagation(); onDeleteCollection(col.id); }}
+                    className="shrink-0 text-muted-foreground opacity-0 hover:text-destructive group-hover:opacity-100"><Trash2 className="h-3 w-3" /></button>
+                </div>
+                {openCols.has(col.id) && (
+                  count === 0
+                    ? <p className="px-2 py-1.5 pl-8 text-[11px] italic text-muted-foreground">No requests yet</p>
+                    : <RequestTree requests={col.requests} folders={col.folders} onSelect={onSelectRequest} depth={1} activeId={workspace.activeRequestId} />
+                )}
               </div>
-              {openCols.has(col.id) && (
-                <RequestTree requests={col.requests} folders={col.folders} onSelect={onSelectRequest} depth={1} />
-              )}
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
 
@@ -371,26 +386,45 @@ function ApiSidebar({
       <div className="border-t-2 border-border p-2">
         <div className="mb-1 flex items-center gap-1 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           <Key className="h-3.5 w-3.5" /> Env
+          <button onClick={() => setShowEnvHelp(v => !v)} title="How environments work"
+            aria-pressed={showEnvHelp}
+            className={`ml-auto ${showEnvHelp ? 'text-accent' : 'text-muted-foreground hover:text-foreground'}`}>
+            <Info className="h-3.5 w-3.5" />
+          </button>
         </div>
-        <div className="flex gap-1">
+        {showEnvHelp && (
+          <div className="mb-2 border border-border bg-muted/60 p-2 text-xs leading-relaxed text-muted-foreground">
+            An <b className="text-foreground">environment</b> holds variables you can reuse across requests.
+            Add them as <code className="font-mono">KEY=value</code> (one per line), then reference any of them
+            with <code className="font-mono">{'{{KEY}}'}</code> in the URL, params, headers, body or auth —
+            they’re substituted when you press Send. Switch environments (e.g. dev/prod) from the dropdown to
+            swap all values at once.
+          </div>
+        )}
+        <div className="flex items-center gap-1">
           <select value={workspace.activeEnvId ?? ''} onChange={e => onSelectEnv(e.target.value)}
-            className="flex-1 border border-border bg-muted px-1.5 py-1 text-xs">
+            className="min-w-0 flex-1 border border-border bg-muted px-1.5 py-1 text-xs">
             <option value="">None</option>
             {workspace.envs.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
           </select>
-          <button onClick={onAddEnv} title="Add environment" className="text-muted-foreground hover:text-foreground">
+          <button onClick={onAddEnv} title="Add environment" className="shrink-0 text-muted-foreground hover:text-foreground">
             <Plus className="h-4 w-4" />
           </button>
           {activeEnv && (
-            <button onClick={startEditEnv} title="Edit variables" className="text-xs text-muted-foreground hover:text-foreground underline">
-              Edit
+            <button onClick={startEditEnv} title="Rename & edit variables" className="shrink-0 text-muted-foreground hover:text-foreground">
+              <Pencil className="h-3.5 w-3.5" />
             </button>
           )}
         </div>
         {editingEnvId && activeEnv && (
           <div className="mt-1 flex flex-col gap-1">
-            <p className="text-xs text-muted-foreground">One KEY=value per line</p>
+            <label className="text-xs font-bold text-muted-foreground">Name</label>
+            <input value={envNameDraft} onChange={e => setEnvNameDraft(e.target.value)}
+              placeholder="Environment name"
+              className="w-full border border-border bg-muted px-1.5 py-1 text-xs outline-none" />
+            <label className="mt-1 text-xs font-bold text-muted-foreground">Variables — one KEY=value per line</label>
             <textarea value={envDraft} onChange={e => setEnvDraft(e.target.value)}
+              placeholder={'apikey=abc123\nbaseUrl=https://api.example.com'}
               className="h-24 w-full resize-none border border-border bg-muted p-1 font-mono text-xs outline-none" />
             <div className="flex gap-1">
               <Button variant="primary" onClick={saveEnvDraft} className="text-xs py-0.5 px-2">Save</Button>
@@ -405,32 +439,48 @@ function ApiSidebar({
 
 // ---- RequestTree (recursive) ----
 
-function RequestTree({ requests, folders, onSelect, depth }: {
+function methodBadge(m: string): string {
+  const map: Record<string, string> = {
+    GET: 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400',
+    POST: 'bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-400',
+    PUT: 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400',
+    PATCH: 'bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-400',
+    DELETE: 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400',
+  };
+  return map[m] ?? 'bg-border/60 text-muted-foreground';
+}
+
+function RequestTree({ requests, folders, onSelect, depth, activeId }: {
   requests: RequestDef[];
   folders: FolderType[];
   onSelect: (id: string) => void;
   depth: number;
+  activeId: string | null;
 }) {
   const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
-  const pl = `pl-${Math.min(depth * 3, 12)}`;
+  const indent = { paddingLeft: `${Math.min(depth, 4) * 0.75 + 0.5}rem` };
   return (
     <div>
-      {requests.map(r => (
-        <button key={r.id} onClick={() => onSelect(r.id)}
-          className={`flex w-full items-center gap-1.5 ${pl} pr-2 py-0.5 text-left hover:bg-muted`}>
-          <span className={`w-10 shrink-0 text-xs font-bold ${methodColor(r.method)}`}>{r.method}</span>
-          <span className="min-w-0 flex-1 truncate text-xs">{r.name}</span>
-        </button>
-      ))}
+      {requests.map(r => {
+        const active = r.id === activeId;
+        return (
+          <button key={r.id} onClick={() => onSelect(r.id)} style={indent}
+            className={`flex w-full items-center gap-2 pr-2 py-1 text-left ${active ? 'border-l-2 border-accent bg-accent/10 font-semibold' : 'border-l-2 border-transparent hover:bg-muted'}`}>
+            <span className={`shrink-0 rounded px-1 py-px text-[9px] font-bold leading-tight ${methodBadge(r.method)}`}>{r.method}</span>
+            <span className="min-w-0 flex-1 truncate text-xs">{r.name || 'Untitled'}</span>
+          </button>
+        );
+      })}
       {folders.map(f => (
         <div key={f.id}>
           <button onClick={() => setOpenFolders(prev => { const s = new Set(prev); if (s.has(f.id)) s.delete(f.id); else s.add(f.id); return s; })}
-            className={`flex w-full items-center gap-1 ${pl} pr-2 py-0.5 text-left text-xs font-bold text-muted-foreground hover:bg-muted`}>
+            style={indent}
+            className="flex w-full items-center gap-1 pr-2 py-1 text-left text-xs font-bold text-muted-foreground hover:bg-muted">
             {openFolders.has(f.id) ? <ChevronDown className="h-3 w-3 shrink-0" /> : <ChevronRight className="h-3 w-3 shrink-0" />}
             <Folder className="h-3 w-3 shrink-0" />{f.name}
           </button>
           {openFolders.has(f.id) && (
-            <RequestTree requests={f.requests} folders={f.folders} onSelect={onSelect} depth={depth + 1} />
+            <RequestTree requests={f.requests} folders={f.folders} onSelect={onSelect} depth={depth + 1} activeId={activeId} />
           )}
         </div>
       ))}
@@ -457,7 +507,12 @@ function ApiRequestPane({ request, sending, onSend, onUpdate, sendError, allReqs
   envVars: Record<string, string>;
 }) {
   const [reqTab, setReqTab] = useState<'params' | 'headers' | 'body' | 'auth'>('body');
-  const [resTab, setResTab] = useState<'body' | 'headers' | 'history'>('body');
+  const [resTab, setResTab] = useState<'body' | 'headers' | 'request' | 'history'>('body');
+  // The actual outgoing request with {{variables}} resolved — what Send transmits.
+  const sent = useMemo(
+    () => summarizeSentRequest(substituteRequest(request, allReqs, envVars)),
+    [request, allReqs, envVars],
+  );
   const [splitPct, setSplitPct] = useState(45);
   const containerRef = useRef<HTMLDivElement>(null);
   const dragging = useRef(false);
@@ -606,8 +661,9 @@ function ApiRequestPane({ request, sending, onSend, onUpdate, sendError, allReqs
               <span className="text-xs text-muted-foreground">{response.durationMs}ms</span>
               <span className="text-xs text-muted-foreground">{(new TextEncoder().encode(response.body).byteLength / 1024).toFixed(1)} KB</span>
               <div className="ml-auto flex">
-                {(['body', 'headers', 'history'] as const).map(t => (
+                {(['body', 'headers', 'request', 'history'] as const).map(t => (
                   <button key={t} onClick={() => setResTab(t)}
+                    title={t === 'request' ? 'The request that was sent (variables resolved)' : undefined}
                     className={`px-2 py-1 text-xs font-bold uppercase tracking-wide ${resTab === t ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted'}`}>
                     {t}
                   </button>
@@ -630,6 +686,38 @@ function ApiRequestPane({ request, sending, onSend, onUpdate, sendError, allReqs
                   </tbody>
                 </table>
               )}
+              {resTab === 'request' && (
+                <div className="flex flex-col gap-3 text-xs">
+                  <p className="text-muted-foreground">The request that was sent, with <code className="font-mono">{'{{variables}}'}</code> resolved from the active environment.</p>
+                  <div className="flex items-start gap-2">
+                    <span className={`shrink-0 rounded px-1 py-px text-[10px] font-bold ${methodBadge(sent.method)}`}>{sent.method}</span>
+                    <span className="min-w-0 flex-1 break-all font-mono">{sent.url}</span>
+                  </div>
+                  <div>
+                    <div className="mb-1 font-bold uppercase tracking-wide text-muted-foreground">Headers</div>
+                    {sent.headers.length === 0
+                      ? <p className="text-muted-foreground italic">(none)</p>
+                      : (
+                        <table className="w-full">
+                          <tbody>
+                            {sent.headers.map(([k, v]) => (
+                              <tr key={k} className="border-b border-border">
+                                <td className="py-0.5 pr-3 font-bold text-muted-foreground">{k}</td>
+                                <td className="break-all py-0.5 font-mono">{v}</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                  </div>
+                  {sent.body != null && (
+                    <div>
+                      <div className="mb-1 font-bold uppercase tracking-wide text-muted-foreground">Body</div>
+                      <pre className="whitespace-pre-wrap break-all border border-border bg-muted p-2 font-mono">{prettyBody(sent.body)}</pre>
+                    </div>
+                  )}
+                </div>
+              )}
               {resTab === 'history' && (
                 request.responseHistory.length === 0
                   ? <p className="text-xs text-muted-foreground">No response history yet.</p>
diff --git a/src/registry/tool-seo.ts b/src/registry/tool-seo.ts
index f46c0dd..5ee60e6 100644
--- a/src/registry/tool-seo.ts
+++ b/src/registry/tool-seo.ts
@@ -1842,10 +1842,11 @@ const en: Record<string, ToolSeoContent> = {
     howTo: [
       'Click "Import" and select a Postman JSON, Insomnia JSON, OpenAPI YAML/JSON, or HAR file — the collection populates instantly.',
       'Click any request in the sidebar to open it. Edit the URL, method, headers, body, or auth as needed.',
-      'Set an environment (e.g. "dev" with base_url and token variables) and reference them with {{variable_name}} anywhere in the request.',
-      'Click "Send". The response appears below with status, timing, headers, and formatted body. Right-click a collection to export back to Postman, Insomnia, or OpenAPI.',
+      'Add an environment (the + next to ENV), give it a name, and set variables as KEY=value (one per line). Reference any of them with {{variable_name}} in the URL, params, headers, body or auth — they are substituted when you send.',
+      'Click "Send". The response appears below with status, timing, headers, and formatted body. Open the "Request" tab to see exactly what was sent with variables resolved. Right-click a collection to export back to Postman, Insomnia, or OpenAPI.',
     ],
     faqs: [
+      { q: 'How do I check exactly what request was sent?', a: 'After sending, open the "Request" tab in the response panel to see the final method, URL, headers (including auth) and body with every {{variable}} resolved — so you can confirm the outgoing request is what you expected. The History tab in the sidebar also lists every request you have sent.' },
       { q: 'Is my API data uploaded to a server?', a: 'No. All request execution, collection parsing, and workspace storage happen locally in your browser or desktop app. Your API keys, tokens, and payloads never leave your device.' },
       { q: 'Why does it say "Browser mode — CORS restrictions apply"?', a: 'Browsers block cross-origin requests to APIs that don\'t explicitly allow them — this is a browser security policy called CORS. Install the GoodWebTools desktop app to send requests to any API without CORS restrictions, exactly like Postman or Insomnia.' },
       { q: 'Which import formats are supported?', a: 'Postman Collection v2.1 (JSON), Insomnia Export v4 (JSON), OpenAPI/Swagger 2.0 and 3.x (JSON or YAML), and HAR (HTTP Archive from browser DevTools). Collections are auto-detected — just drop the file.' },
@@ -3691,10 +3692,11 @@ const id: Record<string, ToolSeoContent> = {
     howTo: [
       'Klik "Import" dan pilih berkas Postman JSON, Insomnia JSON, OpenAPI YAML/JSON, atau HAR — koleksi langsung tampil.',
       'Klik request mana pun di sidebar untuk membukanya. Edit URL, method, header, body, atau auth sesuai kebutuhan.',
-      'Buat environment (mis. "dev" dengan variabel base_url dan token) dan referensikan dengan {{nama_variabel}} di mana saja dalam request.',
-      'Klik "Send". Respons muncul di bawah dengan status, waktu, header, dan body terformat. Klik ikon unduh di koleksi untuk mengekspor kembali ke Postman, Insomnia, atau OpenAPI.',
+      'Tambahkan environment (ikon + di sebelah ENV), beri nama, dan isi variabel sebagai KEY=value (satu per baris). Referensikan dengan {{nama_variabel}} di URL, params, header, body, atau auth — nilainya disubstitusi saat Anda mengirim.',
+      'Klik "Send". Respons muncul di bawah dengan status, waktu, header, dan body terformat. Buka tab "Request" untuk melihat persis apa yang dikirim dengan variabel yang sudah diselesaikan. Klik ikon unduh di koleksi untuk mengekspor kembali ke Postman, Insomnia, atau OpenAPI.',
     ],
     faqs: [
+      { q: 'Bagaimana cara memeriksa persis request apa yang dikirim?', a: 'Setelah mengirim, buka tab "Request" di panel respons untuk melihat method, URL, header (termasuk auth), dan body akhir dengan setiap {{variabel}} yang sudah diselesaikan — sehingga Anda bisa memastikan request keluar sesuai harapan. Tab History di sidebar juga mencatat setiap request yang pernah Anda kirim.' },
       { q: 'Apakah data API saya diunggah ke server?', a: 'Tidak. Semua eksekusi request, parsing koleksi, dan penyimpanan workspace terjadi secara lokal di browser atau aplikasi desktop Anda. API key, token, dan payload Anda tidak pernah meninggalkan perangkat Anda.' },
       { q: 'Mengapa ada tulisan "Browser mode — CORS restrictions apply"?', a: 'Browser memblokir request lintas-origin ke API yang tidak mengizinkannya secara eksplisit — ini adalah kebijakan keamanan browser bernama CORS. Instal aplikasi desktop GoodWebTools untuk mengirim request ke API mana pun tanpa batasan CORS, persis seperti Postman atau Insomnia.' },
       { q: 'Format import apa saja yang didukung?', a: 'Postman Collection v2.1 (JSON), Insomnia Export v4 (JSON), OpenAPI/Swagger 2.0 dan 3.x (JSON atau YAML), dan HAR (HTTP Archive dari DevTools browser). Koleksi dideteksi otomatis — cukup pilih berkasnya.' },
diff --git a/src/tools/dev/api-client-request.lib.test.ts b/src/tools/dev/api-client-request.lib.test.ts
index 7ea3e13..52abfcd 100644
--- a/src/tools/dev/api-client-request.lib.test.ts
+++ b/src/tools/dev/api-client-request.lib.test.ts
@@ -1,8 +1,36 @@
 import { describe, it, expect } from 'vitest';
-import { buildFetchInit } from './api-client-request.lib';
+import { buildFetchInit, summarizeSentRequest } from './api-client-request.lib';
 import { defaultRequestDef } from './api-client-store.lib';
 import type { RequestDef } from './api-client.types';
 
+describe('summarizeSentRequest', () => {
+  it('summarizes the resolved outgoing request incl. auth, params and body', () => {
+    const req: RequestDef = {
+      ...defaultRequestDef(),
+      method: 'POST',
+      url: 'https://api.example.com/objects',
+      params: [{ key: 'page', value: '2', enabled: true }],
+      headers: [{ key: 'X-Trace', value: 'abc', enabled: true }],
+      auth: { type: 'bearer', token: 'RESOLVED_KEY' },
+      body: { mode: 'json', content: '{"a":1}' },
+    };
+    const s = summarizeSentRequest(req);
+    expect(s.method).toBe('POST');
+    expect(s.url).toContain('page=2');
+    const headerMap = Object.fromEntries(s.headers);
+    expect(headerMap['Authorization']).toBe('Bearer RESOLVED_KEY');
+    expect(headerMap['Content-Type']).toBe('application/json');
+    expect(headerMap['X-Trace']).toBe('abc');
+    expect(s.body).toBe('{"a":1}');
+  });
+
+  it('reports no body for a GET', () => {
+    const s = summarizeSentRequest({ ...defaultRequestDef(), method: 'GET', url: 'https://x.dev/' });
+    expect(s.body).toBeNull();
+    expect(s.headers.length).toBe(0);
+  });
+});
+
 describe('buildFetchInit', () => {
   it('builds GET with no body', () => {
     const req: RequestDef = { ...defaultRequestDef(), method: 'GET', url: 'https://api.example.com/users' };
diff --git a/src/tools/dev/api-client-request.lib.ts b/src/tools/dev/api-client-request.lib.ts
index 5e4c6ae..fac9239 100644
--- a/src/tools/dev/api-client-request.lib.ts
+++ b/src/tools/dev/api-client-request.lib.ts
@@ -41,6 +41,31 @@ export function buildFetchInit(req: RequestDef): { url: string; init: RequestIni
   return { url, init: { method: req.method, headers, body } };
 }
 
+export interface SentRequestSummary {
+  method: string;
+  /** Final URL with query params appended. */
+  url: string;
+  /** All outgoing headers, including auth and content-type. */
+  headers: [string, string][];
+  /** The request body as sent, or null if none. */
+  body: string | null;
+}
+
+/**
+ * Describe the actual outgoing request (after variable substitution has been
+ * applied to `req`) so the UI can show exactly what was/will be sent.
+ */
+export function summarizeSentRequest(req: RequestDef): SentRequestSummary {
+  const { url, init } = buildFetchInit(req);
+  const headers = Object.entries((init.headers ?? {}) as Record<string, string>);
+  return {
+    method: req.method,
+    url,
+    headers,
+    body: init.body != null ? String(init.body) : null,
+  };
+}
+
 export async function executeRequest(req: RequestDef): Promise<ResponseSnapshot> {
   const { url, init } = buildFetchInit(req);
   const start = performance.now();