From 363d3b0bb2ff8fbe40e899b0441c27289b076a27 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 18:24:30 +0530
Subject: [PATCH 01/19] docs: add fluid layout + sidebar Tailwind removal
 design spec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ...05-fluid-layout-tailwind-removal-design.md | 147 ++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-05-fluid-layout-tailwind-removal-design.md

diff --git a/docs/superpowers/specs/2026-06-05-fluid-layout-tailwind-removal-design.md b/docs/superpowers/specs/2026-06-05-fluid-layout-tailwind-removal-design.md
new file mode 100644
index 0000000..3f184dd
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-05-fluid-layout-tailwind-removal-design.md
@@ -0,0 +1,147 @@
+# Fluid Layout Fix + Sidebar Tailwind Removal
+
+**Date:** 2026-06-05  
+**Branch:** `enh/design-revamp`  
+**Source:** REST-Lab Direction A – Handoff (claude.ai/design)
+
+---
+
+## Problem
+
+Fixed-pixel spacing in `src/webview/request/styles.css` clips the UI when VS Code's editor font is large (e.g. `"editor.fontSize": 20`). Specifically:
+
+- The 5 request tabs overflow off-screen and get clipped
+- The URL bar squashes the Send/Save buttons off to the right
+- The method-select, buttons, and env-select have hard-coded `px` heights that don't scale
+
+The root cause: every control height, padding, and gap is set in `px`. VS Code's `--vscode-font-size` is already wired to `body { font-size }`, but the child elements ignore it and stay fixed.
+
+The sidebar (Tailwind-based) has the same class of problem — Tailwind utilities like `py-2.5 px-3` are in `px`, so tree rows and badges don't scale either. Additionally, the sidebar uses Tailwind (v4 with `@import "tailwindcss"`) which the project is gradually moving away from.
+
+---
+
+## Solution: Direction A – Fluid Classic
+
+Replace fixed `px` sizing with `em`-based tokens everywhere that touches text. Because `body { font-size: var(--vscode-font-size, 13px) }` is already set, `em` values automatically scale with the user's VS Code font setting. `flex-wrap` on the request bar and `overflow-x: auto` on the tab strip absorb whatever doesn't fit instead of clipping.
+
+---
+
+## Design Decisions
+
+### Em token scale
+
+One spacing ramp defined in `:root`, referenced everywhere:
+
+| Token | Value | ~px @13 | ~px @19 | Use |
+|---|---|---|---|---|
+| `--rl-sp1` | `0.30em` | 4 | 6 | hairline gaps |
+| `--rl-sp2` | `0.46em` | 6 | 9 | tight / icon↔label |
+| `--rl-sp3` | `0.62em` | 8 | 12 | base gap / row padding |
+| `--rl-sp4` | `0.92em` | 12 | 17 | control padding |
+| `--rl-sp5` | `1.23em` | 16 | 23 | section / side padding |
+| `--rl-ctrl` | `2.35em` | ~31 | ~45 | height of every input & button |
+| `--rl-icon` | `1.25em` | ~16 | ~24 | icon glyph size |
+
+Rule: **never set a px value that contains text or sits next to text.** Borders stay `1px`.
+
+### Request bar wrapping
+
+`.request-bar` gets `flex-wrap: wrap`. When the URL field can't hold `16em`, it drops to its own row rather than squashing the Send button off screen.
+
+### Scrollable tab strip
+
+`.tabs` becomes `overflow-x: auto; scrollbar-width: none`. Tabs keep `flex-shrink: 0` so they stay full-width rather than squishing. A JS hook in `RequestEditor.tsx` adds a `.tabstrip-wrap` parent and toggles `scroll-start / scroll-mid / scroll-end` state classes that the CSS uses for fade-edge indicators.
+
+### Sidebar: Tailwind removal
+
+The sidebar bundle (`dist/sidebar/`) currently imports `tailwind.css`. We replace that with a new `sidebar.css` that:
+
+1. Carries all the brand/VS Code tokens (same as `tailwind.css :root`)
+2. Defines `--rl-*` fluid tokens on `body` (matching font-size anchor)
+3. Replaces every Tailwind utility class used in the sidebar components with semantic CSS class names
+4. Migrates the component classes from `tailwind.css @layer components` (`btn-primary`, `action-btn`, `header-action-btn`, `dropdown-*`, `method-badge`, `method-*`, `custom-tooltip`, animations) — updated to use `em` sizing
+
+`tailwind.css` is untouched; it continues to serve the editor and folder-settings bundles.
+
+`drag-drop.css` is untouched.
+
+---
+
+## Files
+
+### New
+- `src/webview/sidebar/sidebar.css` — complete custom CSS for the sidebar; owns all layout, component, and fluid-sizing rules
+
+### Modified
+- `src/webview/request/styles.css` — add `--rl-*` tokens to `:root`; replace px in `.request-bar`, `.method-select`, `.url-input`, `.send-btn`, `.save-btn`, `.request-more-btn`, `.layout-toggle-btn`, `.request-env-select`, `.tabs`, `.tab`, `.badge`, response section (padding, meta pills, toolbar), key-value rows (`.header-key`, `.header-value`, `.form-data-key`, `.form-data-value`, `.content-type-select`, `.remove-btn`, `.type-toggle`); delete the `@media (max-width:700px)` and `@media (max-width:500px)` font-shrink overrides (the wrap behavior replaces them — keep the vertical→horizontal split reflow rule only)
+- `src/webview/request/RequestEditor.tsx` — add `useRef` + `useState` for scroll edge; wrap `<div className="tabs">` in `<div className={\`tabstrip-wrap \${edge}\`}>` with `ref={stripRef} onScroll={onScroll}`; add `useEffect(onScroll, [config.method])`
+- `src/webview/sidebar/index.tsx` — replace `import "../tailwind.css"` with `import "./sidebar.css"`
+- `src/webview/sidebar/Sidebar.tsx` — replace Tailwind utility classnames with new semantic class names from `sidebar.css`
+- `src/webview/sidebar/FolderActionsDropdown.tsx` — remove residual Tailwind utility strings (`relative inline-flex`, `min-w-[180px]`, `text-red-500`)
+- `src/webview/sidebar/ImportDropdown.tsx` — remove `relative`
+- `src/webview/sidebar/RequestActionsDropdown.tsx` — remove `relative inline-flex`, `w-5 h-5`, hover utilities
+
+### Untouched
+- `src/webview/tailwind.css`
+- `src/webview/sidebar/drag-drop.css`
+
+---
+
+## Sidebar CSS class map
+
+New semantic class names replacing Tailwind utility strings:
+
+| Old (Tailwind) | New (semantic) |
+|---|---|
+| `flex flex-col h-screen` | `.sb` |
+| `p-4 border-b border-glass bg-gradient-to-b ...` | `.sb-head` |
+| `flex items-center gap-2 text-[13px] font-bold ...` | `.sb-title` |
+| `flex items-center gap-2` (button row) | `.sb-head-actions` |
+| `flex-1 overflow-y-auto py-3 px-2 scrollbar-thin` | `.sb-tree` |
+| `group flex items-center gap-2.5 py-2.5 px-3 mb-1 ...` | `.tree-row` |
+| `tree-row` open state | `.tree-row.open` |
+| `relative before:content-[''] before:absolute ...` (children wrap) | `.tree-children` |
+| `pl-5 ...` (request zone) | `.req-zone` |
+| `group flex items-center gap-2 py-2 px-2.5 ...` (request row) | `.req-row` |
+| `req-row` active state | `.req-row.active` |
+| `flex flex-col items-center justify-center py-12` | `.empty-state` |
+| `relative inline-flex` (dropdown wrapper) | `.dropdown-wrap` |
+| `relative` (import wrapper) | `.dropdown-wrap` |
+| `text-red-500` on delete item | `.dropdown-item.danger` |
+| `w-5 h-5` on action-btn | handled by `.action-btn` sizing directly |
+
+`.mb-0.5` wrapper divs around folder items → `.folder-item`
+
+---
+
+## JS hook (RequestEditor.tsx)
+
+```tsx
+const stripRef = useRef<HTMLDivElement>(null);
+const [edge, setEdge] = useState("");
+
+const onScroll = () => {
+  const el = stripRef.current; if (!el) return;
+  const max = el.scrollWidth - el.clientWidth;
+  if (max < 2) return setEdge("");
+  if (el.scrollLeft < 4) setEdge("scroll-start");
+  else if (el.scrollLeft > max - 4) setEdge("scroll-end");
+  else setEdge("scroll-mid");
+};
+useEffect(onScroll, [config.method]);
+```
+
+Markup change: wrap `<div className="tabs">` with `<div className={\`tabstrip-wrap \${edge}\`}>`.
+
+---
+
+## Porting checklist (verification)
+
+- [ ] Type-check passes: `npx tsc --noEmit`
+- [ ] Sidebar renders with no Tailwind classes in DOM (inspect element)
+- [ ] Drag-and-drop still works (drag a request between folders)
+- [ ] Dropdown menus open and close correctly
+- [ ] Request editor at `editor.fontSize: 13` — no visual regression
+- [ ] Request editor at `editor.fontSize: 20` — tabs scroll, bar wraps, nothing clips
+- [ ] Sidebar rows and method badges scale visually at large font
+- [ ] Light theme still renders (VS Code light theme — test both sidebars and request editor)

From c8e70912ad47bb5ba669336826ff3d246936a980 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 18:41:58 +0530
Subject: [PATCH 02/19] feat: add --rl-* fluid tokens and update request bar
 controls

Replace hard-coded px values in the request bar with em-based CSS custom
properties so all controls scale proportionally when the user changes
editor.fontSize in VS Code.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/webview/request/styles.css | 87 +++++++++++++++++++++-------------
 1 file changed, 53 insertions(+), 34 deletions(-)

diff --git a/src/webview/request/styles.css b/src/webview/request/styles.css
index c881a3c..9479aa8 100644
--- a/src/webview/request/styles.css
+++ b/src/webview/request/styles.css
@@ -52,6 +52,18 @@
   /* Glass effect */
   --glass-bg: rgba(255, 255, 255, 0.03);
   --glass-border: rgba(255, 255, 255, 0.08);
+
+  /* Fluid spacing tokens — all em, scale with --vscode-font-size */
+  --rl-sp1: 0.30em;
+  --rl-sp2: 0.46em;
+  --rl-sp3: 0.62em;
+  --rl-sp4: 0.92em;
+  --rl-sp5: 1.23em;
+  --rl-ctrl: 2.35em;
+  --rl-icon: 1.25em;
+  --rl-r1: 0.35em;
+  --rl-r2: 0.50em;
+  --rl-r3: 0.65em;
 }
 
 * {
@@ -75,7 +87,7 @@ body {
   height: 100vh;
   /* max-width: 1200px; */
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 var(--rl-sp5);
   position: relative;
   overflow: hidden;
 }
@@ -169,25 +181,28 @@ body {
 /* Request Bar */
 .request-bar {
   display: flex;
-  gap: 6px;
-  padding: 4px 0;
+  gap: var(--rl-sp3);
+  padding: var(--rl-sp4) 0 var(--rl-sp3);
   align-items: center;
+  flex-wrap: wrap;
 }
+.request-bar > * { min-height: var(--rl-ctrl); }
 
 .method-select {
-  padding: 5px 10px;
+  height: var(--rl-ctrl);
+  padding: 0 0.7em;
   border: 2px solid var(--glass-border);
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   font-family: inherit;
-  font-size: 12px;
+  font-size: 0.92em;
   font-weight: 700;
   cursor: pointer;
-  min-width: 96px;
+  min-width: 6.2em;
   transition: all 0.2s ease;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.05em;
 }
 
 .method-select:focus {
@@ -236,18 +251,17 @@ body {
 }
 
 .url-input {
-  flex: 1;
+  flex: 1 1 16em;
   min-width: 0;
-  padding: 6px 12px;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: 1px solid var(--glass-border);
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   font-family: "SF Mono", "Fira Code", "Consolas", monospace;
-  font-size: 13px;
+  font-size: 0.92em;
   transition: all 0.2s ease;
-  word-break: break-all;
-  overflow-wrap: anywhere;
 }
 
 .url-input:focus {
@@ -261,13 +275,14 @@ body {
 .send-btn {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 10px;
+  gap: var(--rl-sp2);
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: none;
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background: var(--restlab-gradient);
   color: #ffffff;
-  font-size: 13px;
+  font-size: 0.92em;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
@@ -275,6 +290,7 @@ body {
   position: relative;
   overflow: hidden;
 }
+.send-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
 
 .send-btn::before {
   content: "";
@@ -315,18 +331,20 @@ body {
 .save-btn {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
+  gap: var(--rl-sp2);
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: 1px solid var(--glass-border);
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background: var(--glass-bg);
   color: var(--vscode-foreground);
-  font-size: 13px;
+  font-size: 0.92em;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(8px);
 }
+.save-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
 
 .save-btn:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.06);
@@ -377,11 +395,11 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
   padding: 0;
   border: 1px solid var(--glass-border);
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background: var(--glass-bg);
   color: var(--vscode-foreground);
   cursor: pointer;
@@ -478,11 +496,11 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
   padding: 0;
   border: 1px solid var(--glass-border);
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background: var(--glass-bg);
   color: var(--vscode-foreground);
   cursor: pointer;
@@ -506,9 +524,9 @@ body {
 }
 
 .base-url-hint {
-  font-size: 12px;
+  font-size: 0.92em;
   color: var(--vscode-descriptionForeground);
-  padding-bottom: 6px;
+  padding-bottom: var(--rl-sp3);
 }
 
 .base-url-hint code {
@@ -520,18 +538,19 @@ body {
 
 /* ── Inline Environment Selector (inside request-bar) ──────────────── */
 .request-env-select {
-  padding: 6px 8px;
+  height: var(--rl-ctrl);
+  padding: 0 0.6em;
   border: 1px solid var(--glass-border);
-  border-radius: 7px;
+  border-radius: var(--rl-r3);
   background: var(--vscode-input-background);
   color: var(--vscode-descriptionForeground);
-  font-size: 11px;
+  font-size: 0.82em;
   font-weight: 600;
   cursor: pointer;
   transition:
     border-color 0.15s,
     color 0.15s;
-  max-width: 130px;
+  max-width: 9em;
   flex-shrink: 0;
 }
 

From 438ded955e33d25b5cceabd3ceed3f86f7ddb221 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 18:56:03 +0530
Subject: [PATCH 03/19] fix: url-input uses min-height + vertical padding for
 useAutoGrow compatibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/webview/request/styles.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/webview/request/styles.css b/src/webview/request/styles.css
index 9479aa8..5f84d8f 100644
--- a/src/webview/request/styles.css
+++ b/src/webview/request/styles.css
@@ -253,8 +253,8 @@ body {
 .url-input {
   flex: 1 1 16em;
   min-width: 0;
-  height: var(--rl-ctrl);
-  padding: 0 var(--rl-sp4);
+  min-height: var(--rl-ctrl);
+  padding: var(--rl-sp2) var(--rl-sp4);
   border: 1px solid var(--glass-border);
   border-radius: var(--rl-r3);
   background-color: var(--vscode-input-background);
@@ -262,6 +262,7 @@ body {
   font-family: "SF Mono", "Fira Code", "Consolas", monospace;
   font-size: 0.92em;
   transition: all 0.2s ease;
+  overflow-wrap: anywhere;
 }
 
 .url-input:focus {

From 3e19cbebeca0c559e319ee72533cb17906861525 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 18:58:06 +0530
Subject: [PATCH 04/19] feat: fluid tab strip with scroll + fade edges

---
 src/webview/request/styles.css | 55 +++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/webview/request/styles.css b/src/webview/request/styles.css
index 5f84d8f..5d8e5b2 100644
--- a/src/webview/request/styles.css
+++ b/src/webview/request/styles.css
@@ -640,28 +640,61 @@ body {
 }
 
 /* Tabs */
+.tabstrip-wrap {
+  position: relative;
+  border-bottom: 1px solid var(--glass-border);
+  margin-bottom: var(--rl-sp5);
+}
+.tabstrip-wrap::before,
+.tabstrip-wrap::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1.6em;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.tabstrip-wrap::before {
+  left: 0;
+  background: linear-gradient(90deg, var(--vscode-editor-background), transparent);
+}
+.tabstrip-wrap::after {
+  right: 0;
+  background: linear-gradient(270deg, var(--vscode-editor-background), transparent);
+}
+.tabstrip-wrap.scroll-start::after { opacity: 1; }
+.tabstrip-wrap.scroll-mid::before,
+.tabstrip-wrap.scroll-mid::after { opacity: 1; }
+.tabstrip-wrap.scroll-end::before { opacity: 1; }
+
 .tabs {
   display: flex;
-  gap: 4px;
-  border-bottom: 1px solid var(--glass-border);
-  margin-bottom: 16px;
+  gap: var(--rl-sp1);
+  overflow-x: auto;
+  scrollbar-width: none;
   position: relative;
 }
+.tabs::-webkit-scrollbar { height: 0; }
 
 .tab {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 12px 18px;
+  gap: var(--rl-sp2);
+  padding: var(--rl-sp3) var(--rl-sp4);
   border: none;
   border-bottom: 2px solid transparent;
   background: transparent;
   color: var(--vscode-descriptionForeground);
-  font-size: 13px;
+  font-size: 0.92em;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .tab::before {
@@ -694,14 +727,14 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 6px;
-  font-size: 10px;
+  min-width: 1.4em;
+  height: 1.4em;
+  padding: 0 0.42em;
+  font-size: 0.72em;
   font-weight: 700;
   background: var(--restlab-gradient);
   color: #ffffff;
-  border-radius: 9px;
+  border-radius: 0.8em;
 }
 
 /* Split Container */

From dc167e643bcf29ed7008bff85dbeeafce55a1485 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:01:21 +0530
Subject: [PATCH 05/19] feat: fluid response section and key-value rows

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/webview/request/styles.css | 85 +++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/src/webview/request/styles.css b/src/webview/request/styles.css
index 5d8e5b2..7360f76 100644
--- a/src/webview/request/styles.css
+++ b/src/webview/request/styles.css
@@ -950,9 +950,9 @@ body {
 
 .header-row {
   display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  margin-bottom: 8px;
+  gap: var(--rl-sp3);
+  align-items: center;
+  margin-bottom: var(--rl-sp2);
 }
 
 .header-row.inherited {
@@ -962,13 +962,14 @@ body {
 .header-key,
 .header-value {
   flex: 1;
-  padding: 8px 12px;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
+  border-radius: var(--rl-r2);
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   font-family: inherit;
-  font-size: 13px;
+  font-size: 0.9em;
 }
 
 .header-key:focus,
@@ -1006,10 +1007,10 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--rl-r2);
   background: transparent;
   color: var(--vscode-descriptionForeground);
   cursor: pointer;
@@ -1054,13 +1055,14 @@ body {
 .content-type-select {
   flex: 1;
   max-width: 350px;
-  padding: 8px 12px;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
+  border-radius: var(--rl-r2);
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   font-family: inherit;
-  font-size: 13px;
+  font-size: 0.9em;
   cursor: pointer;
 }
 
@@ -1215,20 +1217,21 @@ body {
 
 .form-data-row {
   display: flex;
-  gap: 8px;
-  align-items: flex-start;
+  gap: var(--rl-sp3);
+  align-items: center;
 }
 
 .form-data-key,
 .form-data-value {
   flex: 1;
-  padding: 8px 12px;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
+  border-radius: var(--rl-r2);
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   font-family: inherit;
-  font-size: 13px;
+  font-size: 0.9em;
 }
 
 .form-data-key:focus,
@@ -1242,10 +1245,10 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
+  border-radius: var(--rl-r2);
   background-color: var(--vscode-input-background);
   color: var(--vscode-descriptionForeground);
   cursor: pointer;
@@ -1317,7 +1320,7 @@ body {
 
 /* Response Section */
 .response-section {
-  padding: 16px;
+  padding: var(--rl-sp5);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
   background: var(--glass-bg);
@@ -1345,7 +1348,9 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: var(--rl-sp5);
+  flex-wrap: wrap;
+  gap: var(--rl-sp3);
 }
 
 .response-header h2 {
@@ -1361,7 +1366,8 @@ body {
 
 .response-meta {
   display: flex;
-  gap: 8px;
+  gap: var(--rl-sp2);
+  flex-wrap: wrap;
 }
 
 .response-header-right {
@@ -1404,7 +1410,9 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: var(--rl-sp4);
+  flex-wrap: wrap;
+  gap: var(--rl-sp3);
 }
 
 .response-actions {
@@ -1415,13 +1423,14 @@ body {
 .response-actions .action-btn {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
+  gap: var(--rl-sp2);
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
   border: 1px solid var(--glass-border);
-  border-radius: 6px;
+  border-radius: var(--rl-r2);
   background: var(--glass-bg);
   color: var(--vscode-foreground);
-  font-size: 12px;
+  font-size: 0.8em;
   font-weight: 500;
   cursor: pointer;
   opacity: 1;
@@ -1441,9 +1450,9 @@ body {
 }
 
 .status-badge {
-  padding: 6px 14px;
-  border-radius: 20px;
-  font-size: 12px;
+  padding: 0.35em 0.8em;
+  border-radius: 1.4em;
+  font-size: 0.76em;
   font-weight: 700;
   letter-spacing: 0.3px;
 }
@@ -1494,9 +1503,9 @@ body {
 }
 
 .time-badge {
-  padding: 6px 14px;
-  border-radius: 20px;
-  font-size: 12px;
+  padding: 0.35em 0.8em;
+  border-radius: 1.4em;
+  font-size: 0.76em;
   font-weight: 600;
   background: var(--glass-bg);
   color: var(--vscode-foreground);
@@ -1504,9 +1513,9 @@ body {
 }
 
 .size-badge {
-  padding: 6px 14px;
-  border-radius: 20px;
-  font-size: 12px;
+  padding: 0.35em 0.8em;
+  border-radius: 1.4em;
+  font-size: 0.76em;
   font-weight: 600;
   background: linear-gradient(
     90deg,
@@ -1631,7 +1640,7 @@ body {
 
 .response-header-row .header-name {
   font-weight: 700;
-  min-width: 200px;
+  min-width: 11em;
   background: var(--restlab-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

From c368c1bba60512ed364e6a9d06fc32190dd451c2 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:03:02 +0530
Subject: [PATCH 06/19] chore: remove px font-shrink media overrides (fluid
 sizing replaces them)

---
 src/webview/request/styles.css | 117 ---------------------------------
 1 file changed, 117 deletions(-)

diff --git a/src/webview/request/styles.css b/src/webview/request/styles.css
index 7360f76..95cec68 100644
--- a/src/webview/request/styles.css
+++ b/src/webview/request/styles.css
@@ -1741,88 +1741,7 @@ body {
   display: inline;
 }
 
-/* Responsive Styles */
-@media (max-width: 700px) {
-  .request-editor {
-    padding: 0 16px;
-  }
-
-  .request-bar {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .method-select {
-    min-width: 90px;
-    padding: 10px 10px;
-    font-size: 12px;
-  }
-
-  .url-input {
-    flex: 1 1 100%;
-    order: -1;
-    padding: 10px 12px;
-    font-size: 12px;
-  }
-
-  .send-btn,
-  .save-btn {
-    padding: 10px 12px;
-    font-size: 12px;
-  }
-
-  .send-btn .btn-text,
-  .save-btn .btn-text,
-  .beautify-btn .btn-text {
-    display: none;
-  }
-
-  .send-btn,
-  .save-btn,
-  .beautify-btn {
-    gap: 0;
-  }
-}
-
 @media (max-width: 500px) {
-  .request-editor {
-    padding: 0 12px;
-  }
-
-  .request-header {
-    padding: 12px 0;
-  }
-
-  .request-name-input {
-    font-size: 16px;
-    max-width: 100%;
-  }
-
-  .request-bar {
-    padding: 12px 0;
-    gap: 6px;
-  }
-
-  .method-select {
-    min-width: 80px;
-    padding: 8px 8px;
-  }
-
-  .url-input {
-    padding: 8px 10px;
-  }
-
-  .send-btn,
-  .beautify-btn,
-  .save-btn {
-    padding: 8px 10px;
-  }
-
-  .layout-toggle-btn {
-    width: 32px;
-    height: 32px;
-  }
-
   /* Force horizontal layout on very small screens */
   .split-container.vertical {
     flex-direction: column;
@@ -1854,40 +1773,4 @@ body {
     width: 48px;
     height: 4px;
   }
-
-  .response-meta {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-
-  .status-badge,
-  .time-badge,
-  .size-badge {
-    font-size: 10px;
-    padding: 4px 8px;
-  }
-
-  .response-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
-
-  .response-actions {
-    justify-content: flex-end;
-  }
-
-  .response-actions .action-btn {
-    padding: 6px 10px;
-    font-size: 11px;
-  }
-
-  .error-display {
-    padding: 20px 12px;
-  }
-
-  .error-message {
-    padding: 12px 14px;
-    font-size: 12px;
-  }
 }

From b077345a17b669e2a1608f1b59ae52e3866d6a64 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:05:15 +0530
Subject: [PATCH 07/19] feat: tab strip scroll hook with fade-edge indicators

---
 src/webview/request/RequestEditor.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/webview/request/RequestEditor.tsx b/src/webview/request/RequestEditor.tsx
index 15c3443..233b1fa 100644
--- a/src/webview/request/RequestEditor.tsx
+++ b/src/webview/request/RequestEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import CodeIcon from "../components/icons/CodeIcon";
 import MoreActionIcon from "../components/icons/MoreActionIcon";
 import SaveIcon from "../components/icons/SaveIcon";
@@ -18,6 +18,18 @@ import VarInput from "./VarInput";
 const RequestEditorContent: React.FC = () => {
   const [moreOpen, setMoreOpen] = useState(false);
   const moreRef = useRef<HTMLDivElement>(null);
+  const stripRef = useRef<HTMLDivElement>(null);
+  const [edge, setEdge] = useState("");
+
+  const onScroll = () => {
+    const el = stripRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    if (max < 2) return setEdge("");
+    if (el.scrollLeft < 4) setEdge("scroll-start");
+    else if (el.scrollLeft > max - 4) setEdge("scroll-end");
+    else setEdge("scroll-mid");
+  };
 
   React.useEffect(() => {
     if (!moreOpen) return;
@@ -57,6 +69,8 @@ const RequestEditorContent: React.FC = () => {
     handleSetActiveEnvironment,
   } = useRequestContext();
 
+  useEffect(onScroll, [config.method]);
+
   return (
     <div className="request-editor" ref={containerRef}>
       <div className="request-bar">
@@ -205,7 +219,8 @@ const RequestEditorContent: React.FC = () => {
           }
         >
           <div className="request-content">
-            <div className="tabs">
+            <div className={`tabstrip-wrap ${edge}`}>
+            <div className="tabs" ref={stripRef} onScroll={onScroll}>
               {METHODS_WITH_BODY.includes(config.method) && (
                 <button
                   className={`tab ${activeTab === "body" ? "active" : ""}`}
@@ -253,6 +268,7 @@ const RequestEditorContent: React.FC = () => {
                 )}
               </button>
             </div>
+            </div>
 
             <div className="tab-content">
               {activeTab === "body" && (

From 76f3aadd9b766dc352e9c5cd239eb6e62c394d0a Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:12:33 +0530
Subject: [PATCH 08/19] =?UTF-8?q?feat:=20create=20sidebar.css=20=E2=80=94?=
 =?UTF-8?q?=20custom=20CSS=20replacing=20Tailwind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/webview/sidebar/sidebar.css | 578 ++++++++++++++++++++++++++++++++
 1 file changed, 578 insertions(+)
 create mode 100644 src/webview/sidebar/sidebar.css

diff --git a/src/webview/sidebar/sidebar.css b/src/webview/sidebar/sidebar.css
new file mode 100644
index 0000000..86ae784
--- /dev/null
+++ b/src/webview/sidebar/sidebar.css
@@ -0,0 +1,578 @@
+/* ============================================================
+   REST-Lab Sidebar — Custom CSS (replaces Tailwind)
+   All sizing in em relative to body { font-size: var(--vscode-font-size) }
+   ============================================================ */
+
+/* ---- Reset ---- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ---- Base ---- */
+body {
+  font-family: var(
+    --vscode-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif
+  );
+  font-size: var(--vscode-font-size, 13px);
+  color: var(--vscode-foreground);
+  background-color: var(--vscode-sideBar-background);
+  line-height: 1.45;
+}
+
+/* ---- Brand & VS Code tokens ---- */
+:root {
+  --restlab-gradient: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  --restlab-gradient-hover: linear-gradient(90deg, #0ea5e9 0%, #4f46e5 100%);
+  --restlab-accent: #38bdf8;
+  --restlab-accent-hover: #0ea5e9;
+  --restlab-accent-subtle: rgba(56, 189, 248, 0.1);
+  --restlab-accent-glow: rgba(56, 189, 248, 0.4);
+  --restlab-danger: #ef4444;
+  --restlab-danger-subtle: rgba(239, 68, 68, 0.1);
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  /* Method colors */
+  --method-get: #22c55e;
+  --method-post: #3b82f6;
+  --method-put: #f59e0b;
+  --method-patch: #a855f7;
+  --method-delete: #ef4444;
+  /* Fluid spacing tokens */
+  --rl-sp1: 0.30em;
+  --rl-sp2: 0.46em;
+  --rl-sp3: 0.62em;
+  --rl-sp4: 0.92em;
+  --rl-sp5: 1.23em;
+  --rl-ctrl: 2.35em;
+  --rl-icon: 1.25em;
+  --rl-r1: 0.35em;
+  --rl-r2: 0.50em;
+  --rl-r3: 0.65em;
+  --rl-tap: 2.1em;
+}
+
+/* ============================================================
+   SIDEBAR SHELL
+   ============================================================ */
+.sb {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ---- Header ---- */
+.sb-head {
+  padding: var(--rl-sp4);
+  border-bottom: 1px solid var(--glass-border);
+  background: linear-gradient(180deg, rgba(56, 189, 248, 0.05), transparent);
+  position: relative;
+  flex-shrink: 0;
+}
+.sb-head::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: var(--rl-sp4);
+  right: var(--rl-sp4);
+  height: 1px;
+  background: var(--restlab-gradient);
+  opacity: 0.3;
+}
+
+.sb-title {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  font-size: 0.86em;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  background: var(--restlab-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: var(--rl-sp4);
+}
+.sb-title::before {
+  content: "";
+  display: inline-block;
+  width: 0.62em;
+  height: 0.62em;
+  flex-shrink: 0;
+  border-radius: 2px;
+  background: var(--restlab-gradient);
+  box-shadow: 0 0 8px var(--restlab-accent-glow);
+  /* Reset gradient-text clip so the dot renders as a solid box */
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  -webkit-text-fill-color: unset;
+}
+
+.sb-head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+}
+
+/* ---- Tree ---- */
+.sb-tree {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--rl-sp3) var(--rl-sp2);
+}
+.sb-tree::-webkit-scrollbar { width: 0.54em; }
+.sb-tree::-webkit-scrollbar-track { background: transparent; }
+.sb-tree::-webkit-scrollbar-thumb {
+  background: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.35));
+  border-radius: 0.27em;
+}
+.sb-tree::-webkit-scrollbar-thumb:hover {
+  background: var(--vscode-scrollbarSlider-hoverBackground, rgba(121, 121, 121, 0.55));
+}
+
+/* ============================================================
+   FOLDER ROW
+   ============================================================ */
+.folder-item { margin-bottom: 2px; }
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp3);
+  padding: var(--rl-sp3);
+  margin-bottom: var(--rl-sp1);
+  cursor: pointer;
+  border-radius: var(--rl-r2);
+  border: 1px solid transparent;
+  position: relative;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.tree-row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  border-radius: 0 2px 2px 0;
+  background: var(--restlab-gradient);
+  transition: height 0.2s ease;
+}
+.tree-row:hover,
+.tree-row:focus-visible {
+  background: var(--glass-bg);
+  border-color: var(--glass-border);
+  outline: none;
+}
+.tree-row:hover::before,
+.tree-row:focus-visible::before { height: 60%; }
+.tree-row:focus-visible {
+  border-color: var(--restlab-accent);
+  background: var(--restlab-accent-subtle);
+}
+
+.tree-icon {
+  flex-shrink: 0;
+  width: var(--rl-icon);
+  height: var(--rl-icon);
+  color: var(--vscode-descriptionForeground);
+  transition: color 0.15s ease;
+  display: block;
+}
+.tree-row:hover .tree-icon { color: var(--restlab-accent); }
+
+.tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.95em;
+  font-weight: 600;
+}
+
+.tree-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp1);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* ---- Tree children connector ---- */
+.tree-children {
+  position: relative;
+}
+.tree-children::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--rl-sp4) + 0.3em);
+  top: 0;
+  bottom: var(--rl-sp3);
+  width: 1px;
+  background: linear-gradient(var(--glass-border), transparent);
+}
+
+/* ============================================================
+   REQUEST ROW
+   ============================================================ */
+.req-zone { /* container only — layout handled by inline paddingLeft */ }
+
+.req-row {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  padding: var(--rl-sp2) var(--rl-sp3);
+  margin-bottom: 1px;
+  margin-left: 0.6em;
+  cursor: pointer;
+  border-radius: var(--rl-r2);
+  border: 1px solid transparent;
+  position: relative;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.req-row::before {
+  content: "";
+  position: absolute;
+  left: -0.6em;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  border-radius: 0 2px 2px 0;
+  background: var(--restlab-gradient);
+  transition: height 0.2s ease;
+}
+.req-row:hover { background: var(--glass-bg); border-color: var(--glass-border); }
+.req-row:hover::before { height: 55%; }
+.req-row.active {
+  background: rgba(56, 189, 248, 0.15);
+  border-color: rgba(56, 189, 248, 0.3);
+}
+.req-row.active::before { height: 55%; }
+
+.req-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.88em;
+}
+
+/* ============================================================
+   EMPTY STATES
+   ============================================================ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3em 1.5em;
+  text-align: center;
+  gap: var(--rl-sp3);
+}
+.empty-state svg {
+  width: 3.2em;
+  height: 3.2em;
+  color: var(--restlab-accent);
+  opacity: 0.5;
+  margin-bottom: var(--rl-sp2);
+}
+.empty-state-title {
+  font-size: 0.95em;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  margin-bottom: var(--rl-sp1);
+}
+.empty-state-hint {
+  font-size: 0.82em;
+  color: var(--vscode-descriptionForeground);
+  opacity: 0.8;
+  line-height: 1.5;
+  max-width: 18em;
+}
+
+.req-empty-hint {
+  padding: var(--rl-sp2) var(--rl-sp3);
+  font-size: 0.82em;
+  color: var(--vscode-descriptionForeground);
+  opacity: 0.7;
+  font-style: italic;
+}
+
+/* ============================================================
+   METHOD BADGE
+   ============================================================ */
+.method-badge {
+  flex-shrink: 0;
+  font-size: 0.62em;
+  font-weight: 800;
+  padding: 0.32em 0.55em;
+  border-radius: 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border: 1px solid transparent;
+  line-height: 1;
+  min-width: 3.6em;
+  text-align: center;
+}
+.method-get {
+  color: var(--method-get);
+  background: rgba(34, 197, 94, 0.14);
+  border-color: rgba(34, 197, 94, 0.32);
+}
+.method-post {
+  color: var(--method-post);
+  background: rgba(59, 130, 246, 0.14);
+  border-color: rgba(59, 130, 246, 0.32);
+}
+.method-put {
+  color: var(--method-put);
+  background: rgba(245, 158, 11, 0.14);
+  border-color: rgba(245, 158, 11, 0.32);
+}
+.method-patch {
+  color: var(--method-patch);
+  background: rgba(168, 85, 247, 0.14);
+  border-color: rgba(168, 85, 247, 0.32);
+}
+.method-delete {
+  color: var(--method-delete);
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.32);
+}
+
+/* ============================================================
+   BUTTONS
+   ============================================================ */
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rl-sp3);
+  flex: 1;
+  min-height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: none;
+  border-radius: var(--rl-r3);
+  background: var(--restlab-gradient);
+  color: #ffffff;
+  font: inherit;
+  font-size: 0.92em;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 2px 8px var(--restlab-accent-glow);
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.btn-primary::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+.btn-primary:hover::before { left: 100%; }
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--restlab-accent-glow); }
+.btn-primary:active { transform: translateY(0); }
+.btn-primary:focus { outline: 2px solid var(--restlab-accent); outline-offset: 2px; }
+.btn-primary svg { flex-shrink: 0; width: var(--rl-icon); height: var(--rl-icon); }
+
+.header-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
+  flex-shrink: 0;
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.header-action-btn:hover {
+  background: var(--restlab-accent-subtle);
+  border-color: var(--restlab-accent);
+  color: var(--restlab-accent);
+}
+.header-action-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-tap);
+  height: var(--rl-tap);
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--rl-r1);
+  background: transparent;
+  color: var(--vscode-icon-foreground, var(--vscode-foreground));
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+.tree-row:hover .action-btn,
+.req-row:hover .action-btn { opacity: 0.6; }
+.action-btn:hover { opacity: 1 !important; background: var(--restlab-accent-subtle); color: var(--restlab-accent); }
+.action-btn svg { width: var(--rl-icon); height: var(--rl-icon); display: block; }
+
+/* ---- Chevron rotation utility ---- */
+.rotate-90 { transform: rotate(90deg); transition: transform 0.2s ease; }
+
+/* ============================================================
+   DROPDOWN
+   ============================================================ */
+.dropdown-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 180px;
+  background: var(--vscode-dropdown-background, #3c3c3c);
+  border: 1px solid var(--vscode-dropdown-border, #454545);
+  border-radius: var(--rl-r3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  overflow: hidden;
+  animation: sbFadeIn 0.15s ease-out;
+}
+
+.dropdown-header {
+  padding: var(--rl-sp3) var(--rl-sp4);
+  font-size: 0.84em;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground, #858585);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--vscode-dropdown-border, #454545);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp3);
+  width: 100%;
+  padding: var(--rl-sp3) var(--rl-sp4);
+  border: none;
+  background: transparent;
+  color: var(--vscode-dropdown-foreground, #cccccc);
+  font: inherit;
+  font-size: 0.92em;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s ease;
+}
+.dropdown-item:hover { background: var(--vscode-list-hoverBackground, #2a2d2e); }
+.dropdown-item:active { background: var(--vscode-list-activeSelectionBackground, #094771); }
+.dropdown-item.danger { color: var(--restlab-danger); }
+.dropdown-item.danger:hover { background: var(--restlab-danger-subtle); }
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--vscode-dropdown-border, #454545);
+  margin: 2px 0;
+}
+
+.dropdown-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-icon);
+  height: var(--rl-icon);
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+/* ============================================================
+   TOOLTIP
+   ============================================================ */
+.custom-tooltip {
+  padding: 4px 8px;
+  margin: 2px;
+  border-radius: var(--rl-r1);
+  font-size: 0.84em;
+  font-weight: 500;
+  white-space: nowrap;
+  pointer-events: none;
+  background: var(--vscode-editorWidget-background, #252526);
+  color: var(--vscode-editorWidget-foreground, #cccccc);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  z-index: 2147483647;
+  animation: sbTooltipFadeIn 0.15s ease-out;
+}
+.custom-tooltip.tooltip-top::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--vscode-editorWidget-background, #252526);
+}
+.custom-tooltip.tooltip-bottom::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-bottom-color: var(--vscode-editorWidget-background, #252526);
+}
+.custom-tooltip.tooltip-left::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-left-color: var(--vscode-editorWidget-background, #252526);
+}
+.custom-tooltip.tooltip-right::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-right-color: var(--vscode-editorWidget-background, #252526);
+}
+
+/* ============================================================
+   ANIMATIONS
+   ============================================================ */
+@keyframes sbFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes sbTooltipFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}

From f00ee64b15d313e67f9add56e866dd12c29d314c Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:17:44 +0530
Subject: [PATCH 09/19] feat: sidebar bundle now uses sidebar.css instead of
 tailwind

---
 src/webview/sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webview/sidebar/index.tsx b/src/webview/sidebar/index.tsx
index d471f45..75e1c6e 100644
--- a/src/webview/sidebar/index.tsx
+++ b/src/webview/sidebar/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "../tailwind.css";
+import "./sidebar.css";
 import { Sidebar } from "./Sidebar";
 import "./drag-drop.css";
 

From af545372f7b3c8fe50ceffaaa87f48b12d236ff8 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:20:05 +0530
Subject: [PATCH 10/19] =?UTF-8?q?feat:=20Sidebar.tsx=20=E2=80=94=20replace?=
 =?UTF-8?q?=20Tailwind=20utilities=20with=20semantic=20CSS=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/webview/sidebar/Sidebar.tsx | 44 +++++++++++++++------------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/webview/sidebar/Sidebar.tsx b/src/webview/sidebar/Sidebar.tsx
index 6f89772..4c0748d 100644
--- a/src/webview/sidebar/Sidebar.tsx
+++ b/src/webview/sidebar/Sidebar.tsx
@@ -121,9 +121,9 @@ const FolderItem: React.FC<FolderItemProps> = ({
   const isDropTarget = dragOverFolderId === folder.id;
 
   return (
-    <div key={folder.id} className="mb-0.5" data-folder-id={folder.id}>
+    <div key={folder.id} className="folder-item" data-folder-id={folder.id}>
       <div
-        className={`group flex items-center gap-2.5 py-2.5 px-3 mb-1 cursor-pointer rounded-lg transition-all duration-200 border border-transparent hover:bg-glass hover:border-glass relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-0 before:bg-restlab-gradient before:rounded-r before:transition-all before:duration-200 hover:before:h-[60%] focus:outline-none focus:border-sky-400 focus:bg-sky-500/10 focus:before:h-[80%] ${isDropTarget ? "drop-target-active" : ""} ${isDragging ? "dragging-active" : ""}`}
+        className={`tree-row${isDropTarget ? " drop-target-active" : ""}${isDragging ? " dragging-active" : ""}`}
         onClick={() => onToggleFolder(folder.id)}
         role="button"
         tabIndex={0}
@@ -136,18 +136,18 @@ const FolderItem: React.FC<FolderItemProps> = ({
         onDrop={(e) => onDrop(e, folder.id)}
       >
         <ChevronIcon
-          className={expandedFolders.has(folder.id) ? "rotate-90" : ""}
+          className={`tree-icon${expandedFolders.has(folder.id) ? " rotate-90" : ""}`}
         />
 
         {depth === 0 ? (
-          <CollectionIcon className="flex-shrink-0 text-vscode transition-colors duration-150 group-hover:text-sky-400 group-hover:drop-shadow-[0_0_4px_rgba(56,189,248,0.4)]" />
+          <CollectionIcon className="tree-icon" />
         ) : (
-          <FolderIcon className="flex-shrink-0 text-vscode transition-colors duration-150 group-hover:text-sky-400 group-hover:drop-shadow-[0_0_4px_rgba(56,189,248,0.4)]" />
+          <FolderIcon className="tree-icon" />
         )}
-        <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[13px] font-medium">
+        <span className="tree-label">
           {folder.name}
         </span>
-        <div className="flex items-center gap-1 ml-auto">
+        <div className="tree-actions">
           <Tooltip text="Add Request">
             <button
               className="action-btn group-hover:opacity-60 hover:!opacity-100 hover:bg-sky-500/10 hover:text-sky-400 hover:shadow-glow"
@@ -170,7 +170,7 @@ const FolderItem: React.FC<FolderItemProps> = ({
       </div>
 
       {expandedFolders.has(folder.id) && (
-        <div className="relative before:content-[''] before:absolute before:left-5 before:top-0 before:bottom-2 before:w-px before:bg-gradient-to-b before:from-white/10 before:to-transparent">
+        <div className="tree-children">
           {/* Render subfolders first */}
           {folder.subfolders &&
             folder.subfolders.map((subfolder) => (
@@ -205,7 +205,7 @@ const FolderItem: React.FC<FolderItemProps> = ({
 
           {/* Render requests */}
           <div
-            className={`pl-5 ${isDropTarget ? "drop-zone-highlight" : ""}`}
+            className={`req-zone${isDropTarget ? " drop-zone-highlight" : ""}`}
             style={{ paddingLeft: `${20 + depth * 16}px` }}
             onDragOver={(e) => onDragOver(e, folder.id)}
             onDrop={(e) => onDrop(e, folder.id)}
@@ -213,7 +213,7 @@ const FolderItem: React.FC<FolderItemProps> = ({
             {(!folder.requests || folder.requests.length === 0) &&
             (!folder.subfolders || folder.subfolders.length === 0) ? (
               <div
-                className={`py-2 px-3 text-xs text-vscode-muted opacity-70 italic ${isDropTarget ? "drop-hint-visible" : ""}`}
+                className={`req-empty-hint${isDropTarget ? " drop-hint-visible" : ""}`}
               >
                 <span>
                   {isDropTarget ? "Drop here to add" : "No items yet"}
@@ -223,11 +223,7 @@ const FolderItem: React.FC<FolderItemProps> = ({
               folder.requests?.map((request) => (
                 <div
                   key={request.id}
-                  className={`group flex items-center gap-2 py-2 px-2.5 mb-0.5 cursor-pointer rounded-md transition-all duration-200 border ml-2.5 relative before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:rounded-sm before:transition-all before:duration-200 hover:bg-glass hover:border-glass hover:before:h-1/2 ${isDragging ? "dragging-active" : ""} ${
-                    request.id === activeRequestId
-                      ? "bg-sky-500/15 border-sky-500/30 before:h-1/2 before:bg-restlab-gradient"
-                      : "border-transparent before:h-0 before:bg-restlab-gradient"
-                  }`}
+                  className={`req-row${isDragging ? " dragging-active" : ""}${request.id === activeRequestId ? " active" : ""}`}
                   onClick={() => onOpenRequest(request)}
                   role="button"
                   tabIndex={0}
@@ -248,7 +244,7 @@ const FolderItem: React.FC<FolderItemProps> = ({
                   >
                     {request.method}
                   </span>
-                  <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs">
+                  <span className="req-label">
                     {request.name}
                   </span>
                   <RequestActionsDropdown
@@ -591,12 +587,12 @@ export const Sidebar: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col h-screen">
-      <div className="p-4 border-b border-glass bg-gradient-to-b from-sky-500/5 to-transparent relative after:content-[''] after:absolute after:-bottom-px after:left-4 after:right-4 after:h-px after:bg-restlab-gradient after:opacity-30">
-        <h2 className="flex items-center gap-2 text-[13px] font-bold uppercase tracking-widest text-gradient mb-4 before:content-[''] before:inline-block before:w-2 before:h-2 before:bg-restlab-gradient before:rounded-sm before:shadow-glow">
+    <div className="sb">
+      <div className="sb-head">
+        <h2 className="sb-title">
           REST Lab
         </h2>
-        <div className="flex items-center gap-2">
+        <div className="sb-head-actions">
           <button
             className="btn-primary"
             onClick={handleCreateFolder}
@@ -610,7 +606,7 @@ export const Sidebar: React.FC = () => {
       </div>
 
       <div
-        className={`flex-1 overflow-y-auto py-3 px-2 scrollbar-thin ${isDragging ? "root-drop-zone" : ""}`}
+        className={`sb-tree${isDragging ? " root-drop-zone" : ""}`}
         onDragOver={(e) => {
           if (e.dataTransfer.types.includes(DRAG_TYPE_FOLDER)) {
             e.preventDefault();
@@ -620,10 +616,10 @@ export const Sidebar: React.FC = () => {
         onDrop={handleDropOnRoot}
       >
         {folders.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
+          <div className="empty-state">
             <NoItemsIcon />
-            <p className="mb-1 text-vscode font-medium">No collections yet</p>
-            <p className="text-xs text-vscode-muted opacity-80">
+            <p className="empty-state-title">No collections yet</p>
+            <p className="empty-state-hint">
               Create your first collection to get started
             </p>
           </div>

From 4640b39415bf75f08e591e19b07d71e1f33a67e4 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:22:21 +0530
Subject: [PATCH 11/19] =?UTF-8?q?feat:=20FolderActionsDropdown=20=E2=80=94?=
 =?UTF-8?q?=20remove=20Tailwind=20utility=20strings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/webview/sidebar/FolderActionsDropdown.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/webview/sidebar/FolderActionsDropdown.tsx b/src/webview/sidebar/FolderActionsDropdown.tsx
index 41062b7..b0f31aa 100644
--- a/src/webview/sidebar/FolderActionsDropdown.tsx
+++ b/src/webview/sidebar/FolderActionsDropdown.tsx
@@ -80,7 +80,7 @@ const FolderActionsDropdown: React.FC<{
   };
 
   return (
-    <div className="relative inline-flex" ref={dropdownRef}>
+    <div className="dropdown-wrap" ref={dropdownRef}>
       <Tooltip text="More Actions" position="left">
         <button
           className="action-btn group-hover:opacity-60 hover:!opacity-100 hover:bg-slate-500/10 hover:text-slate-400"
@@ -90,7 +90,7 @@ const FolderActionsDropdown: React.FC<{
         </button>
       </Tooltip>
       {isOpen && !showExport && (
-        <div className="dropdown-menu min-w-[180px]">
+        <div className="dropdown-menu">
           <button
             className="dropdown-item"
             onClick={(e) => {
@@ -154,7 +154,7 @@ const FolderActionsDropdown: React.FC<{
           </button>
           <div className="dropdown-divider" />
           <button
-            className="dropdown-item text-red-500"
+            className="dropdown-item danger"
             onClick={(e) => {
               onDelete(e, folder.id);
               setIsOpen(false);
@@ -166,7 +166,7 @@ const FolderActionsDropdown: React.FC<{
         </div>
       )}
       {isOpen && showExport && (
-        <div className="dropdown-menu min-w-[180px]">
+        <div className="dropdown-menu">
           <button
             className="dropdown-item"
             onClick={(e) => {
@@ -190,7 +190,7 @@ const FolderActionsDropdown: React.FC<{
                 setShowExport(false);
               }}
             >
-              <span className="flex items-center justify-center w-5 h-5 opacity-80">
+              <span className="dropdown-item-icon">
                 {format.icon}
               </span>
               <span>{format.name}</span>

From 16b060e1095dddbc90bc1e6cbc0c5a09f59f75d3 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:22:52 +0530
Subject: [PATCH 12/19] =?UTF-8?q?fix:=20FolderActionsDropdown=20trigger=20?=
 =?UTF-8?q?=E2=80=94=20remove=20dead=20Tailwind=20hover=20utilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/webview/sidebar/FolderActionsDropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webview/sidebar/FolderActionsDropdown.tsx b/src/webview/sidebar/FolderActionsDropdown.tsx
index b0f31aa..5b49753 100644
--- a/src/webview/sidebar/FolderActionsDropdown.tsx
+++ b/src/webview/sidebar/FolderActionsDropdown.tsx
@@ -83,7 +83,7 @@ const FolderActionsDropdown: React.FC<{
     <div className="dropdown-wrap" ref={dropdownRef}>
       <Tooltip text="More Actions" position="left">
         <button
-          className="action-btn group-hover:opacity-60 hover:!opacity-100 hover:bg-slate-500/10 hover:text-slate-400"
+          className="action-btn"
           onClick={handleClick}
         >
           <MoreActionIcon />

From 4436568c2305961777c60c150838a95bfc51326b Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:23:55 +0530
Subject: [PATCH 13/19] =?UTF-8?q?feat:=20ImportDropdown=20+=20RequestActio?=
 =?UTF-8?q?nsDropdown=20=E2=80=94=20remove=20Tailwind=20utilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/webview/sidebar/ImportDropdown.tsx         | 4 ++--
 src/webview/sidebar/RequestActionsDropdown.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/webview/sidebar/ImportDropdown.tsx b/src/webview/sidebar/ImportDropdown.tsx
index fc89ad8..ea0783c 100644
--- a/src/webview/sidebar/ImportDropdown.tsx
+++ b/src/webview/sidebar/ImportDropdown.tsx
@@ -47,7 +47,7 @@ const ImportDropdown: React.FC<{
   }, [isOpen]);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className="dropdown-wrap" ref={dropdownRef}>
       <button
         className="header-action-btn"
         onClick={() => setIsOpen(!isOpen)}
@@ -67,7 +67,7 @@ const ImportDropdown: React.FC<{
                 setIsOpen(false);
               }}
             >
-              <span className="flex items-center justify-center w-5 h-5 opacity-80">
+              <span className="dropdown-item-icon">
                 {provider.icon}
               </span>
               <span>{provider.name}</span>
diff --git a/src/webview/sidebar/RequestActionsDropdown.tsx b/src/webview/sidebar/RequestActionsDropdown.tsx
index a2593fa..7cf3097 100644
--- a/src/webview/sidebar/RequestActionsDropdown.tsx
+++ b/src/webview/sidebar/RequestActionsDropdown.tsx
@@ -43,17 +43,17 @@ const RequestActionsDropdown: React.FC<{
   };
 
   return (
-    <div className="relative inline-flex" ref={dropdownRef}>
+    <div className="dropdown-wrap" ref={dropdownRef}>
       <Tooltip text="More Actions" position="left">
         <button
-          className="action-btn w-5 h-5 group-hover:opacity-60 hover:!opacity-100 hover:bg-slate-500/10 hover:text-slate-400"
+          className="action-btn"
           onClick={handleClick}
         >
           <MoreActionIcon />
         </button>
       </Tooltip>
       {isOpen && (
-        <div className="dropdown-menu min-w-[160px]">
+        <div className="dropdown-menu">
           <button
             className="dropdown-item"
             onClick={(e) => {
@@ -76,7 +76,7 @@ const RequestActionsDropdown: React.FC<{
           </button>
           <div className="dropdown-divider" />
           <button
-            className="dropdown-item text-red-500"
+            className="dropdown-item danger"
             onClick={(e) => {
               onDelete(e, request.id, folderId);
               setIsOpen(false);

From 721bc43337e6cb9a7a2f220eb61385851b97e53e Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Fri, 5 Jun 2026 19:27:04 +0530
Subject: [PATCH 14/19] fix: remove residual Tailwind hover utilities from
 Sidebar.tsx add-request button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/webview/sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webview/sidebar/Sidebar.tsx b/src/webview/sidebar/Sidebar.tsx
index 4c0748d..17e9c61 100644
--- a/src/webview/sidebar/Sidebar.tsx
+++ b/src/webview/sidebar/Sidebar.tsx
@@ -150,7 +150,7 @@ const FolderItem: React.FC<FolderItemProps> = ({
         <div className="tree-actions">
           <Tooltip text="Add Request">
             <button
-              className="action-btn group-hover:opacity-60 hover:!opacity-100 hover:bg-sky-500/10 hover:text-sky-400 hover:shadow-glow"
+              className="action-btn"
               onClick={(e) => onAddRequest(e, folder.id)}
             >
               <PlusIcon />

From 4cee8a5611cc9722aea648ccb5fa88a50411f3c5 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Sun, 7 Jun 2026 19:22:13 +0530
Subject: [PATCH 15/19] docs: add first-launch seed data design spec

---
 .../2026-06-07-first-launch-seed-design.md    | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-06-07-first-launch-seed-design.md

diff --git a/docs/superpowers/specs/2026-06-07-first-launch-seed-design.md b/docs/superpowers/specs/2026-06-07-first-launch-seed-design.md
new file mode 100644
index 0000000..d9f1c5d
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-07-first-launch-seed-design.md
@@ -0,0 +1,91 @@
+# First-Launch Seed Data Design
+
+**Date:** 2026-06-07  
+**Branch:** enh/design-revamp  
+**Status:** Approved
+
+## Goal
+
+When a user installs REST Lab for the first time, seed a ready-to-use example collection so they can immediately understand how collections, folders, requests, environments, and base URLs work — without needing to read documentation.
+
+## Trigger Condition
+
+Seeding happens once, on first activation, when `restlab.folders` in `globalState` is empty or undefined. If the array has any entries, the seed is skipped entirely and never runs again.
+
+## Approach
+
+A single `seedDefaultData(context: vscode.ExtensionContext)` function in `src/extension.ts`, called as the very first line of `activate()`. No new files, no new classes. The `SidebarProvider` constructor picks up the seeded data transparently since it reads `restlab.folders` from `globalState`.
+
+## Seeded Structure
+
+```
+📁 JSONPlaceholder  (collection root)
+    baseUrl: https://jsonplaceholder.typicode.com
+    header:  Content-Type: application/json
+    environments: Development, Production
+    activeEnvironment: Development
+
+  📁 Posts
+      GET  Get all posts       → /posts
+      GET  Get post by ID      → /posts/1
+      POST Create post         → /posts  (JSON body)
+      DEL  Delete post         → /posts/1
+
+  📁 Users
+      GET  Get all users       → /users
+      GET  Get user by ID      → /users/1
+```
+
+## GlobalState Keys Written
+
+| Key | Value |
+|---|---|
+| `restlab.folders` | Full nested `Folder[]` tree |
+| `restlab.folder.restlab-example-collection` | `FolderConfig` — baseUrl, shared header, 2 environments |
+| `restlab.request.restlab-example-<name>` | `RequestConfig` × 6 |
+| `restlab.expandedFolders` | `[collectionId, postsFolderId]` — pre-expanded |
+
+## IDs
+
+All seed IDs are hard-coded strings (e.g., `restlab-example-collection`, `restlab-example-posts-folder`) rather than `Date.now()`-based. This makes the seed deterministic and avoids race conditions.
+
+## Environments
+
+**Development**
+- `baseUrl`: `https://jsonplaceholder.typicode.com`
+- `userId`: `1`
+
+**Production**
+- `baseUrl`: `https://jsonplaceholder.typicode.com`
+- `userId`: `1`
+
+Both point to the same public API (JSONPlaceholder has no prod equivalent), but the two-environment setup teaches users how environment switching works.
+
+## Request Configs
+
+| Name | Method | URL | Body |
+|---|---|---|---|
+| Get all posts | GET | `/posts` | — |
+| Get post by ID | GET | `/posts/1` | — |
+| Create post | POST | `/posts` | `{"title":"foo","body":"bar","userId":1}` |
+| Delete post | DELETE | `/posts/1` | — |
+| Get all users | GET | `/users` | — |
+| Get user by ID | GET | `/users/1` | — |
+
+The `url` field on each request stores only the path (e.g., `/posts`); the collection-level `baseUrl` is prepended at request execution time by the existing inheritance logic.
+
+## User Experience
+
+- The collection appears immediately when the extension opens — Posts and the Posts folder are pre-expanded.
+- The example is a plain collection; users can delete, rename, or modify it like any other.
+- No notification or prompt is shown.
+
+## What Is Not Changed
+
+- `SidebarProvider` — no modifications needed.
+- `RequestEditorProvider` — no modifications needed.
+- All existing import/export flows — unaffected.
+
+## Implementation Location
+
+`src/extension.ts` — `seedDefaultData()` function + call at top of `activate()`.

From 28de299d08772ded9ae2d4c51309a1dfefab4237 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Sun, 7 Jun 2026 21:25:47 +0530
Subject: [PATCH 16/19] feat: seed example JSONPlaceholder collection on first
 launch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/extension.ts | 148 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 146 insertions(+), 2 deletions(-)

diff --git a/src/extension.ts b/src/extension.ts
index 0961bd3..30486ec 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,10 +1,154 @@
 import * as vscode from "vscode";
-import { SidebarProvider } from "./providers/SidebarProvider";
+import { Folder, Request, SidebarProvider } from "./providers/SidebarProvider";
 import { FolderEditorProvider } from "./providers/FolderEditorProvider";
 import { RequestEditorProvider } from "./providers/RequestEditorProvider";
+import {
+  FolderConfig,
+  RequestConfig,
+} from "./webview/types/internal.types";
 
-export function activate(context: vscode.ExtensionContext) {
+async function seedDefaultData(
+  context: vscode.ExtensionContext,
+): Promise<void> {
+  const existing = context.globalState.get<Folder[]>("restlab.folders");
+  if (existing && existing.length > 0) return;
+
+  const COLLECTION_ID = "restlab-example-collection";
+  const POSTS_ID = "restlab-example-posts";
+  const USERS_ID = "restlab-example-users";
+  const REQ_GET_POSTS = "restlab-example-req-get-posts";
+  const REQ_GET_POST = "restlab-example-req-get-post";
+  const REQ_CREATE_POST = "restlab-example-req-create-post";
+  const REQ_DELETE_POST = "restlab-example-req-delete-post";
+  const REQ_GET_USERS = "restlab-example-req-get-users";
+  const REQ_GET_USER = "restlab-example-req-get-user";
+  const ENV_DEV_ID = "restlab-example-env-dev";
+  const ENV_PROD_ID = "restlab-example-env-prod";
+  const now = Date.now();
+
+  const folderTree: Folder[] = [
+    {
+      id: COLLECTION_ID,
+      name: "JSONPlaceholder",
+      createdAt: now,
+      requests: [],
+      subfolders: [
+        {
+          id: POSTS_ID,
+          name: "Posts",
+          createdAt: now,
+          parentId: COLLECTION_ID,
+          requests: [
+            { id: REQ_GET_POSTS, name: "Get all posts", folderId: POSTS_ID, method: "GET" } as Request,
+            { id: REQ_GET_POST, name: "Get post by ID", folderId: POSTS_ID, method: "GET" } as Request,
+            { id: REQ_CREATE_POST, name: "Create post", folderId: POSTS_ID, method: "POST" } as Request,
+            { id: REQ_DELETE_POST, name: "Delete post", folderId: POSTS_ID, method: "DELETE" } as Request,
+          ],
+          subfolders: [],
+        },
+        {
+          id: USERS_ID,
+          name: "Users",
+          createdAt: now,
+          parentId: COLLECTION_ID,
+          requests: [
+            { id: REQ_GET_USERS, name: "Get all users", folderId: USERS_ID, method: "GET" } as Request,
+            { id: REQ_GET_USER, name: "Get user by ID", folderId: USERS_ID, method: "GET" } as Request,
+          ],
+          subfolders: [],
+        },
+      ],
+    },
+  ];
+
+  const folderConfig: FolderConfig = {
+    baseUrl: "https://jsonplaceholder.typicode.com",
+    headers: [{ key: "Content-Type", value: "application/json", enabled: true }],
+    params: [],
+    environments: [
+      {
+        id: ENV_DEV_ID,
+        name: "Development",
+        variables: [
+          { key: "baseUrl", value: "https://jsonplaceholder.typicode.com", enabled: true },
+          { key: "userId", value: "1", enabled: true },
+        ],
+      },
+      {
+        id: ENV_PROD_ID,
+        name: "Production",
+        variables: [
+          { key: "baseUrl", value: "https://jsonplaceholder.typicode.com", enabled: true },
+          { key: "userId", value: "1", enabled: true },
+        ],
+      },
+    ],
+    activeEnvironmentId: ENV_DEV_ID,
+  };
+
+  const requests: RequestConfig[] = [
+    {
+      id: REQ_GET_POSTS,
+      name: "Get all posts",
+      folderId: POSTS_ID,
+      method: "GET",
+      url: "/posts",
+    },
+    {
+      id: REQ_GET_POST,
+      name: "Get post by ID",
+      folderId: POSTS_ID,
+      method: "GET",
+      url: "/posts/1",
+    },
+    {
+      id: REQ_CREATE_POST,
+      name: "Create post",
+      folderId: POSTS_ID,
+      method: "POST",
+      url: "/posts",
+      contentType: "application/json",
+      body: JSON.stringify({ title: "foo", body: "bar", userId: 1 }, null, 2),
+    },
+    {
+      id: REQ_DELETE_POST,
+      name: "Delete post",
+      folderId: POSTS_ID,
+      method: "DELETE",
+      url: "/posts/1",
+    },
+    {
+      id: REQ_GET_USERS,
+      name: "Get all users",
+      folderId: USERS_ID,
+      method: "GET",
+      url: "/users",
+    },
+    {
+      id: REQ_GET_USER,
+      name: "Get user by ID",
+      folderId: USERS_ID,
+      method: "GET",
+      url: "/users/1",
+    },
+  ];
+
+  await Promise.all([
+    context.globalState.update("restlab.folders", folderTree),
+    context.globalState.update(`restlab.folder.${COLLECTION_ID}`, folderConfig),
+    ...requests.map((r) =>
+      context.globalState.update(`restlab.request.${r.id}`, r),
+    ),
+    context.globalState.update("restlab.expandedFolders", [
+      COLLECTION_ID,
+      POSTS_ID,
+    ]),
+  ]);
+}
+
+export async function activate(context: vscode.ExtensionContext) {
   console.log("REST Lab extension is now active!");
+  await seedDefaultData(context);
 
   // Initialize the sidebar provider
   const sidebarProvider = new SidebarProvider(context.extensionUri, context);

From e3f03bee5274a1da379f26723cb3bdb398007d3c Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Sun, 7 Jun 2026 21:29:09 +0530
Subject: [PATCH 17/19] fix: roll back seed on partial globalState failure

---
 src/extension.ts | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/extension.ts b/src/extension.ts
index 30486ec..35c7a53 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -133,17 +133,22 @@ async function seedDefaultData(
     },
   ];
 
-  await Promise.all([
-    context.globalState.update("restlab.folders", folderTree),
-    context.globalState.update(`restlab.folder.${COLLECTION_ID}`, folderConfig),
-    ...requests.map((r) =>
-      context.globalState.update(`restlab.request.${r.id}`, r),
-    ),
-    context.globalState.update("restlab.expandedFolders", [
-      COLLECTION_ID,
-      POSTS_ID,
-    ]),
-  ]);
+  try {
+    await Promise.all([
+      context.globalState.update("restlab.folders", folderTree),
+      context.globalState.update(`restlab.folder.${COLLECTION_ID}`, folderConfig),
+      ...requests.map((r) =>
+        context.globalState.update(`restlab.request.${r.id}`, r),
+      ),
+      context.globalState.update("restlab.expandedFolders", [
+        COLLECTION_ID,
+        POSTS_ID,
+      ]),
+    ]);
+  } catch (err) {
+    await context.globalState.update("restlab.folders", undefined);
+    console.error("REST Lab: failed to seed default data", err);
+  }
 }
 
 export async function activate(context: vscode.ExtensionContext) {

From 649622bdcfa003269323f51270f92d5f9509c02b Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Sun, 7 Jun 2026 22:49:42 +0530
Subject: [PATCH 18/19] feat: complete Tailwind removal for editor + request
 bundles; add icon components

- Replace Tailwind utilities with semantic CSS classes across editor bundle
  (EnvironmentsTab, SettingsTab, AutocompleteInput) and request bundle
  (AuthTab, CookieTab, FormFieldEditor, HeaderTab, ParamsTab, RequestEditor,
  ResponsePanel); all remaining title="" attributes migrated to <Tooltip>
- Expand request/styles.css and editor/styles.css with explicit class rules
  replacing the previously inlined Tailwind utilities
- Add CollectionAddIcon and FolderImportIcon SVG components; integrate into
  Sidebar and ImportDropdown to replace generic icons
- Finalize sidebar.css and FolderActionsDropdown styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ...026-06-05-fluid-layout-tailwind-removal.md | 2373 +++++++++++++++++
 .../plans/2026-06-07-first-launch-seed.md     |  230 ++
 src/webview/components/AutocompleteInput.tsx  |   67 +-
 .../components/icons/CollectionAddIcon.tsx    |   31 +
 .../components/icons/FolderImportIcon.tsx     |   20 +
 .../components/icons/add-collection.svg       |   19 +
 src/webview/editor/EnvironmentsTab.tsx        |   75 +-
 src/webview/editor/SettingsTab.tsx            |   94 +-
 src/webview/editor/styles.css                 |  165 +-
 src/webview/request/AuthTab.tsx               |   35 +-
 src/webview/request/CookieTab.tsx             |   16 +-
 src/webview/request/FormFieldEditor.tsx       |   36 +-
 src/webview/request/HeaderTab.tsx             |   16 +-
 src/webview/request/ParamsTab.tsx             |   16 +-
 src/webview/request/RequestEditor.tsx         |   16 +-
 src/webview/request/ResponsePanel.tsx         |   29 +-
 src/webview/request/styles.css                |  243 +-
 src/webview/sidebar/FolderActionsDropdown.tsx |   15 +-
 src/webview/sidebar/ImportDropdown.tsx        |   18 +-
 src/webview/sidebar/Sidebar.tsx               |    4 +-
 src/webview/sidebar/sidebar.css               |    8 +-
 21 files changed, 3192 insertions(+), 334 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-06-05-fluid-layout-tailwind-removal.md
 create mode 100644 docs/superpowers/plans/2026-06-07-first-launch-seed.md
 create mode 100644 src/webview/components/icons/CollectionAddIcon.tsx
 create mode 100644 src/webview/components/icons/FolderImportIcon.tsx
 create mode 100644 src/webview/components/icons/add-collection.svg

diff --git a/docs/superpowers/plans/2026-06-05-fluid-layout-tailwind-removal.md b/docs/superpowers/plans/2026-06-05-fluid-layout-tailwind-removal.md
new file mode 100644
index 0000000..04d78f1
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-05-fluid-layout-tailwind-removal.md
@@ -0,0 +1,2373 @@
+# Fluid Layout Fix + Sidebar Tailwind Removal Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace fixed-px sizing in the request editor with em-based fluid tokens, and remove Tailwind from the sidebar entirely, replacing it with a custom `sidebar.css`.
+
+**Architecture:** Two independent tracks — Track A patches `styles.css` and adds one React hook; Track B creates `sidebar.css` and updates six sidebar files. Both tracks land on the same branch. The two tracks do not touch each other's files, so they can be executed in any order.
+
+**Tech Stack:** CSS custom properties, React + TypeScript, VS Code Webview. No test suite — verification is `npx tsc --noEmit` after every TypeScript change.
+
+---
+
+## Track A — Request Editor Fluid Fix
+
+### Task 1: Add `--rl-*` tokens and fluid request bar to `styles.css`
+
+**Files:**
+- Modify: `src/webview/request/styles.css`
+
+- [ ] **Step 1: Add fluid spacing tokens to `:root`**
+
+In `src/webview/request/styles.css`, find the `:root` block (starts at line 3). Add these variables at the end of the block, before the closing `}`:
+
+```css
+  /* Fluid spacing tokens — all em, scale with --vscode-font-size */
+  --rl-sp1: 0.30em;
+  --rl-sp2: 0.46em;
+  --rl-sp3: 0.62em;
+  --rl-sp4: 0.92em;
+  --rl-sp5: 1.23em;
+  --rl-ctrl: 2.35em;
+  --rl-icon: 1.25em;
+  --rl-r1: 0.35em;
+  --rl-r2: 0.50em;
+  --rl-r3: 0.65em;
+```
+
+- [ ] **Step 2: Update `.request-editor` side padding**
+
+Find and replace:
+
+```css
+/* OLD */
+.request-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* max-width: 1200px; */
+  margin: 0 auto;
+  padding: 0 24px;
+  position: relative;
+  overflow: hidden;
+}
+```
+
+```css
+/* NEW */
+.request-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* max-width: 1200px; */
+  margin: 0 auto;
+  padding: 0 var(--rl-sp5);
+  position: relative;
+  overflow: hidden;
+}
+```
+
+- [ ] **Step 3: Update `.request-bar`**
+
+Find and replace:
+
+```css
+/* OLD */
+.request-bar {
+  display: flex;
+  gap: 6px;
+  padding: 4px 0;
+  align-items: center;
+}
+```
+
+```css
+/* NEW */
+.request-bar {
+  display: flex;
+  gap: var(--rl-sp3);
+  padding: var(--rl-sp4) 0 var(--rl-sp3);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.request-bar > * { min-height: var(--rl-ctrl); }
+```
+
+- [ ] **Step 4: Update `.method-select` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.method-select {
+  padding: 5px 10px;
+  border: 2px solid var(--glass-border);
+  border-radius: 7px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  min-width: 96px;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+```
+
+```css
+/* NEW */
+.method-select {
+  height: var(--rl-ctrl);
+  padding: 0 0.7em;
+  border: 2px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 0.92em;
+  font-weight: 700;
+  cursor: pointer;
+  min-width: 6.2em;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+```
+
+- [ ] **Step 5: Update `.url-input` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.url-input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 12px;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
+  font-size: 13px;
+  transition: all 0.2s ease;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+```
+
+```css
+/* NEW */
+.url-input {
+  flex: 1 1 16em;
+  min-width: 0;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
+  font-size: 0.92em;
+  transition: all 0.2s ease;
+}
+```
+
+- [ ] **Step 6: Update `.send-btn` sizing**
+
+Find and replace only the sizing/spacing properties in `.send-btn`. The rule currently starts with `display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: none; border-radius: 7px; ... font-size: 13px;`. Replace those lines:
+
+```css
+/* OLD (top of .send-btn) */
+.send-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 7px;
+  background: var(--restlab-gradient);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px var(--restlab-accent-glow);
+  position: relative;
+  overflow: hidden;
+}
+```
+
+```css
+/* NEW */
+.send-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: none;
+  border-radius: var(--rl-r3);
+  background: var(--restlab-gradient);
+  color: #ffffff;
+  font-size: 0.92em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px var(--restlab-accent-glow);
+  position: relative;
+  overflow: hidden;
+}
+.send-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
+```
+
+- [ ] **Step 7: Update `.save-btn` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.save-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+}
+```
+
+```css
+/* NEW */
+.save-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  font-size: 0.92em;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+}
+.save-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
+```
+
+- [ ] **Step 8: Update `.request-more-btn` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.request-more-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+  flex-shrink: 0;
+}
+```
+
+```css
+/* NEW */
+.request-more-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+  flex-shrink: 0;
+}
+```
+
+- [ ] **Step 9: Update `.layout-toggle-btn` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.layout-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+}
+```
+
+```css
+/* NEW */
+.layout-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+}
+```
+
+- [ ] **Step 10: Update `.request-env-select` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.request-env-select {
+  padding: 6px 8px;
+  border: 1px solid var(--glass-border);
+  border-radius: 7px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-descriptionForeground);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    color 0.15s;
+  max-width: 130px;
+  flex-shrink: 0;
+}
+```
+
+```css
+/* NEW */
+.request-env-select {
+  height: var(--rl-ctrl);
+  padding: 0 0.6em;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background: var(--vscode-input-background);
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.82em;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    color 0.15s;
+  max-width: 9em;
+  flex-shrink: 0;
+}
+```
+
+- [ ] **Step 11: Update `.base-url-hint` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.base-url-hint {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+  padding-bottom: 6px;
+}
+```
+
+```css
+/* NEW */
+.base-url-hint {
+  font-size: 0.92em;
+  color: var(--vscode-descriptionForeground);
+  padding-bottom: var(--rl-sp3);
+}
+```
+
+- [ ] **Step 12: Commit**
+
+```bash
+git add src/webview/request/styles.css
+git commit -m "feat: add --rl-* fluid tokens and update request bar controls"
+```
+
+---
+
+### Task 2: Fluid tabs in `styles.css`
+
+**Files:**
+- Modify: `src/webview/request/styles.css`
+
+- [ ] **Step 1: Replace `.tabs` block with tabstrip-wrap + scrollable tabs**
+
+Find and replace:
+
+```css
+/* OLD */
+.tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--glass-border);
+  margin-bottom: 16px;
+  position: relative;
+}
+```
+
+```css
+/* NEW */
+.tabstrip-wrap {
+  position: relative;
+  border-bottom: 1px solid var(--glass-border);
+  margin-bottom: var(--rl-sp5);
+}
+.tabstrip-wrap::before,
+.tabstrip-wrap::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1.6em;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.tabstrip-wrap::before {
+  left: 0;
+  background: linear-gradient(90deg, var(--vscode-editor-background), transparent);
+}
+.tabstrip-wrap::after {
+  right: 0;
+  background: linear-gradient(270deg, var(--vscode-editor-background), transparent);
+}
+.tabstrip-wrap.scroll-start::after { opacity: 1; }
+.tabstrip-wrap.scroll-mid::before,
+.tabstrip-wrap.scroll-mid::after { opacity: 1; }
+.tabstrip-wrap.scroll-end::before { opacity: 1; }
+
+.tabs {
+  display: flex;
+  gap: var(--rl-sp1);
+  overflow-x: auto;
+  scrollbar-width: none;
+  position: relative;
+}
+.tabs::-webkit-scrollbar { height: 0; }
+```
+
+- [ ] **Step 2: Update `.tab` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 18px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+```
+
+```css
+/* NEW */
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  padding: var(--rl-sp3) var(--rl-sp4);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.92em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+```
+
+- [ ] **Step 3: Update `.badge` sizing**
+
+Find and replace:
+
+```css
+/* OLD */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 700;
+  background: var(--restlab-gradient);
+  color: #ffffff;
+  border-radius: 9px;
+}
+```
+
+```css
+/* NEW */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.4em;
+  height: 1.4em;
+  padding: 0 0.42em;
+  font-size: 0.72em;
+  font-weight: 700;
+  background: var(--restlab-gradient);
+  color: #ffffff;
+  border-radius: 0.8em;
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/webview/request/styles.css
+git commit -m "feat: fluid tab strip with scroll + fade edges"
+```
+
+---
+
+### Task 3: Fluid response section and key-value rows in `styles.css`
+
+**Files:**
+- Modify: `src/webview/request/styles.css`
+
+- [ ] **Step 1: Update `.response-section` padding**
+
+Find `padding: 16px;` inside `.response-section` and replace that line:
+
+```css
+/* OLD line inside .response-section */
+  padding: 16px;
+```
+
+```css
+/* NEW */
+  padding: var(--rl-sp5);
+```
+
+- [ ] **Step 2: Update `.response-header`**
+
+Find and replace:
+
+```css
+/* OLD */
+.response-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+```
+
+```css
+/* NEW */
+.response-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--rl-sp5);
+  flex-wrap: wrap;
+  gap: var(--rl-sp3);
+}
+```
+
+- [ ] **Step 3: Update `.response-meta`**
+
+Find and replace:
+
+```css
+/* OLD */
+.response-meta {
+  display: flex;
+  gap: 8px;
+}
+```
+
+```css
+/* NEW */
+.response-meta {
+  display: flex;
+  gap: var(--rl-sp2);
+  flex-wrap: wrap;
+}
+```
+
+- [ ] **Step 4: Update `.response-toolbar`**
+
+Find and replace:
+
+```css
+/* OLD */
+.response-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+```
+
+```css
+/* NEW */
+.response-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--rl-sp4);
+  flex-wrap: wrap;
+  gap: var(--rl-sp3);
+}
+```
+
+- [ ] **Step 5: Update `.response-actions .action-btn`**
+
+Find and replace:
+
+```css
+/* OLD */
+.response-actions .action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border: 1px solid var(--glass-border);
+  border-radius: 6px;
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 1;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+
+```css
+/* NEW */
+.response-actions .action-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r2);
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  font-size: 0.8em;
+  font-weight: 500;
+  cursor: pointer;
+  opacity: 1;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+
+- [ ] **Step 6: Update status/time/size badges**
+
+Find and replace `.status-badge`:
+
+```css
+/* OLD */
+.status-badge {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+```
+
+```css
+/* NEW */
+.status-badge {
+  padding: 0.35em 0.8em;
+  border-radius: 1.4em;
+  font-size: 0.76em;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+```
+
+Find and replace `.time-badge`:
+
+```css
+/* OLD */
+.time-badge {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  border: 1px solid var(--glass-border);
+}
+```
+
+```css
+/* NEW */
+.time-badge {
+  padding: 0.35em 0.8em;
+  border-radius: 1.4em;
+  font-size: 0.76em;
+  font-weight: 600;
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  border: 1px solid var(--glass-border);
+}
+```
+
+Find and replace `.size-badge`:
+
+```css
+/* OLD */
+.size-badge {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  background: linear-gradient(
+    90deg,
+    rgba(99, 102, 241, 0.1) 0%,
+    rgba(168, 85, 247, 0.1) 100%
+  );
+  color: #a855f7;
+  border: 1px solid rgba(168, 85, 247, 0.3);
+}
+```
+
+```css
+/* NEW */
+.size-badge {
+  padding: 0.35em 0.8em;
+  border-radius: 1.4em;
+  font-size: 0.76em;
+  font-weight: 600;
+  background: linear-gradient(
+    90deg,
+    rgba(99, 102, 241, 0.1) 0%,
+    rgba(168, 85, 247, 0.1) 100%
+  );
+  color: #a855f7;
+  border: 1px solid rgba(168, 85, 247, 0.3);
+}
+```
+
+- [ ] **Step 7: Update `.response-header-row .header-name` min-width**
+
+Find and replace:
+
+```css
+/* OLD */
+.response-header-row .header-name {
+  font-weight: 700;
+  min-width: 200px;
+```
+
+```css
+/* NEW */
+.response-header-row .header-name {
+  font-weight: 700;
+  min-width: 11em;
+```
+
+- [ ] **Step 8: Update key-value input fields**
+
+Find and replace `.header-key, .header-value`:
+
+```css
+/* OLD */
+.header-key,
+.header-value {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 13px;
+}
+```
+
+```css
+/* NEW */
+.header-key,
+.header-value {
+  flex: 1;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: var(--rl-r2);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 0.9em;
+}
+```
+
+Find and replace `.header-row`:
+
+```css
+/* OLD */
+.header-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+```
+
+```css
+/* NEW */
+.header-row {
+  display: flex;
+  gap: var(--rl-sp3);
+  align-items: center;
+  margin-bottom: var(--rl-sp2);
+}
+```
+
+Find and replace `.remove-btn`:
+
+```css
+/* OLD */
+.remove-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+```
+
+```css
+/* NEW */
+.remove-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
+  border: none;
+  border-radius: var(--rl-r2);
+  background: transparent;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+```
+
+Find and replace `.content-type-select`:
+
+```css
+/* OLD */
+.content-type-select {
+  flex: 1;
+  max-width: 350px;
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+```
+
+```css
+/* NEW */
+.content-type-select {
+  flex: 1;
+  max-width: 350px;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: var(--rl-r2);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+```
+
+Find and replace `.form-data-key, .form-data-value`:
+
+```css
+/* OLD */
+.form-data-key,
+.form-data-value {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 13px;
+}
+```
+
+```css
+/* NEW */
+.form-data-key,
+.form-data-value {
+  flex: 1;
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: var(--rl-r2);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 0.9em;
+}
+```
+
+Find and replace `.form-data-row`:
+
+```css
+/* OLD */
+.form-data-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+```
+
+```css
+/* NEW */
+.form-data-row {
+  display: flex;
+  gap: var(--rl-sp3);
+  align-items: center;
+}
+```
+
+Find and replace `.type-toggle`:
+
+```css
+/* OLD */
+.type-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+```
+
+```css
+/* NEW */
+.type-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: var(--rl-r2);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+```
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add src/webview/request/styles.css
+git commit -m "feat: fluid response section and key-value rows"
+```
+
+---
+
+### Task 4: Delete redundant `@media` font-shrink overrides
+
+**Files:**
+- Modify: `src/webview/request/styles.css`
+
+- [ ] **Step 1: Delete the entire `@media (max-width: 700px)` block**
+
+Find and delete this entire block (from `@media (max-width: 700px) {` to its closing `}`):
+
+```css
+/* DELETE THIS ENTIRE BLOCK */
+@media (max-width: 700px) {
+  .request-editor {
+    padding: 0 16px;
+  }
+
+  .request-bar {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .method-select {
+    min-width: 90px;
+    padding: 10px 10px;
+    font-size: 12px;
+  }
+
+  .url-input {
+    flex: 1 1 100%;
+    order: -1;
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+
+  .send-btn,
+  .save-btn {
+    padding: 10px 12px;
+    font-size: 12px;
+  }
+
+  .send-btn .btn-text,
+  .save-btn .btn-text,
+  .beautify-btn .btn-text {
+    display: none;
+  }
+
+  .send-btn,
+  .save-btn,
+  .beautify-btn {
+    gap: 0;
+  }
+}
+```
+
+- [ ] **Step 2: Trim the `@media (max-width: 500px)` block to only the vertical split reflow**
+
+Find the entire `@media (max-width: 500px)` block and replace it with only the vertical-split rules:
+
+```css
+/* DELETE everything in this block EXCEPT the vertical split rules below */
+/* The entire old block starts at @media (max-width: 500px) { ... } */
+```
+
+The replacement (keep only this):
+
+```css
+@media (max-width: 500px) {
+  /* Force horizontal layout on very small screens */
+  .split-container.vertical {
+    flex-direction: column;
+  }
+
+  .split-container.vertical .request-panel,
+  .split-container.vertical .response-panel {
+    width: auto !important;
+    min-width: auto;
+  }
+
+  .split-container.vertical .resize-handle {
+    width: auto;
+    height: 12px;
+    cursor: row-resize;
+    margin: 4px 0;
+  }
+
+  .split-container.vertical .resize-handle::before {
+    top: 50%;
+    bottom: auto;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: 1px;
+  }
+
+  .split-container.vertical .resize-handle-bar {
+    width: 48px;
+    height: 4px;
+  }
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/webview/request/styles.css
+git commit -m "chore: remove px font-shrink media overrides (fluid sizing replaces them)"
+```
+
+---
+
+### Task 5: Add tab scroll hook to `RequestEditor.tsx`
+
+**Files:**
+- Modify: `src/webview/request/RequestEditor.tsx`
+
+- [ ] **Step 1: Add `useEffect` to the React import**
+
+Find and replace the first line of the file:
+
+```tsx
+/* OLD */
+import React, { useRef, useState } from "react";
+```
+
+```tsx
+/* NEW */
+import React, { useEffect, useRef, useState } from "react";
+```
+
+- [ ] **Step 2: Add scroll state and handler after `moreRef`**
+
+In `RequestEditorContent`, find this block:
+
+```tsx
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement>(null);
+```
+
+Replace with:
+
+```tsx
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement>(null);
+  const stripRef = useRef<HTMLDivElement>(null);
+  const [edge, setEdge] = useState("");
+
+  const onScroll = () => {
+    const el = stripRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    if (max < 2) return setEdge("");
+    if (el.scrollLeft < 4) setEdge("scroll-start");
+    else if (el.scrollLeft > max - 4) setEdge("scroll-end");
+    else setEdge("scroll-mid");
+  };
+
+  useEffect(onScroll, [config.method]);
+```
+
+- [ ] **Step 3: Wrap the tabs div with `tabstrip-wrap`**
+
+Find:
+
+```tsx
+            <div className="tabs">
+              {METHODS_WITH_BODY.includes(config.method) && (
+```
+
+Replace with:
+
+```tsx
+            <div className={`tabstrip-wrap ${edge}`}>
+            <div className="tabs" ref={stripRef} onScroll={onScroll}>
+              {METHODS_WITH_BODY.includes(config.method) && (
+```
+
+Then find the closing tag of the `tabs` div (just before `</div>` that closes `request-content`):
+
+```tsx
+            </div>
+
+            <div className="tab-content">
+```
+
+Replace with:
+
+```tsx
+            </div>
+            </div>
+
+            <div className="tab-content">
+```
+
+- [ ] **Step 4: Type-check**
+
+Run:
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: no errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/webview/request/RequestEditor.tsx
+git commit -m "feat: tab strip scroll hook with fade-edge indicators"
+```
+
+---
+
+## Track B — Sidebar Tailwind Removal
+
+### Task 6: Create `sidebar.css`
+
+**Files:**
+- Create: `src/webview/sidebar/sidebar.css`
+
+- [ ] **Step 1: Create the file with the full CSS**
+
+Create `src/webview/sidebar/sidebar.css` with this content:
+
+```css
+/* ============================================================
+   REST-Lab Sidebar — Custom CSS (replaces Tailwind)
+   All sizing in em relative to body { font-size: var(--vscode-font-size) }
+   ============================================================ */
+
+/* ---- Reset ---- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ---- Base ---- */
+body {
+  font-family: var(
+    --vscode-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif
+  );
+  font-size: var(--vscode-font-size, 13px);
+  color: var(--vscode-foreground);
+  background-color: var(--vscode-sideBar-background);
+  line-height: 1.45;
+}
+
+/* ---- Brand & VS Code tokens ---- */
+:root {
+  --restlab-gradient: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
+  --restlab-gradient-hover: linear-gradient(90deg, #0ea5e9 0%, #4f46e5 100%);
+  --restlab-accent: #38bdf8;
+  --restlab-accent-hover: #0ea5e9;
+  --restlab-accent-subtle: rgba(56, 189, 248, 0.1);
+  --restlab-accent-glow: rgba(56, 189, 248, 0.4);
+  --restlab-danger: #ef4444;
+  --restlab-danger-subtle: rgba(239, 68, 68, 0.1);
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  /* Method colors */
+  --method-get: #22c55e;
+  --method-post: #3b82f6;
+  --method-put: #f59e0b;
+  --method-patch: #a855f7;
+  --method-delete: #ef4444;
+  /* Fluid spacing tokens */
+  --rl-sp1: 0.30em;
+  --rl-sp2: 0.46em;
+  --rl-sp3: 0.62em;
+  --rl-sp4: 0.92em;
+  --rl-sp5: 1.23em;
+  --rl-ctrl: 2.35em;
+  --rl-icon: 1.25em;
+  --rl-r1: 0.35em;
+  --rl-r2: 0.50em;
+  --rl-r3: 0.65em;
+  --rl-tap: 2.1em;
+}
+
+/* ============================================================
+   SIDEBAR SHELL
+   ============================================================ */
+.sb {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ---- Header ---- */
+.sb-head {
+  padding: var(--rl-sp4);
+  border-bottom: 1px solid var(--glass-border);
+  background: linear-gradient(180deg, rgba(56, 189, 248, 0.05), transparent);
+  position: relative;
+  flex-shrink: 0;
+}
+.sb-head::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: var(--rl-sp4);
+  right: var(--rl-sp4);
+  height: 1px;
+  background: var(--restlab-gradient);
+  opacity: 0.3;
+}
+
+.sb-title {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  font-size: 0.86em;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  background: var(--restlab-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: var(--rl-sp4);
+}
+.sb-title::before {
+  content: "";
+  display: inline-block;
+  width: 0.62em;
+  height: 0.62em;
+  flex-shrink: 0;
+  border-radius: 2px;
+  background: var(--restlab-gradient);
+  box-shadow: 0 0 8px var(--restlab-accent-glow);
+  /* Reset gradient-text clip so the dot renders as a solid box */
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  -webkit-text-fill-color: unset;
+}
+
+.sb-head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+}
+
+/* ---- Tree ---- */
+.sb-tree {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--rl-sp3) var(--rl-sp2);
+}
+.sb-tree::-webkit-scrollbar { width: 0.54em; }
+.sb-tree::-webkit-scrollbar-track { background: transparent; }
+.sb-tree::-webkit-scrollbar-thumb {
+  background: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.35));
+  border-radius: 0.27em;
+}
+.sb-tree::-webkit-scrollbar-thumb:hover {
+  background: var(--vscode-scrollbarSlider-hoverBackground, rgba(121, 121, 121, 0.55));
+}
+
+/* ============================================================
+   FOLDER ROW
+   ============================================================ */
+.folder-item { margin-bottom: 2px; }
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp3);
+  padding: var(--rl-sp3);
+  margin-bottom: var(--rl-sp1);
+  cursor: pointer;
+  border-radius: var(--rl-r2);
+  border: 1px solid transparent;
+  position: relative;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.tree-row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  border-radius: 0 2px 2px 0;
+  background: var(--restlab-gradient);
+  transition: height 0.2s ease;
+}
+.tree-row:hover,
+.tree-row:focus-visible {
+  background: var(--glass-bg);
+  border-color: var(--glass-border);
+  outline: none;
+}
+.tree-row:hover::before,
+.tree-row:focus-visible::before { height: 60%; }
+.tree-row:focus-visible {
+  border-color: var(--restlab-accent);
+  background: var(--restlab-accent-subtle);
+}
+
+.tree-icon {
+  flex-shrink: 0;
+  width: var(--rl-icon);
+  height: var(--rl-icon);
+  color: var(--vscode-descriptionForeground);
+  transition: color 0.15s ease;
+  display: block;
+}
+.tree-row:hover .tree-icon { color: var(--restlab-accent); }
+
+.tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.95em;
+  font-weight: 600;
+}
+
+.tree-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp1);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* ---- Tree children connector ---- */
+.tree-children {
+  position: relative;
+}
+.tree-children::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--rl-sp4) + 0.3em);
+  top: 0;
+  bottom: var(--rl-sp3);
+  width: 1px;
+  background: linear-gradient(var(--glass-border), transparent);
+}
+
+/* ============================================================
+   REQUEST ROW
+   ============================================================ */
+.req-zone { /* container only — layout handled by inline paddingLeft */ }
+
+.req-row {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp2);
+  padding: var(--rl-sp2) var(--rl-sp3);
+  margin-bottom: 1px;
+  margin-left: 0.6em;
+  cursor: pointer;
+  border-radius: var(--rl-r2);
+  border: 1px solid transparent;
+  position: relative;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+.req-row::before {
+  content: "";
+  position: absolute;
+  left: -0.6em;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  border-radius: 0 2px 2px 0;
+  background: var(--restlab-gradient);
+  transition: height 0.2s ease;
+}
+.req-row:hover { background: var(--glass-bg); border-color: var(--glass-border); }
+.req-row:hover::before { height: 55%; }
+.req-row.active {
+  background: rgba(56, 189, 248, 0.15);
+  border-color: rgba(56, 189, 248, 0.3);
+}
+.req-row.active::before { height: 55%; }
+
+.req-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.88em;
+}
+
+/* ============================================================
+   EMPTY STATES
+   ============================================================ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3em 1.5em;
+  text-align: center;
+  gap: var(--rl-sp3);
+}
+.empty-state svg {
+  width: 3.2em;
+  height: 3.2em;
+  color: var(--restlab-accent);
+  opacity: 0.5;
+  margin-bottom: var(--rl-sp2);
+}
+.empty-state-title {
+  font-size: 0.95em;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  margin-bottom: var(--rl-sp1);
+}
+.empty-state-hint {
+  font-size: 0.82em;
+  color: var(--vscode-descriptionForeground);
+  opacity: 0.8;
+  line-height: 1.5;
+  max-width: 18em;
+}
+
+.req-empty-hint {
+  padding: var(--rl-sp2) var(--rl-sp3);
+  font-size: 0.82em;
+  color: var(--vscode-descriptionForeground);
+  opacity: 0.7;
+  font-style: italic;
+}
+
+/* ============================================================
+   METHOD BADGE
+   ============================================================ */
+.method-badge {
+  flex-shrink: 0;
+  font-size: 0.62em;
+  font-weight: 800;
+  padding: 0.32em 0.55em;
+  border-radius: 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border: 1px solid transparent;
+  line-height: 1;
+  min-width: 3.6em;
+  text-align: center;
+}
+.method-get {
+  color: var(--method-get);
+  background: rgba(34, 197, 94, 0.14);
+  border-color: rgba(34, 197, 94, 0.32);
+}
+.method-post {
+  color: var(--method-post);
+  background: rgba(59, 130, 246, 0.14);
+  border-color: rgba(59, 130, 246, 0.32);
+}
+.method-put {
+  color: var(--method-put);
+  background: rgba(245, 158, 11, 0.14);
+  border-color: rgba(245, 158, 11, 0.32);
+}
+.method-patch {
+  color: var(--method-patch);
+  background: rgba(168, 85, 247, 0.14);
+  border-color: rgba(168, 85, 247, 0.32);
+}
+.method-delete {
+  color: var(--method-delete);
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.32);
+}
+
+/* ============================================================
+   BUTTONS
+   ============================================================ */
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rl-sp3);
+  flex: 1;
+  min-height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp4);
+  border: none;
+  border-radius: var(--rl-r3);
+  background: var(--restlab-gradient);
+  color: #ffffff;
+  font: inherit;
+  font-size: 0.92em;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 2px 8px var(--restlab-accent-glow);
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.btn-primary::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+.btn-primary:hover::before { left: 100%; }
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--restlab-accent-glow); }
+.btn-primary:active { transform: translateY(0); }
+.btn-primary:focus { outline: 2px solid var(--restlab-accent); outline-offset: 2px; }
+.btn-primary svg { flex-shrink: 0; width: var(--rl-icon); height: var(--rl-icon); }
+
+.header-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-ctrl);
+  height: var(--rl-ctrl);
+  flex-shrink: 0;
+  padding: 0;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background: var(--glass-bg);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.header-action-btn:hover {
+  background: var(--restlab-accent-subtle);
+  border-color: var(--restlab-accent);
+  color: var(--restlab-accent);
+}
+.header-action-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-tap);
+  height: var(--rl-tap);
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--rl-r1);
+  background: transparent;
+  color: var(--vscode-icon-foreground, var(--vscode-foreground));
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+.tree-row:hover .action-btn,
+.req-row:hover .action-btn { opacity: 0.6; }
+.action-btn:hover { opacity: 1 !important; background: var(--restlab-accent-subtle); color: var(--restlab-accent); }
+.action-btn svg { width: var(--rl-icon); height: var(--rl-icon); display: block; }
+
+/* ---- Chevron rotation utility ---- */
+.rotate-90 { transform: rotate(90deg); transition: transform 0.2s ease; }
+
+/* ============================================================
+   DROPDOWN
+   ============================================================ */
+.dropdown-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 180px;
+  background: var(--vscode-dropdown-background, #3c3c3c);
+  border: 1px solid var(--vscode-dropdown-border, #454545);
+  border-radius: var(--rl-r3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  overflow: hidden;
+  animation: sbFadeIn 0.15s ease-out;
+}
+
+.dropdown-header {
+  padding: var(--rl-sp3) var(--rl-sp4);
+  font-size: 0.84em;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground, #858585);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--vscode-dropdown-border, #454545);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--rl-sp3);
+  width: 100%;
+  padding: var(--rl-sp3) var(--rl-sp4);
+  border: none;
+  background: transparent;
+  color: var(--vscode-dropdown-foreground, #cccccc);
+  font: inherit;
+  font-size: 0.92em;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s ease;
+}
+.dropdown-item:hover { background: var(--vscode-list-hoverBackground, #2a2d2e); }
+.dropdown-item:active { background: var(--vscode-list-activeSelectionBackground, #094771); }
+.dropdown-item.danger { color: var(--restlab-danger); }
+.dropdown-item.danger:hover { background: var(--restlab-danger-subtle); }
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--vscode-dropdown-border, #454545);
+  margin: 2px 0;
+}
+
+.dropdown-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rl-icon);
+  height: var(--rl-icon);
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+/* ============================================================
+   TOOLTIP
+   ============================================================ */
+.custom-tooltip {
+  padding: 4px 8px;
+  margin: 2px;
+  border-radius: var(--rl-r1);
+  font-size: 0.84em;
+  font-weight: 500;
+  white-space: nowrap;
+  pointer-events: none;
+  background: var(--vscode-editorWidget-background, #252526);
+  color: var(--vscode-editorWidget-foreground, #cccccc);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  z-index: 2147483647;
+  animation: sbTooltipFadeIn 0.15s ease-out;
+}
+.custom-tooltip.tooltip-top::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--vscode-editorWidget-background, #252526);
+}
+.custom-tooltip.tooltip-bottom::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-bottom-color: var(--vscode-editorWidget-background, #252526);
+}
+.custom-tooltip.tooltip-left::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-left-color: var(--vscode-editorWidget-background, #252526);
+}
+.custom-tooltip.tooltip-right::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 4px solid transparent;
+  border-right-color: var(--vscode-editorWidget-background, #252526);
+}
+
+/* ============================================================
+   ANIMATIONS
+   ============================================================ */
+@keyframes sbFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes sbTooltipFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/webview/sidebar/sidebar.css
+git commit -m "feat: create sidebar.css — custom CSS replacing Tailwind"
+```
+
+---
+
+### Task 7: Swap Tailwind import in `sidebar/index.tsx`
+
+**Files:**
+- Modify: `src/webview/sidebar/index.tsx`
+
+- [ ] **Step 1: Replace the import**
+
+Find and replace:
+
+```tsx
+/* OLD */
+import "../tailwind.css";
+```
+
+```tsx
+/* NEW */
+import "./sidebar.css";
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/webview/sidebar/index.tsx
+git commit -m "feat: sidebar bundle now uses sidebar.css instead of tailwind"
+```
+
+---
+
+### Task 8: Update `Sidebar.tsx` class names
+
+**Files:**
+- Modify: `src/webview/sidebar/Sidebar.tsx`
+
+- [ ] **Step 1: Update the `Sidebar` component root and header**
+
+Find and replace the entire `return` block inside `Sidebar`:
+
+```tsx
+/* OLD: Sidebar return — root and header */
+  return (
+    <div className="flex flex-col h-screen">
+      <div className="p-4 border-b border-glass bg-gradient-to-b from-sky-500/5 to-transparent relative after:content-[''] after:absolute after:-bottom-px after:left-4 after:right-4 after:h-px after:bg-restlab-gradient after:opacity-30">
+        <h2 className="flex items-center gap-2 text-[13px] font-bold uppercase tracking-widest text-gradient mb-4 before:content-[''] before:inline-block before:w-2 before:h-2 before:bg-restlab-gradient before:rounded-sm before:shadow-glow">
+          REST Lab
+        </h2>
+        <div className="flex items-center gap-2">
+```
+
+```tsx
+/* NEW */
+  return (
+    <div className="sb">
+      <div className="sb-head">
+        <h2 className="sb-title">
+          REST Lab
+        </h2>
+        <div className="sb-head-actions">
+```
+
+- [ ] **Step 2: Update the tree div**
+
+Find and replace:
+
+```tsx
+/* OLD */
+      <div
+        className={`flex-1 overflow-y-auto py-3 px-2 scrollbar-thin ${isDragging ? "root-drop-zone" : ""}`}
+```
+
+```tsx
+/* NEW */
+      <div
+        className={`sb-tree${isDragging ? " root-drop-zone" : ""}`}
+```
+
+- [ ] **Step 3: Update the empty state**
+
+Find and replace:
+
+```tsx
+/* OLD */
+          <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
+            <NoItemsIcon />
+            <p className="mb-1 text-vscode font-medium">No collections yet</p>
+            <p className="text-xs text-vscode-muted opacity-80">
+              Create your first collection to get started
+            </p>
+          </div>
+```
+
+```tsx
+/* NEW */
+          <div className="empty-state">
+            <NoItemsIcon />
+            <p className="empty-state-title">No collections yet</p>
+            <p className="empty-state-hint">
+              Create your first collection to get started
+            </p>
+          </div>
+```
+
+- [ ] **Step 4: Update `FolderItem` — folder wrapper and folder row**
+
+Find and replace in `FolderItem`:
+
+```tsx
+/* OLD */
+    <div key={folder.id} className="mb-0.5" data-folder-id={folder.id}>
+      <div
+        className={`group flex items-center gap-2.5 py-2.5 px-3 mb-1 cursor-pointer rounded-lg transition-all duration-200 border border-transparent hover:bg-glass hover:border-glass relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-0 before:bg-restlab-gradient before:rounded-r before:transition-all before:duration-200 hover:before:h-[60%] focus:outline-none focus:border-sky-400 focus:bg-sky-500/10 focus:before:h-[80%] ${isDropTarget ? "drop-target-active" : ""} ${isDragging ? "dragging-active" : ""}`}
+```
+
+```tsx
+/* NEW */
+    <div key={folder.id} className="folder-item" data-folder-id={folder.id}>
+      <div
+        className={`tree-row${isDropTarget ? " drop-target-active" : ""}${isDragging ? " dragging-active" : ""}`}
+```
+
+- [ ] **Step 5: Update folder row icons and label**
+
+Find and replace the ChevronIcon:
+
+```tsx
+/* OLD */
+        <ChevronIcon
+          className={expandedFolders.has(folder.id) ? "rotate-90" : ""}
+        />
+```
+
+```tsx
+/* NEW */
+        <ChevronIcon
+          className={`tree-icon${expandedFolders.has(folder.id) ? " rotate-90" : ""}`}
+        />
+```
+
+Find and replace both icon renders (CollectionIcon and FolderIcon):
+
+```tsx
+/* OLD */
+        {depth === 0 ? (
+          <CollectionIcon className="flex-shrink-0 text-vscode transition-colors duration-150 group-hover:text-sky-400 group-hover:drop-shadow-[0_0_4px_rgba(56,189,248,0.4)]" />
+        ) : (
+          <FolderIcon className="flex-shrink-0 text-vscode transition-colors duration-150 group-hover:text-sky-400 group-hover:drop-shadow-[0_0_4px_rgba(56,189,248,0.4)]" />
+        )}
+        <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[13px] font-medium">
+          {folder.name}
+        </span>
+        <div className="flex items-center gap-1 ml-auto">
+```
+
+```tsx
+/* NEW */
+        {depth === 0 ? (
+          <CollectionIcon className="tree-icon" />
+        ) : (
+          <FolderIcon className="tree-icon" />
+        )}
+        <span className="tree-label">
+          {folder.name}
+        </span>
+        <div className="tree-actions">
+```
+
+- [ ] **Step 6: Update children wrapper, request zone, and empty folder hint**
+
+Find and replace the children wrapper div:
+
+```tsx
+/* OLD */
+        <div className="relative before:content-[''] before:absolute before:left-5 before:top-0 before:bottom-2 before:w-px before:bg-gradient-to-b before:from-white/10 before:to-transparent">
+```
+
+```tsx
+/* NEW */
+        <div className="tree-children">
+```
+
+Find and replace the request zone div:
+
+```tsx
+/* OLD */
+            <div
+              className={`pl-5 ${isDropTarget ? "drop-zone-highlight" : ""}`}
+              style={{ paddingLeft: `${20 + depth * 16}px` }}
+```
+
+```tsx
+/* NEW */
+            <div
+              className={`req-zone${isDropTarget ? " drop-zone-highlight" : ""}`}
+              style={{ paddingLeft: `${20 + depth * 16}px` }}
+```
+
+Find and replace the empty folder hint:
+
+```tsx
+/* OLD */
+              <div
+                className={`py-2 px-3 text-xs text-vscode-muted opacity-70 italic ${isDropTarget ? "drop-hint-visible" : ""}`}
+              >
+```
+
+```tsx
+/* NEW */
+              <div
+                className={`req-empty-hint${isDropTarget ? " drop-hint-visible" : ""}`}
+              >
+```
+
+- [ ] **Step 7: Update request row and request label**
+
+Find and replace the request row div:
+
+```tsx
+/* OLD */
+                <div
+                  key={request.id}
+                  className={`group flex items-center gap-2 py-2 px-2.5 mb-0.5 cursor-pointer rounded-md transition-all duration-200 border ml-2.5 relative before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:rounded-sm before:transition-all before:duration-200 hover:bg-glass hover:border-glass hover:before:h-1/2 ${isDragging ? "dragging-active" : ""} ${
+                    request.id === activeRequestId
+                      ? "bg-sky-500/15 border-sky-500/30 before:h-1/2 before:bg-restlab-gradient"
+                      : "border-transparent before:h-0 before:bg-restlab-gradient"
+                  }`}
+```
+
+```tsx
+/* NEW */
+                <div
+                  key={request.id}
+                  className={`req-row${isDragging ? " dragging-active" : ""}${request.id === activeRequestId ? " active" : ""}`}
+```
+
+Find and replace the request label span:
+
+```tsx
+/* OLD */
+                  <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs">
+```
+
+```tsx
+/* NEW */
+                  <span className="req-label">
+```
+
+- [ ] **Step 8: Type-check**
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: no errors.
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add src/webview/sidebar/Sidebar.tsx
+git commit -m "feat: Sidebar.tsx — replace Tailwind utilities with semantic CSS classes"
+```
+
+---
+
+### Task 9: Update `FolderActionsDropdown.tsx`
+
+**Files:**
+- Modify: `src/webview/sidebar/FolderActionsDropdown.tsx`
+
+- [ ] **Step 1: Replace wrapper div class**
+
+Find and replace:
+
+```tsx
+/* OLD */
+    <div className="relative inline-flex" ref={dropdownRef}>
+```
+
+```tsx
+/* NEW */
+    <div className="dropdown-wrap" ref={dropdownRef}>
+```
+
+- [ ] **Step 2: Remove `min-w-[180px]` from dropdown menus**
+
+Find and replace both dropdown-menu divs (first the main menu, then the export sub-menu):
+
+```tsx
+/* OLD */
+        <div className="dropdown-menu min-w-[180px]">
+```
+
+```tsx
+/* NEW */
+        <div className="dropdown-menu">
+```
+
+(Apply to both occurrences in the file.)
+
+- [ ] **Step 3: Update delete button to `.danger`**
+
+Find and replace:
+
+```tsx
+/* OLD */
+          <button
+            className="dropdown-item text-red-500"
+            onClick={(e) => {
+              onDelete(e, folder.id);
+              setIsOpen(false);
+            }}
+          >
+```
+
+```tsx
+/* NEW */
+          <button
+            className="dropdown-item danger"
+            onClick={(e) => {
+              onDelete(e, folder.id);
+              setIsOpen(false);
+            }}
+          >
+```
+
+- [ ] **Step 4: Update export format icon wrappers**
+
+Find and replace the icon wrapper span inside the export format map:
+
+```tsx
+/* OLD */
+              <span className="flex items-center justify-center w-5 h-5 opacity-80">
+                {format.icon}
+              </span>
+```
+
+```tsx
+/* NEW */
+              <span className="dropdown-item-icon">
+                {format.icon}
+              </span>
+```
+
+- [ ] **Step 5: Type-check and commit**
+
+```bash
+npx tsc --noEmit
+git add src/webview/sidebar/FolderActionsDropdown.tsx
+git commit -m "feat: FolderActionsDropdown — remove Tailwind utility strings"
+```
+
+---
+
+### Task 10: Update `ImportDropdown.tsx` and `RequestActionsDropdown.tsx`
+
+**Files:**
+- Modify: `src/webview/sidebar/ImportDropdown.tsx`
+- Modify: `src/webview/sidebar/RequestActionsDropdown.tsx`
+
+- [ ] **Step 1: Update `ImportDropdown.tsx` wrapper**
+
+Find and replace:
+
+```tsx
+/* OLD */
+    <div className="relative" ref={dropdownRef}>
+```
+
+```tsx
+/* NEW */
+    <div className="dropdown-wrap" ref={dropdownRef}>
+```
+
+Update the provider icon wrapper inside the map:
+
+```tsx
+/* OLD */
+              <span className="flex items-center justify-center w-5 h-5 opacity-80">
+                {provider.icon}
+              </span>
+```
+
+```tsx
+/* NEW */
+              <span className="dropdown-item-icon">
+                {provider.icon}
+              </span>
+```
+
+- [ ] **Step 2: Update `RequestActionsDropdown.tsx` wrapper**
+
+Find and replace:
+
+```tsx
+/* OLD */
+    <div className="relative inline-flex" ref={dropdownRef}>
+```
+
+```tsx
+/* NEW */
+    <div className="dropdown-wrap" ref={dropdownRef}>
+```
+
+- [ ] **Step 3: Update `RequestActionsDropdown.tsx` action button**
+
+Find and replace:
+
+```tsx
+/* OLD */
+        <button
+          className="action-btn w-5 h-5 group-hover:opacity-60 hover:!opacity-100 hover:bg-slate-500/10 hover:text-slate-400"
+          onClick={handleClick}
+        >
+```
+
+```tsx
+/* NEW */
+        <button
+          className="action-btn"
+          onClick={handleClick}
+        >
+```
+
+- [ ] **Step 4: Update delete button to `.danger`**
+
+Find and replace:
+
+```tsx
+/* OLD */
+          <button
+            className="dropdown-item text-red-500"
+            onClick={(e) => {
+              onDelete(e, request.id, folderId);
+              setIsOpen(false);
+            }}
+          >
+```
+
+```tsx
+/* NEW */
+          <button
+            className="dropdown-item danger"
+            onClick={(e) => {
+              onDelete(e, request.id, folderId);
+              setIsOpen(false);
+            }}
+          >
+```
+
+- [ ] **Step 5: Also update `min-w-[160px]` from dropdown-menu**
+
+Find and replace in `RequestActionsDropdown.tsx`:
+
+```tsx
+/* OLD */
+        <div className="dropdown-menu min-w-[160px]">
+```
+
+```tsx
+/* NEW */
+        <div className="dropdown-menu">
+```
+
+- [ ] **Step 6: Type-check and commit**
+
+```bash
+npx tsc --noEmit
+git add src/webview/sidebar/ImportDropdown.tsx src/webview/sidebar/RequestActionsDropdown.tsx
+git commit -m "feat: ImportDropdown + RequestActionsDropdown — remove Tailwind utilities"
+```
+
+---
+
+### Task 11: Final type-check and verify
+
+**Files:** none
+
+- [ ] **Step 1: Full type-check**
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: zero errors.
+
+- [ ] **Step 2: Verify Track A — no Tailwind in request editor**
+
+The request editor (`src/webview/request/`) never imported Tailwind — confirm `styles.css` no longer has any bare `px` values in the rules touched by this plan:
+
+```bash
+grep -n "padding: [0-9]*px\|font-size: [0-9]*px\|width: [0-9]*px\|height: [0-9]*px\|gap: [0-9]*px\|min-width: [0-9]*px\|border-radius: [0-9]*px" src/webview/request/styles.css
+```
+
+Expected: the only `px` hits should be in `border: 1px`, `height: 1px`, `width: 1px`, and similar hairline/structural rules — **not** in control heights, paddings, or font-sizes.
+
+- [ ] **Step 3: Verify Track B — no Tailwind utilities in sidebar components**
+
+```bash
+grep -rn "className=.*py-\|className=.*px-\|className=.*gap-\|className=.*text-\[" src/webview/sidebar/
+```
+
+Expected: zero matches (all Tailwind utility strings removed).
+
+- [ ] **Step 4: Commit final state**
+
+```bash
+git add -A
+git commit -m "chore: verify fluid layout + sidebar Tailwind removal complete"
+```
diff --git a/docs/superpowers/plans/2026-06-07-first-launch-seed.md b/docs/superpowers/plans/2026-06-07-first-launch-seed.md
new file mode 100644
index 0000000..10a90db
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-07-first-launch-seed.md
@@ -0,0 +1,230 @@
+# First-Launch Seed Data Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Seed a ready-to-use JSONPlaceholder example collection on first extension activation so new users immediately understand the tool.
+
+**Architecture:** A single `seedDefaultData(context)` async function is added to `src/extension.ts` and called as the first line of `activate()`. It checks if `restlab.folders` is empty in globalState; if so, it writes the full folder tree, folder config (base URL, environments, shared header), six request configs, and pre-expanded folder state. `SidebarProvider` picks up the seeded data transparently since it reads `restlab.folders` in its constructor.
+
+**Tech Stack:** TypeScript (strict), VS Code extension API (`vscode.ExtensionContext.globalState`), existing type interfaces in `src/providers/SidebarProvider.ts` and `src/webview/types/internal.types.ts`.
+
+---
+
+### Task 1: Add `seedDefaultData` to `extension.ts`
+
+**Files:**
+- Modify: `src/extension.ts`
+
+The only file that changes. All seed data is defined inline in the function.
+
+**Type notes:**
+- `Folder` and `Request` are imported from `./providers/SidebarProvider` (already exported from there — they define the folder tree shape used by globalState).
+- `FolderConfig`, `RequestConfig`, `Environment`, `EnvVariable` are imported from `./webview/types/internal.types` — the webview-side `FolderConfig` includes `environments` and `activeEnvironmentId` which the extension-host-side one omits, but globalState must carry the full shape so the FolderEditor webview can read it.
+
+- [ ] **Step 1: Add new imports to `extension.ts`**
+
+Open `src/extension.ts`. The current import block is:
+
+```typescript
+import * as vscode from "vscode";
+import { SidebarProvider } from "./providers/SidebarProvider";
+import { FolderEditorProvider } from "./providers/FolderEditorProvider";
+import { RequestEditorProvider } from "./providers/RequestEditorProvider";
+```
+
+Replace with:
+
+```typescript
+import * as vscode from "vscode";
+import { Folder, Request, SidebarProvider } from "./providers/SidebarProvider";
+import { FolderEditorProvider } from "./providers/FolderEditorProvider";
+import { RequestEditorProvider } from "./providers/RequestEditorProvider";
+import {
+  FolderConfig,
+  RequestConfig,
+} from "./webview/types/internal.types";
+```
+
+- [ ] **Step 2: Add `seedDefaultData` function before `activate()`**
+
+Insert the following function immediately before the `export function activate(...)` line:
+
+```typescript
+async function seedDefaultData(
+  context: vscode.ExtensionContext,
+): Promise<void> {
+  const existing = context.globalState.get<Folder[]>("restlab.folders");
+  if (existing && existing.length > 0) return;
+
+  const COLLECTION_ID = "restlab-example-collection";
+  const POSTS_ID = "restlab-example-posts";
+  const USERS_ID = "restlab-example-users";
+  const REQ_GET_POSTS = "restlab-example-req-get-posts";
+  const REQ_GET_POST = "restlab-example-req-get-post";
+  const REQ_CREATE_POST = "restlab-example-req-create-post";
+  const REQ_DELETE_POST = "restlab-example-req-delete-post";
+  const REQ_GET_USERS = "restlab-example-req-get-users";
+  const REQ_GET_USER = "restlab-example-req-get-user";
+  const ENV_DEV_ID = "restlab-example-env-dev";
+  const ENV_PROD_ID = "restlab-example-env-prod";
+  const now = Date.now();
+
+  const folderTree: Folder[] = [
+    {
+      id: COLLECTION_ID,
+      name: "JSONPlaceholder",
+      createdAt: now,
+      requests: [],
+      subfolders: [
+        {
+          id: POSTS_ID,
+          name: "Posts",
+          createdAt: now,
+          parentId: COLLECTION_ID,
+          requests: [
+            { id: REQ_GET_POSTS, name: "Get all posts", folderId: POSTS_ID, method: "GET" } as Request,
+            { id: REQ_GET_POST, name: "Get post by ID", folderId: POSTS_ID, method: "GET" } as Request,
+            { id: REQ_CREATE_POST, name: "Create post", folderId: POSTS_ID, method: "POST" } as Request,
+            { id: REQ_DELETE_POST, name: "Delete post", folderId: POSTS_ID, method: "DELETE" } as Request,
+          ],
+          subfolders: [],
+        },
+        {
+          id: USERS_ID,
+          name: "Users",
+          createdAt: now,
+          parentId: COLLECTION_ID,
+          requests: [
+            { id: REQ_GET_USERS, name: "Get all users", folderId: USERS_ID, method: "GET" } as Request,
+            { id: REQ_GET_USER, name: "Get user by ID", folderId: USERS_ID, method: "GET" } as Request,
+          ],
+          subfolders: [],
+        },
+      ],
+    },
+  ];
+
+  const folderConfig: FolderConfig = {
+    baseUrl: "https://jsonplaceholder.typicode.com",
+    headers: [{ key: "Content-Type", value: "application/json", enabled: true }],
+    params: [],
+    environments: [
+      {
+        id: ENV_DEV_ID,
+        name: "Development",
+        variables: [
+          { key: "baseUrl", value: "https://jsonplaceholder.typicode.com", enabled: true },
+          { key: "userId", value: "1", enabled: true },
+        ],
+      },
+      {
+        id: ENV_PROD_ID,
+        name: "Production",
+        variables: [
+          { key: "baseUrl", value: "https://jsonplaceholder.typicode.com", enabled: true },
+          { key: "userId", value: "1", enabled: true },
+        ],
+      },
+    ],
+    activeEnvironmentId: ENV_DEV_ID,
+  };
+
+  const requests: RequestConfig[] = [
+    {
+      id: REQ_GET_POSTS,
+      name: "Get all posts",
+      folderId: POSTS_ID,
+      method: "GET",
+      url: "/posts",
+    },
+    {
+      id: REQ_GET_POST,
+      name: "Get post by ID",
+      folderId: POSTS_ID,
+      method: "GET",
+      url: "/posts/1",
+    },
+    {
+      id: REQ_CREATE_POST,
+      name: "Create post",
+      folderId: POSTS_ID,
+      method: "POST",
+      url: "/posts",
+      contentType: "application/json",
+      body: JSON.stringify({ title: "foo", body: "bar", userId: 1 }, null, 2),
+    },
+    {
+      id: REQ_DELETE_POST,
+      name: "Delete post",
+      folderId: POSTS_ID,
+      method: "DELETE",
+      url: "/posts/1",
+    },
+    {
+      id: REQ_GET_USERS,
+      name: "Get all users",
+      folderId: USERS_ID,
+      method: "GET",
+      url: "/users",
+    },
+    {
+      id: REQ_GET_USER,
+      name: "Get user by ID",
+      folderId: USERS_ID,
+      method: "GET",
+      url: "/users/1",
+    },
+  ];
+
+  await Promise.all([
+    context.globalState.update("restlab.folders", folderTree),
+    context.globalState.update(`restlab.folder.${COLLECTION_ID}`, folderConfig),
+    ...requests.map((r) =>
+      context.globalState.update(`restlab.request.${r.id}`, r),
+    ),
+    context.globalState.update("restlab.expandedFolders", [
+      COLLECTION_ID,
+      POSTS_ID,
+    ]),
+  ]);
+}
+```
+
+- [ ] **Step 3: Call `seedDefaultData` at the top of `activate()`**
+
+In `activate()`, find the first line:
+
+```typescript
+  console.log("REST Lab extension is now active!");
+```
+
+Add the seed call immediately after it:
+
+```typescript
+  console.log("REST Lab extension is now active!");
+  await seedDefaultData(context);
+```
+
+Also update the function signature to `async`:
+
+```typescript
+export async function activate(context: vscode.ExtensionContext) {
+```
+
+- [ ] **Step 4: Run type check**
+
+```bash
+npx tsc --noEmit
+```
+
+Expected: no errors. If you see errors, the most likely causes are:
+- `Request` not exported from `SidebarProvider.ts` — add `export` to the interface.
+- `FolderConfig.environments` type mismatch — `Environment` from `internal.types.ts` expects `{ id: string; name: string; variables: EnvVariable[] }` — verify the shape matches what you wrote.
+- `header.enabled` field — the `SidebarProvider.ts` `FolderConfig` uses `{ key, value }` without `enabled`, but `internal.types.ts` uses `Header = { key, value, enabled? }`. Since we import `FolderConfig` from `internal.types.ts`, `enabled` is valid.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/extension.ts
+git commit -m "feat: seed example JSONPlaceholder collection on first launch"
+```
diff --git a/src/webview/components/AutocompleteInput.tsx b/src/webview/components/AutocompleteInput.tsx
index b2b3534..5718b0b 100644
--- a/src/webview/components/AutocompleteInput.tsx
+++ b/src/webview/components/AutocompleteInput.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import { useAutoGrow } from "../helpers/useAutoGrow";
+
 const AutocompleteInput: React.FC<{
   value: string;
   onChange: (value: string) => void;
@@ -10,8 +12,10 @@ const AutocompleteInput: React.FC<{
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>([]);
   const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const suggestionsRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   useAutoGrow(inputRef, value);
 
   useEffect(() => {
@@ -41,6 +45,19 @@ const AutocompleteInput: React.FC<{
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  useEffect(() => {
+    if (showSuggestions && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownStyle({
+        position: "fixed",
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+        zIndex: 99999,
+      });
+    }
+  }, [showSuggestions]);
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !showSuggestions) {
       e.preventDefault();
@@ -64,8 +81,36 @@ const AutocompleteInput: React.FC<{
     }
   };
 
+  const dropdown =
+    showSuggestions && filteredSuggestions.length > 0
+      ? ReactDOM.createPortal(
+          <div
+            ref={suggestionsRef}
+            className="autocomplete-dropdown"
+            style={dropdownStyle}
+          >
+            {filteredSuggestions.map((suggestion, index) => (
+              <div
+                key={suggestion}
+                className={`autocomplete-item ${
+                  index === activeSuggestionIndex ? "active" : ""
+                }`}
+                onClick={() => {
+                  onChange(suggestion);
+                  setShowSuggestions(false);
+                }}
+                onMouseEnter={() => setActiveSuggestionIndex(index)}
+              >
+                {suggestion}
+              </div>
+            ))}
+          </div>,
+          document.body,
+        )
+      : null;
+
   return (
-    <div className="autocomplete-container">
+    <div ref={containerRef} className="autocomplete-container">
       <textarea
         ref={inputRef}
         rows={1}
@@ -77,25 +122,7 @@ const AutocompleteInput: React.FC<{
         className={`autogrow-textarea${className ? ` ${className}` : ""}`}
         autoComplete="off"
       />
-      {showSuggestions && filteredSuggestions.length > 0 && (
-        <div ref={suggestionsRef} className="autocomplete-dropdown">
-          {filteredSuggestions.map((suggestion, index) => (
-            <div
-              key={suggestion}
-              className={`autocomplete-item ${
-                index === activeSuggestionIndex ? "active" : ""
-              }`}
-              onClick={() => {
-                onChange(suggestion);
-                setShowSuggestions(false);
-              }}
-              onMouseEnter={() => setActiveSuggestionIndex(index)}
-            >
-              {suggestion}
-            </div>
-          ))}
-        </div>
-      )}
+      {dropdown}
     </div>
   );
 };
diff --git a/src/webview/components/icons/CollectionAddIcon.tsx b/src/webview/components/icons/CollectionAddIcon.tsx
new file mode 100644
index 0000000..8ee1905
--- /dev/null
+++ b/src/webview/components/icons/CollectionAddIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+type CollectionAddIconProps = {
+  className?: string;
+};
+
+// Rounded diamond stack with a circle-plus badge on the top face.
+// Diamond corners are at: Top(12,2) Left(2,7) Bottom(12,12) Right(22,7).
+// Each edge has length 5√5 ≈ 11.18; rounding radius 1.5 → offset ≈ (1.34, 0.67).
+const CollectionAddIcon = ({ className }: CollectionAddIconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linejoin="round"
+    stroke-linecap="round"
+    className={className}
+  >
+    <path d="M2.5 9.5 L8 11.5 L13.5 9.5" />
+    <path d="M2.5 12.5 L8 14.5 L13.5 12.5" />
+
+    <line x1="8" y1="1.5" x2="8" y2="7.5" />
+    <line x1="5" y1="4.5" x2="11" y2="4.5" />
+  </svg>
+);
+
+export default CollectionAddIcon;
diff --git a/src/webview/components/icons/FolderImportIcon.tsx b/src/webview/components/icons/FolderImportIcon.tsx
new file mode 100644
index 0000000..4435d9e
--- /dev/null
+++ b/src/webview/components/icons/FolderImportIcon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const FolderImportIcon: React.FC = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+    <line x1="12" y1="1" x2="12" y2="13" />
+    <polyline points="9 10 12 13 15 10" />
+  </svg>
+);
+
+export default FolderImportIcon;
diff --git a/src/webview/components/icons/add-collection.svg b/src/webview/components/icons/add-collection.svg
new file mode 100644
index 0000000..bd0841b
--- /dev/null
+++ b/src/webview/components/icons/add-collection.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24" fill="none" stroke="#2F3542" stroke-width="1" stroke-linejoin="miter" stroke-linecap="butt">
+  <defs>
+    <!-- Clip = whole canvas MINUS a circle behind the badge (even-odd hole) -->
+    <clipPath id="badgeCut" clipPathUnits="userSpaceOnUse">
+      <path d="M0 0 H24 V24 H0 Z M6.3 11 a5.7 5.7 0 1 0 11.4 0 a5.7 5.7 0 1 0 -11.4 0 Z" clip-rule="evenodd"/>
+    </clipPath>
+  </defs>
+  <!-- Three sharp-corner parallelograms (open plates); clipped so nothing draws behind the badge -->
+  <g clip-path="url(#badgeCut)">
+    <path d="M4 5.8 L12 3.5 L20 5.8 L12 8.1 Z"/>
+    <path d="M4 11 L12 8.7 L20 11 L12 13.3 Z"/>
+    <path d="M4 16.2 L12 13.9 L20 16.2 L12 18.5 Z"/>
+  </g>
+  <!-- Circular plus badge (transparent interior) -->
+  <circle cx="12" cy="11" r="4.2"/>
+  <!-- Centered plus -->
+  <line x1="12" y1="9" x2="12" y2="13" stroke-linecap="round"/>
+  <line x1="10" y1="11" x2="14" y2="11" stroke-linecap="round"/>
+</svg>
diff --git a/src/webview/editor/EnvironmentsTab.tsx b/src/webview/editor/EnvironmentsTab.tsx
index 5e27e37..d24808a 100644
--- a/src/webview/editor/EnvironmentsTab.tsx
+++ b/src/webview/editor/EnvironmentsTab.tsx
@@ -1,4 +1,5 @@
 import React, { useRef } from "react";
+import Tooltip from "../components/Tooltip";
 import AutoGrowTextarea from "../components/AutoGrowTextarea";
 import PlusIcon from "../components/icons/PlusIcon";
 import TrashIcon from "../components/icons/TrashIcon";
@@ -91,18 +92,17 @@ const EnvironmentsTab: React.FC<EnvironmentsTabProps> = ({
                   className={`env-item ${isSelected ? "selected" : ""}`}
                   onClick={() => onSelectEnv(env.id)}
                 >
-                  <button
-                    className={`env-active-btn ${isActive ? "active" : ""}`}
-                    title={
-                      isActive
-                        ? "Active (click to deactivate)"
-                        : "Set as active"
-                    }
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onSetActive(env.id);
-                    }}
-                  />
+                  <Tooltip
+                    text={isActive ? "Active (click to deactivate)" : "Set as active"}
+                  >
+                    <button
+                      className={`env-active-btn ${isActive ? "active" : ""}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onSetActive(env.id);
+                      }}
+                    />
+                  </Tooltip>
                   {isRenaming ? (
                     <input
                       ref={renameInputRef}
@@ -128,16 +128,17 @@ const EnvironmentsTab: React.FC<EnvironmentsTabProps> = ({
                       {env.name}
                     </span>
                   )}
-                  <button
-                    className="env-delete-btn"
-                    title="Delete environment"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDeleteEnvironment(env.id);
-                    }}
-                  >
-                    <TrashIcon />
-                  </button>
+                  <Tooltip text="Delete environment">
+                    <button
+                      className="env-delete-btn"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteEnvironment(env.id);
+                      }}
+                    >
+                      <TrashIcon />
+                    </button>
+                  </Tooltip>
                 </div>
               );
             })}
@@ -193,13 +194,14 @@ const EnvironmentsTab: React.FC<EnvironmentsTabProps> = ({
                 <div className="env-vars-list">
                   {selectedEnv.variables.map((v, idx) => (
                     <div key={idx} className="env-var-row">
-                      <button
-                        className={`env-var-toggle ${v.enabled ? "enabled" : ""}`}
-                        title={v.enabled ? "Disable" : "Enable"}
-                        onClick={() =>
-                          onUpdateVariable(idx, "enabled", !v.enabled)
-                        }
-                      />
+                      <Tooltip text={v.enabled ? "Disable" : "Enable"}>
+                        <button
+                          className={`env-var-toggle ${v.enabled ? "enabled" : ""}`}
+                          onClick={() =>
+                            onUpdateVariable(idx, "enabled", !v.enabled)
+                          }
+                        />
+                      </Tooltip>
                       <AutoGrowTextarea
                         className={`env-var-input ${!v.enabled ? "disabled" : ""}`}
                         placeholder="key"
@@ -216,13 +218,14 @@ const EnvironmentsTab: React.FC<EnvironmentsTabProps> = ({
                           onUpdateVariable(idx, "value", e.target.value)
                         }
                       />
-                      <button
-                        className="remove-btn"
-                        title="Remove variable"
-                        onClick={() => onRemoveVariable(idx)}
-                      >
-                        <TrashIcon />
-                      </button>
+                      <Tooltip text="Remove variable">
+                        <button
+                          className="remove-btn"
+                          onClick={() => onRemoveVariable(idx)}
+                        >
+                          <TrashIcon />
+                        </button>
+                      </Tooltip>
                     </div>
                   ))}
                 </div>
diff --git a/src/webview/editor/SettingsTab.tsx b/src/webview/editor/SettingsTab.tsx
index 1fde9b8..b3ccd0f 100644
--- a/src/webview/editor/SettingsTab.tsx
+++ b/src/webview/editor/SettingsTab.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "../components/Tooltip";
 import AutoGrowTextarea from "../components/AutoGrowTextarea";
 import AutocompleteInput from "../components/AutocompleteInput";
 import ArrowUpIcon from "../components/icons/ArrowIcon";
@@ -93,8 +94,8 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
   return (
     <>
       {/* ── Name ── */}
-      <div className="form-section">
-        <h2>{isCollection ? "Collection" : "Folder"} Name</h2>
+      <fieldset className="form-section">
+        <legend className="section-legend"><span>{isCollection ? "Collection" : "Folder"} Name</span></legend>
         <div className="form-group">
           <AutoGrowTextarea
             value={config.name}
@@ -102,11 +103,11 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
             placeholder={`Enter ${entityLabel} name`}
           />
         </div>
-      </div>
+      </fieldset>
 
       {/* ── Base URL ── */}
-      <div className="form-section">
-        <h2>Base URL</h2>
+      <fieldset className="form-section">
+        <legend className="section-legend"><span>Base URL</span></legend>
         <div className="form-group">
           <EnvVarInput
             value={config.baseUrl || ""}
@@ -126,17 +127,14 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
             All requests in this {entityLabel} will use this as the base URL
           </p>
         </div>
-      </div>
+      </fieldset>
 
       {/* ── Headers ── */}
-      <div className="form-section">
-        <div className="section-header">
-          <h2>Headers</h2>
-          <button className="add-btn" onClick={onAddHeader}>
-            <PlusIcon />
-            Add Header
-          </button>
-        </div>
+      <fieldset className="form-section">
+        <legend className="section-legend">
+          <span>Headers</span>
+          <button className="add-btn legend-add-btn" onClick={onAddHeader}><PlusIcon />Add Header</button>
+        </legend>
         {inheritedConfig.headers && inheritedConfig.headers.length > 0 && (
           <InheritedList
             items={inheritedConfig.headers}
@@ -174,29 +172,26 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
                   className="header-value"
                   envVariables={envVars}
                 />
-                <button
-                  className="remove-btn"
-                  onClick={() => onRemoveHeader(index)}
-                  title="Remove header"
-                  aria-label="Remove header"
-                >
-                  <TrashIcon />
-                </button>
+                <Tooltip text="Remove header">
+                  <button
+                    className="remove-btn"
+                    onClick={() => onRemoveHeader(index)}
+                  >
+                    <TrashIcon />
+                  </button>
+                </Tooltip>
               </div>
             ))
           )}
         </div>
-      </div>
+      </fieldset>
 
       {/* ── Query Parameters ── */}
-      <div className="form-section">
-        <div className="section-header">
-          <h2>Query Parameters</h2>
-          <button className="add-btn" onClick={onAddParam}>
-            <PlusIcon />
-            Add Param
-          </button>
-        </div>
+      <fieldset className="form-section">
+        <legend className="section-legend">
+          <span>Query Parameters</span>
+          <button className="add-btn legend-add-btn" onClick={onAddParam}><PlusIcon />Add Param</button>
+        </legend>
         {inheritedConfig.params && inheritedConfig.params.length > 0 && (
           <InheritedList
             items={inheritedConfig.params}
@@ -234,31 +229,33 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
                   className="header-value"
                   envVariables={envVars}
                 />
-                <button
-                  className="remove-btn"
-                  onClick={() => onRemoveParam(index)}
-                  title="Remove parameter"
-                  aria-label="Remove parameter"
-                >
-                  <TrashIcon />
-                </button>
+                <Tooltip text="Remove parameter">
+                  <button
+                    className="remove-btn"
+                    onClick={() => onRemoveParam(index)}
+                  >
+                    <TrashIcon />
+                  </button>
+                </Tooltip>
               </div>
             ))
           )}
         </div>
-      </div>
+      </fieldset>
 
       {/* ── Authentication ── */}
-      <div className="form-section">
-        <h2>Authentication</h2>
-        <div className="form-group" style={{ marginBottom: "12px" }}>
+      <fieldset className="form-section">
+        <legend className="section-legend"><span>Authentication</span></legend>
+        <div className="form-group">
           <label className="field-label">Auth Type</label>
           <select
-            className="method-select"
-            value={config.auth === undefined ? "none" : config.auth.type}
+            className="form-select"
+            value={config.auth === undefined ? (isCollection ? "none" : "inherit") : config.auth.type}
             onChange={(e) => {
               const val = e.target.value;
-              if (val === "none") {
+              if (val === "inherit") {
+                onChangeAuth(undefined);
+              } else if (val === "none") {
                 onChangeAuth({ type: "none" });
               } else if (val === "bearer") {
                 onChangeAuth({ type: "bearer", token: "" });
@@ -269,6 +266,7 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
               }
             }}
           >
+            {!isCollection && <option value="inherit">Inherit from parent</option>}
             <option value="none">None</option>
             <option value="bearer">Bearer Token</option>
             <option value="basic">Basic Auth</option>
@@ -342,7 +340,7 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
             <div className="form-group">
               <label className="field-label">Add to</label>
               <select
-                className="method-select"
+                className="form-select"
                 value={apikeyAuth.addTo}
                 onChange={(e) =>
                   onChangeAuth({
@@ -378,7 +376,7 @@ const SettingsTab: React.FC<SettingsTabProps> = ({
             API Key inherited from parent folder
           </p>
         )}
-      </div>
+      </fieldset>
     </>
   );
 };
diff --git a/src/webview/editor/styles.css b/src/webview/editor/styles.css
index f94e83b..333185e 100644
--- a/src/webview/editor/styles.css
+++ b/src/webview/editor/styles.css
@@ -49,7 +49,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 32px;
+  padding: 10px 20px;
   border-bottom: 1px solid var(--glass-border);
   background: linear-gradient(
     180deg,
@@ -66,8 +66,8 @@ body {
   content: "";
   position: absolute;
   bottom: -1px;
-  left: 32px;
-  right: 32px;
+  left: 20px;
+  right: 20px;
   height: 1px;
   background: var(--restlab-gradient);
   opacity: 0.3;
@@ -83,10 +83,10 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: 36px;
+  height: 36px;
   background: var(--restlab-gradient);
-  border-radius: 12px;
+  border-radius: 8px;
   color: #ffffff;
   box-shadow: 0 4px 16px var(--restlab-accent-glow);
 }
@@ -96,13 +96,13 @@ body {
 }
 
 .header-info h1 {
-  font-size: 20px;
+  font-size: 15px;
   font-weight: 700;
   background: var(--restlab-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  margin-bottom: 2px;
+  margin-bottom: 1px;
 }
 
 .header-info .subtitle {
@@ -172,7 +172,7 @@ body {
 .editor-content {
   flex: 1;
   overflow-y: auto;
-  padding: 32px;
+  padding: 16px 20px;
 }
 
 .editor-content::-webkit-scrollbar {
@@ -192,68 +192,51 @@ body {
   background: var(--vscode-scrollbarSlider-hoverBackground);
 }
 
-/* Form Sections */
-.form-section {
-  margin-bottom: 40px;
-  padding: 28px;
+/* Form Sections — fieldset/legend style */
+fieldset.form-section {
+  margin-bottom: 10px;
+  padding: 8px 12px 10px;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
-  border-radius: 16px;
+  border-radius: 8px;
   backdrop-filter: blur(8px);
   position: relative;
 }
 
-.form-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 28px;
-  right: 28px;
-  height: 1px;
-  background: var(--restlab-gradient);
-  opacity: 0.3;
-  border-radius: 1px;
-}
-
-.form-section h2 {
+.section-legend {
   display: flex;
   align-items: center;
-  gap: 10px;
-  font-size: 14px;
+  gap: 8px;
+  width: 100%;
+  padding: 0 5px;
+  font-size: 10px;
   font-weight: 700;
-  background: var(--restlab-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 20px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
+  line-height: 1;
+  background: var(--vscode-editor-background);
 }
 
-.form-section h2::before {
-  content: "";
-  display: inline-block;
-  width: 4px;
-  height: 16px;
+.section-legend span {
   background: var(--restlab-gradient);
-  border-radius: 2px;
-  box-shadow: 0 0 8px var(--restlab-accent-glow);
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.section-header h2 {
-  margin-bottom: 0;
+/* Add button inside the legend — pushed to the right */
+.legend-add-btn {
+  margin-left: auto;
+  padding: 3px 8px;
+  font-size: 10px;
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 500;
 }
 
 /* Form Groups */
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .form-group:last-child {
@@ -262,10 +245,10 @@ body {
 
 .form-group label {
   display: block;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--vscode-foreground);
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -273,13 +256,13 @@ body {
 .form-group input,
 .form-group textarea {
   width: 100%;
-  padding: 12px 16px;
+  padding: 6px 10px;
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: var(--vscode-editor-background);
   color: var(--vscode-input-foreground);
   font-family: inherit;
-  font-size: 14px;
+  font-size: 13px;
   transition: all 0.2s ease;
 }
 
@@ -354,7 +337,7 @@ body {
 .headers-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 6px;
 }
 
 .empty-message {
@@ -369,12 +352,12 @@ body {
 
 .header-row {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  padding: 12px;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 8px;
   background: var(--vscode-editor-background);
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 8px;
+  border-radius: 6px;
   transition: all 0.15s ease;
 }
 
@@ -385,9 +368,9 @@ body {
 .header-key,
 .header-value {
   flex: 1;
-  padding: 10px 14px;
+  padding: 5px 8px;
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 6px;
+  border-radius: 5px;
   background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   font-family: inherit;
@@ -460,6 +443,38 @@ body {
   border-radius: 4px;
 }
 
+/* Explicit field label (mirrors .form-group label) */
+.field-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Generic form select — used for non-method selects (auth type, add-to, etc.) */
+.form-select {
+  width: 100%;
+  height: 2em;
+  padding: 0 10px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--restlab-accent);
+  box-shadow: 0 0 0 2px var(--restlab-accent-subtle);
+}
+
 /* Field hint */
 .field-hint {
   margin-top: 8px;
@@ -473,13 +488,13 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 4px;
   color: var(--vscode-descriptionForeground);
-  padding: 32px;
+  padding: 16px;
   text-align: center;
   background-color: var(--vscode-editor-background);
   border: 1px dashed var(--vscode-panel-border);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .empty-message .empty-icon {
@@ -510,11 +525,6 @@ body {
 }
 
 .autocomplete-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 4px;
   max-height: 200px;
   overflow-y: auto;
   background: var(
@@ -524,7 +534,6 @@ body {
   border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
 }
 
 .autocomplete-dropdown::-webkit-scrollbar {
@@ -583,21 +592,21 @@ body {
 }
 
 .inherited-headers {
-  margin-bottom: 16px;
-  padding: 16px;
+  margin-bottom: 8px;
+  padding: 8px 10px;
   background: var(--restlab-accent-subtle);
   border: 1px solid rgba(56, 189, 248, 0.2);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .inherited-label {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--restlab-accent);
-  margin-bottom: 12px;
+  margin-bottom: 6px;
 }
 
 .inherited-label svg {
diff --git a/src/webview/request/AuthTab.tsx b/src/webview/request/AuthTab.tsx
index 6091af2..b01e2d1 100644
--- a/src/webview/request/AuthTab.tsx
+++ b/src/webview/request/AuthTab.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { AuthConfig } from "../types/internal.types";
 import VarInput from "./VarInput";
+import ArrowUpIcon from "../components/icons/ArrowIcon";
 
 type AuthMode = "inherit" | "bearer" | "basic" | "apikey" | "none";
 
@@ -43,11 +44,13 @@ const AuthTab: React.FC<AuthTabProps> = ({
   const apikeyAuth = auth?.type === "apikey" ? auth : null;
 
   return (
-    <div className="tab-section">
-      <div className="form-group" style={{ marginBottom: "12px" }}>
+    <fieldset className="form-section">
+      <legend className="section-legend"><span>Authentication</span></legend>
+
+      <div className="form-group">
         <label className="field-label">Auth Type</label>
         <select
-          className="method-select"
+          className="form-select"
           value={mode}
           onChange={(e) => handleModeChange(e.target.value as AuthMode)}
         >
@@ -66,7 +69,6 @@ const AuthTab: React.FC<AuthTabProps> = ({
             value={auth.token}
             onChange={(val) => onAuthChange({ type: "bearer", token: val })}
             placeholder="{{token}} or paste token"
-            className="url-input"
           />
         </div>
       )}
@@ -81,7 +83,6 @@ const AuthTab: React.FC<AuthTabProps> = ({
                 onAuthChange({ type: "basic", username: val, password: basicAuth.password })
               }
               placeholder="{{username}} or enter username"
-              className="url-input"
             />
           </div>
           <div className="form-group">
@@ -92,7 +93,6 @@ const AuthTab: React.FC<AuthTabProps> = ({
                 onAuthChange({ type: "basic", username: basicAuth.username, password: val })
               }
               placeholder="{{password}} or enter password"
-              className="url-input"
             />
           </div>
         </>
@@ -108,7 +108,6 @@ const AuthTab: React.FC<AuthTabProps> = ({
                 onAuthChange({ type: "apikey", key: val, value: apikeyAuth.value, addTo: apikeyAuth.addTo })
               }
               placeholder="X-API-Key"
-              className="url-input"
             />
           </div>
           <div className="form-group">
@@ -119,13 +118,12 @@ const AuthTab: React.FC<AuthTabProps> = ({
                 onAuthChange({ type: "apikey", key: apikeyAuth.key, value: val, addTo: apikeyAuth.addTo })
               }
               placeholder="{{api_key}} or enter value"
-              className="url-input"
             />
           </div>
           <div className="form-group">
             <label className="field-label">Add to</label>
             <select
-              className="method-select"
+              className="form-select"
               value={apikeyAuth.addTo}
               onChange={(e) =>
                 onAuthChange({
@@ -144,26 +142,29 @@ const AuthTab: React.FC<AuthTabProps> = ({
       )}
 
       {mode === "inherit" && inheritedAuth?.type === "bearer" && (
-        <p className="field-hint inherited-hint" style={{ marginTop: "8px" }}>
-          Inherited: Bearer token is set on the parent folder
+        <p className="field-hint inherited-hint">
+          <ArrowUpIcon />
+          Bearer token inherited from parent folder
         </p>
       )}
       {mode === "inherit" && inheritedAuth?.type === "basic" && (
-        <p className="field-hint inherited-hint" style={{ marginTop: "8px" }}>
-          Inherited: Basic Auth is set on the parent folder
+        <p className="field-hint inherited-hint">
+          <ArrowUpIcon />
+          Basic Auth inherited from parent folder
         </p>
       )}
       {mode === "inherit" && inheritedAuth?.type === "apikey" && (
-        <p className="field-hint inherited-hint" style={{ marginTop: "8px" }}>
-          Inherited: API Key is set on the parent folder
+        <p className="field-hint inherited-hint">
+          <ArrowUpIcon />
+          API Key inherited from parent folder
         </p>
       )}
       {mode === "inherit" && (!inheritedAuth || inheritedAuth.type === "none") && (
-        <p className="field-hint" style={{ marginTop: "8px" }}>
+        <p className="field-hint">
           No auth configured on parent folders
         </p>
       )}
-    </div>
+    </fieldset>
   );
 };
 
diff --git a/src/webview/request/CookieTab.tsx b/src/webview/request/CookieTab.tsx
index 9c61ad2..6a73eef 100644
--- a/src/webview/request/CookieTab.tsx
+++ b/src/webview/request/CookieTab.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "../components/Tooltip";
 import PlusIcon from "../components/icons/PlusIcon";
 import TrashIcon from "../components/icons/TrashIcon";
 import { useRequestContext } from "./RequestContext";
@@ -48,13 +49,14 @@ const CookieTab: React.FC = () => {
                 placeholder="value"
                 className="header-value"
               />
-              <button
-                className="remove-btn"
-                onClick={() => handleRemoveCookie(index)}
-                title="Remove Cookie"
-              >
-                <TrashIcon />
-              </button>
+              <Tooltip text="Remove Cookie">
+                <button
+                  className="remove-btn"
+                  onClick={() => handleRemoveCookie(index)}
+                >
+                  <TrashIcon />
+                </button>
+              </Tooltip>
             </div>
           ))
         )}
diff --git a/src/webview/request/FormFieldEditor.tsx b/src/webview/request/FormFieldEditor.tsx
index 6a01f2b..5b67d1e 100644
--- a/src/webview/request/FormFieldEditor.tsx
+++ b/src/webview/request/FormFieldEditor.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "../components/Tooltip";
 import AutoGrowTextarea from "../components/AutoGrowTextarea";
 import FileIcon from "../components/icons/FileIcon";
 import PlusIcon from "../components/icons/PlusIcon";
@@ -45,17 +46,18 @@ const FormFieldEditor = () => {
             />
 
             {config.contentType === "multipart/form-data" && (
-              <button
-                className={`type-toggle ${
-                  item.type === "file" ? "file-type" : "text-type"
-                }`}
-                onClick={() => handleToggleFormDataType(index)}
-                title={
-                  item.type === "file" ? "Switch to text" : "Switch to file"
-                }
+              <Tooltip
+                text={item.type === "file" ? "Switch to text" : "Switch to file"}
               >
-                {item.type === "file" ? <FileIcon /> : <TextIcon />}
-              </button>
+                <button
+                  className={`type-toggle ${
+                    item.type === "file" ? "file-type" : "text-type"
+                  }`}
+                  onClick={() => handleToggleFormDataType(index)}
+                >
+                  {item.type === "file" ? <FileIcon /> : <TextIcon />}
+                </button>
+              </Tooltip>
             )}
 
             {item.type === "file" ? (
@@ -87,12 +89,14 @@ const FormFieldEditor = () => {
               />
             )}
 
-            <button
-              className="remove-btn"
-              onClick={() => handleRemoveFormData(index)}
-            >
-              <TrashIcon />
-            </button>
+            <Tooltip text="Remove field">
+              <button
+                className="remove-btn"
+                onClick={() => handleRemoveFormData(index)}
+              >
+                <TrashIcon />
+              </button>
+            </Tooltip>
           </div>
         ))
       )}
diff --git a/src/webview/request/HeaderTab.tsx b/src/webview/request/HeaderTab.tsx
index d404b0a..c0ac9af 100644
--- a/src/webview/request/HeaderTab.tsx
+++ b/src/webview/request/HeaderTab.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "../components/Tooltip";
 import AutocompleteInput from "../components/AutocompleteInput";
 import PlusIcon from "../components/icons/PlusIcon";
 import TrashIcon from "../components/icons/TrashIcon";
@@ -90,13 +91,14 @@ const HeaderTab = () => {
                   placeholder="Value"
                   className="header-value"
                 />
-                <button
-                  className="remove-btn"
-                  onClick={() => handleRemoveHeader(index)}
-                  title="Remove Header"
-                >
-                  <TrashIcon />
-                </button>
+                <Tooltip text="Remove Header">
+                  <button
+                    className="remove-btn"
+                    onClick={() => handleRemoveHeader(index)}
+                  >
+                    <TrashIcon />
+                  </button>
+                </Tooltip>
               </div>
             ))
         )}
diff --git a/src/webview/request/ParamsTab.tsx b/src/webview/request/ParamsTab.tsx
index 1849e02..5c46b72 100644
--- a/src/webview/request/ParamsTab.tsx
+++ b/src/webview/request/ParamsTab.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "../components/Tooltip";
 import PlusIcon from "../components/icons/PlusIcon";
 import TrashIcon from "../components/icons/TrashIcon";
 import { useRequestContext } from "./RequestContext";
@@ -90,13 +91,14 @@ const ParamsTab = () => {
                   placeholder="Value"
                   className="header-value"
                 />
-                <button
-                  className="remove-btn"
-                  onClick={() => handleRemoveParam(index)}
-                  title="Remove Parameter"
-                >
-                  <TrashIcon />
-                </button>
+                <Tooltip text="Remove Parameter">
+                  <button
+                    className="remove-btn"
+                    onClick={() => handleRemoveParam(index)}
+                  >
+                    <TrashIcon />
+                  </button>
+                </Tooltip>
               </div>
             ))
         )}
diff --git a/src/webview/request/RequestEditor.tsx b/src/webview/request/RequestEditor.tsx
index 233b1fa..73926f4 100644
--- a/src/webview/request/RequestEditor.tsx
+++ b/src/webview/request/RequestEditor.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import Tooltip from "../components/Tooltip";
 import CodeIcon from "../components/icons/CodeIcon";
 import MoreActionIcon from "../components/icons/MoreActionIcon";
 import SaveIcon from "../components/icons/SaveIcon";
@@ -148,13 +149,14 @@ const RequestEditorContent: React.FC = () => {
           <span className="btn-text">{isSaved ? "Saved" : "Save"}</span>
         </button>
         <div className="request-more-container" ref={moreRef}>
-          <button
-            className="request-more-btn"
-            title="More actions"
-            onClick={() => setMoreOpen((o) => !o)}
-          >
-            <MoreActionIcon />
-          </button>
+          <Tooltip text="More actions" position="bottom">
+            <button
+              className="request-more-btn"
+              onClick={() => setMoreOpen((o) => !o)}
+            >
+              <MoreActionIcon />
+            </button>
+          </Tooltip>
           {moreOpen && (
             <div className="request-more-dropdown">
               <button
diff --git a/src/webview/request/ResponsePanel.tsx b/src/webview/request/ResponsePanel.tsx
index 12af551..2a59951 100644
--- a/src/webview/request/ResponsePanel.tsx
+++ b/src/webview/request/ResponsePanel.tsx
@@ -23,7 +23,6 @@ const ResponsePanel: React.FC = () => {
     splitLayout,
     requestSize,
     isResizing,
-    isSmallScreen,
     isResponseHidden,
     responseEditorLanguage,
     responseBodyValue,
@@ -96,22 +95,20 @@ const ResponsePanel: React.FC = () => {
                 </div>
               )}
               <div className="response-header-actions">
-                {!isSmallScreen && (
-                  <Tooltip
-                    text={
-                      splitLayout === "horizontal"
-                        ? "Switch to side-by-side view"
-                        : "Switch to stacked view"
-                    }
+                <Tooltip
+                  text={
+                    splitLayout === "horizontal"
+                      ? "Switch to side-by-side view"
+                      : "Switch to stacked view"
+                  }
+                >
+                  <button
+                    className="layout-toggle-btn"
+                    onClick={toggleLayout}
                   >
-                    <button
-                      className="layout-toggle-btn"
-                      onClick={toggleLayout}
-                    >
-                      <SplitIcon splitLayout={splitLayout} />
-                    </button>
-                  </Tooltip>
-                )}
+                    <SplitIcon splitLayout={splitLayout} />
+                  </button>
+                </Tooltip>
                 <Tooltip text="Hide response">
                   <button
                     className="response-hide-btn"
diff --git a/src/webview/request/styles.css b/src/webview/request/styles.css
index 95cec68..7811191 100644
--- a/src/webview/request/styles.css
+++ b/src/webview/request/styles.css
@@ -54,15 +54,17 @@
   --glass-border: rgba(255, 255, 255, 0.08);
 
   /* Fluid spacing tokens — all em, scale with --vscode-font-size */
-  --rl-sp1: 0.30em;
+  --rl-sp0: 0.15em;
+  --rl-sp1: 0.3em;
   --rl-sp2: 0.46em;
   --rl-sp3: 0.62em;
   --rl-sp4: 0.92em;
   --rl-sp5: 1.23em;
-  --rl-ctrl: 2.35em;
+  --rl-ctrl: 2em;
+  --rl-ctrl-sm: 1.85em;
   --rl-icon: 1.25em;
   --rl-r1: 0.35em;
-  --rl-r2: 0.50em;
+  --rl-r2: 0.5em;
   --rl-r3: 0.65em;
 }
 
@@ -182,11 +184,13 @@ body {
 .request-bar {
   display: flex;
   gap: var(--rl-sp3);
-  padding: var(--rl-sp4) 0 var(--rl-sp3);
+  padding: var(--rl-sp2) 0 var(--rl-sp1);
   align-items: center;
   flex-wrap: wrap;
 }
-.request-bar > * { min-height: var(--rl-ctrl); }
+.request-bar > * {
+  min-height: var(--rl-ctrl);
+}
 
 .method-select {
   height: var(--rl-ctrl);
@@ -253,8 +257,7 @@ body {
 .url-input {
   flex: 1 1 16em;
   min-width: 0;
-  min-height: var(--rl-ctrl);
-  padding: var(--rl-sp2) var(--rl-sp4);
+  padding: var(--rl-sp0) var(--rl-sp1);
   border: 1px solid var(--glass-border);
   border-radius: var(--rl-r3);
   background-color: var(--vscode-input-background);
@@ -291,7 +294,10 @@ body {
   position: relative;
   overflow: hidden;
 }
-.send-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
+.send-btn svg {
+  width: var(--rl-icon);
+  height: var(--rl-icon);
+}
 
 .send-btn::before {
   content: "";
@@ -345,7 +351,10 @@ body {
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(8px);
 }
-.save-btn svg { width: var(--rl-icon); height: var(--rl-icon); }
+.save-btn svg {
+  width: var(--rl-icon);
+  height: var(--rl-icon);
+}
 
 .save-btn:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.06);
@@ -459,7 +468,7 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 7px 12px;
+  padding: 2px 6px;
   border: 1px solid var(--glass-border);
   border-radius: 7px;
   background: var(--glass-bg);
@@ -527,7 +536,7 @@ body {
 .base-url-hint {
   font-size: 0.92em;
   color: var(--vscode-descriptionForeground);
-  padding-bottom: var(--rl-sp3);
+  padding-bottom: var(--rl-sp0);
 }
 
 .base-url-hint code {
@@ -643,7 +652,6 @@ body {
 .tabstrip-wrap {
   position: relative;
   border-bottom: 1px solid var(--glass-border);
-  margin-bottom: var(--rl-sp5);
 }
 .tabstrip-wrap::before,
 .tabstrip-wrap::after {
@@ -659,16 +667,30 @@ body {
 }
 .tabstrip-wrap::before {
   left: 0;
-  background: linear-gradient(90deg, var(--vscode-editor-background), transparent);
+  background: linear-gradient(
+    90deg,
+    var(--vscode-editor-background),
+    transparent
+  );
 }
 .tabstrip-wrap::after {
   right: 0;
-  background: linear-gradient(270deg, var(--vscode-editor-background), transparent);
+  background: linear-gradient(
+    270deg,
+    var(--vscode-editor-background),
+    transparent
+  );
+}
+.tabstrip-wrap.scroll-start::after {
+  opacity: 1;
 }
-.tabstrip-wrap.scroll-start::after { opacity: 1; }
 .tabstrip-wrap.scroll-mid::before,
-.tabstrip-wrap.scroll-mid::after { opacity: 1; }
-.tabstrip-wrap.scroll-end::before { opacity: 1; }
+.tabstrip-wrap.scroll-mid::after {
+  opacity: 1;
+}
+.tabstrip-wrap.scroll-end::before {
+  opacity: 1;
+}
 
 .tabs {
   display: flex;
@@ -677,13 +699,15 @@ body {
   scrollbar-width: none;
   position: relative;
 }
-.tabs::-webkit-scrollbar { height: 0; }
+.tabs::-webkit-scrollbar {
+  height: 0;
+}
 
 .tab {
   display: flex;
   align-items: center;
   gap: var(--rl-sp2);
-  padding: var(--rl-sp3) var(--rl-sp4);
+  padding: var(--rl-sp2) var(--rl-sp2);
   border: none;
   border-bottom: 2px solid transparent;
   background: transparent;
@@ -817,7 +841,7 @@ body {
 }
 
 .tab-content {
-  padding: 8px 0;
+  padding: var(--rl-sp2) 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -837,9 +861,9 @@ body {
 
 /* Horizontal resize handle (for top/bottom split) */
 .resize-handle.horizontal {
-  height: 12px;
+  height: 5px;
   cursor: row-resize;
-  margin: 4px 0;
+  margin: 0;
 }
 
 .resize-handle.horizontal::before {
@@ -854,15 +878,14 @@ body {
 }
 
 .resize-handle.horizontal .resize-handle-bar {
-  width: 48px;
-  height: 4px;
+  display: none;
 }
 
 /* Vertical resize handle (for left/right split) */
 .resize-handle.vertical {
-  width: 12px;
+  width: 5px;
   cursor: col-resize;
-  margin: 0 4px;
+  margin: 0;
 }
 
 .resize-handle.vertical::before {
@@ -877,8 +900,7 @@ body {
 }
 
 .resize-handle.vertical .resize-handle-bar {
-  width: 4px;
-  height: 48px;
+  display: none;
 }
 
 .resize-handle:hover::before,
@@ -910,11 +932,131 @@ body {
   height: 64px;
 }
 
+/* ── Auth / Form fields ─────────────────────────────────────────────── */
+.tab-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rl-sp4);
+  padding: var(--rl-sp2) 0;
+}
+
+/* Card-style section — matches collection-settings fieldset */
+fieldset.form-section {
+  margin-bottom: var(--rl-sp3);
+  padding: var(--rl-sp2) var(--rl-sp3) var(--rl-sp3);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  backdrop-filter: blur(8px);
+  position: relative;
+}
+
+.section-legend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  line-height: 1;
+  background: var(--vscode-editor-background);
+}
+
+.section-legend span {
+  background: var(--restlab-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rl-sp1);
+  margin-bottom: var(--rl-sp3);
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+/* Inputs/textareas inside form-group (used by AuthTab fieldset) */
+.form-group .var-input-container textarea {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 6px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: var(--vscode-font-size, 13px);
+  transition: all 0.2s ease;
+  flex: none;
+  min-width: 0;
+}
+
+.form-group .var-input-container textarea:focus {
+  outline: none;
+  border-color: var(--restlab-accent);
+  box-shadow: 0 0 0 3px var(--restlab-accent-subtle);
+}
+
+.field-label {
+  display: block;
+  font-size: 0.82em;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.field-hint {
+  font-size: 0.82em;
+  color: var(--vscode-descriptionForeground);
+  margin: 0;
+}
+
+.inherited-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--restlab-accent);
+  background: var(--restlab-accent-subtle);
+  padding: var(--rl-sp2) var(--rl-sp3);
+  border-radius: var(--rl-r2);
+  border: 1px solid rgba(56, 189, 248, 0.2);
+  margin: 0;
+  font-size: 0.85em;
+}
+
+.form-select {
+  height: var(--rl-ctrl);
+  padding: 0 var(--rl-sp3);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--rl-r3);
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  font-family: inherit;
+  font-size: 0.92em;
+  cursor: pointer;
+  width: 100%;
+  transition: border-color 0.2s ease;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--restlab-accent);
+  box-shadow: 0 0 0 3px var(--restlab-accent-subtle);
+}
+
 /* Headers Section */
 .headers-section {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--rl-sp2);
   flex: 1;
   overflow-y: auto;
   min-height: 0;
@@ -1032,7 +1174,7 @@ body {
 .body-section {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--rl-sp2);
   flex: 1;
   min-height: 0;
   overflow: hidden;
@@ -1042,7 +1184,7 @@ body {
 .content-type-selector {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 4px;
 }
 
 .content-type-selector label {
@@ -1055,8 +1197,7 @@ body {
 .content-type-select {
   flex: 1;
   max-width: 350px;
-  height: var(--rl-ctrl);
-  padding: 0 var(--rl-sp4);
+  height: var(--rl-ctrl-sm);
   border: 1px solid var(--vscode-panel-border);
   border-radius: var(--rl-r2);
   background-color: var(--vscode-input-background);
@@ -1320,7 +1461,7 @@ body {
 
 /* Response Section */
 .response-section {
-  padding: var(--rl-sp5);
+  padding: var(--rl-sp0) var(--rl-sp2) var(--rl-sp2);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
   background: var(--glass-bg);
@@ -1348,7 +1489,6 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--rl-sp5);
   flex-wrap: wrap;
   gap: var(--rl-sp3);
 }
@@ -1366,7 +1506,7 @@ body {
 
 .response-meta {
   display: flex;
-  gap: var(--rl-sp2);
+  gap: var(--rl-sp1);
   flex-wrap: wrap;
 }
 
@@ -1410,7 +1550,7 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--rl-sp4);
+  margin-bottom: var(--rl-sp2);
   flex-wrap: wrap;
   gap: var(--rl-sp3);
 }
@@ -1450,9 +1590,9 @@ body {
 }
 
 .status-badge {
-  padding: 0.35em 0.8em;
+  padding: 0.18em 0.55em;
   border-radius: 1.4em;
-  font-size: 0.76em;
+  font-size: 0.7em;
   font-weight: 700;
   letter-spacing: 0.3px;
 }
@@ -1503,9 +1643,9 @@ body {
 }
 
 .time-badge {
-  padding: 0.35em 0.8em;
+  padding: 0.18em 0.55em;
   border-radius: 1.4em;
-  font-size: 0.76em;
+  font-size: 0.7em;
   font-weight: 600;
   background: var(--glass-bg);
   color: var(--vscode-foreground);
@@ -1513,9 +1653,9 @@ body {
 }
 
 .size-badge {
-  padding: 0.35em 0.8em;
+  padding: 0.18em 0.55em;
   border-radius: 1.4em;
-  font-size: 0.76em;
+  font-size: 0.7em;
   font-weight: 600;
   background: linear-gradient(
     90deg,
@@ -1611,7 +1751,7 @@ body {
   min-height: 0;
   white-space: pre-wrap;
   word-break: break-word;
-  line-height: 1.6;
+  line-height: 1.38;
 }
 
 .response-headers {
@@ -1625,7 +1765,7 @@ body {
 
 .response-header-row {
   display: flex;
-  padding: 10px 14px;
+  padding: var(--rl-sp2) var(--rl-sp3);
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: 6px;
@@ -1666,11 +1806,6 @@ body {
 }
 
 .autocomplete-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 4px;
   max-height: 200px;
   overflow-y: auto;
   background: var(
@@ -1680,7 +1815,6 @@ body {
   border: 1px solid var(--vscode-dropdown-border, var(--vscode-panel-border));
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
 }
 
 .autocomplete-item {
@@ -1755,9 +1889,9 @@ body {
 
   .split-container.vertical .resize-handle {
     width: auto;
-    height: 12px;
+    height: 5px;
     cursor: row-resize;
-    margin: 4px 0;
+    margin: 0;
   }
 
   .split-container.vertical .resize-handle::before {
@@ -1770,7 +1904,6 @@ body {
   }
 
   .split-container.vertical .resize-handle-bar {
-    width: 48px;
-    height: 4px;
+    display: none;
   }
 }
diff --git a/src/webview/sidebar/FolderActionsDropdown.tsx b/src/webview/sidebar/FolderActionsDropdown.tsx
index 5b49753..8605b82 100644
--- a/src/webview/sidebar/FolderActionsDropdown.tsx
+++ b/src/webview/sidebar/FolderActionsDropdown.tsx
@@ -79,6 +79,9 @@ const FolderActionsDropdown: React.FC<{
     setIsOpen(!isOpen);
   };
 
+  const isCollection = !folder.parentId;
+  const label = isCollection ? "Collection" : "Folder";
+
   return (
     <div className="dropdown-wrap" ref={dropdownRef}>
       <Tooltip text="More Actions" position="left">
@@ -99,7 +102,7 @@ const FolderActionsDropdown: React.FC<{
             }}
           >
             <FolderAddIcon />
-            <span>Add Subfolder</span>
+            <span>{isCollection ? "Add Folder" : "Add Subfolder"}</span>
           </button>
           <button
             className="dropdown-item"
@@ -119,7 +122,7 @@ const FolderActionsDropdown: React.FC<{
             }}
           >
             <GearIcon />
-            <span>Collection Settings</span>
+            <span>{label} Settings</span>
           </button>
           <button
             className="dropdown-item"
@@ -129,7 +132,7 @@ const FolderActionsDropdown: React.FC<{
             }}
           >
             <ExportIcon />
-            <span>Export Collection</span>
+            <span>Export {label}</span>
             <ChevronIcon />
           </button>
           <button
@@ -140,7 +143,7 @@ const FolderActionsDropdown: React.FC<{
             }}
           >
             <CopyIcon />
-            <span>Duplicate Collection</span>
+            <span>Duplicate {label}</span>
           </button>
           <button
             className="dropdown-item"
@@ -150,7 +153,7 @@ const FolderActionsDropdown: React.FC<{
             }}
           >
             <PencilIcon />
-            <span>Rename Collection</span>
+            <span>Rename {label}</span>
           </button>
           <div className="dropdown-divider" />
           <button
@@ -161,7 +164,7 @@ const FolderActionsDropdown: React.FC<{
             }}
           >
             <TrashIcon />
-            <span>Delete Collection</span>
+            <span>Delete {label}</span>
           </button>
         </div>
       )}
diff --git a/src/webview/sidebar/ImportDropdown.tsx b/src/webview/sidebar/ImportDropdown.tsx
index ea0783c..7719af7 100644
--- a/src/webview/sidebar/ImportDropdown.tsx
+++ b/src/webview/sidebar/ImportDropdown.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from "react";
+import Tooltip from "../components/Tooltip";
 import { ImportProvider } from "../types/internal.types";
 import RESTLabIcon from "../components/icons/RestLabIcon";
 import PostmanIcon from "../components/icons/PostmanIcon";
 import ThunderClientIcon from "../components/icons/ThunderClientIcon";
-import ImportIcon from "../components/icons/ImportIcon";
+import FolderImportIcon from "../components/icons/FolderImportIcon";
 
 const IMPORT_PROVIDERS: ImportProvider[] = [
   {
@@ -48,13 +49,14 @@ const ImportDropdown: React.FC<{
 
   return (
     <div className="dropdown-wrap" ref={dropdownRef}>
-      <button
-        className="header-action-btn"
-        onClick={() => setIsOpen(!isOpen)}
-        title="Import Collection"
-      >
-        <ImportIcon />
-      </button>
+      <Tooltip text="Import Collection" position="bottom">
+        <button
+          className="header-action-btn"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <FolderImportIcon />
+        </button>
+      </Tooltip>
       {isOpen && (
         <div className="dropdown-menu">
           <div className="dropdown-header">Import from</div>
diff --git a/src/webview/sidebar/Sidebar.tsx b/src/webview/sidebar/Sidebar.tsx
index 17e9c61..527f339 100644
--- a/src/webview/sidebar/Sidebar.tsx
+++ b/src/webview/sidebar/Sidebar.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import Tooltip from "../components/Tooltip";
 import ChevronIcon from "../components/icons/ChevronIcon";
+import CollectionAddIcon from "../components/icons/CollectionAddIcon";
 import CollectionIcon from "../components/icons/CollectionIcon";
-import EmptyGlassIcon from "../components/icons/EmptyGlassIcon";
 import FolderIcon from "../components/icons/FolderIcon";
 import NoItemsIcon from "../components/icons/NoItemsIcon";
 import PlusIcon from "../components/icons/PlusIcon";
@@ -598,7 +598,7 @@ export const Sidebar: React.FC = () => {
             onClick={handleCreateFolder}
             title="Create Collection"
           >
-            <EmptyGlassIcon />
+            <CollectionAddIcon />
             <span>New Collection</span>
           </button>
           <ImportDropdown onSelect={handleImportCollection} />
diff --git a/src/webview/sidebar/sidebar.css b/src/webview/sidebar/sidebar.css
index 86ae784..bde7dda 100644
--- a/src/webview/sidebar/sidebar.css
+++ b/src/webview/sidebar/sidebar.css
@@ -72,7 +72,7 @@ body {
 
 /* ---- Header ---- */
 .sb-head {
-  padding: var(--rl-sp4);
+  padding: var(--rl-sp3) var(--rl-sp4);
   border-bottom: 1px solid var(--glass-border);
   background: linear-gradient(180deg, rgba(56, 189, 248, 0.05), transparent);
   position: relative;
@@ -101,7 +101,7 @@ body {
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  margin-bottom: var(--rl-sp4);
+  margin-bottom: var(--rl-sp2);
 }
 .sb-title::before {
   content: "";
@@ -150,7 +150,7 @@ body {
   display: flex;
   align-items: center;
   gap: var(--rl-sp3);
-  padding: var(--rl-sp3);
+  padding: var(--rl-sp2) var(--rl-sp3);
   margin-bottom: var(--rl-sp1);
   cursor: pointer;
   border-radius: var(--rl-r2);
@@ -234,7 +234,7 @@ body {
   display: flex;
   align-items: center;
   gap: var(--rl-sp2);
-  padding: var(--rl-sp2) var(--rl-sp3);
+  padding: 3px var(--rl-sp3);
   margin-bottom: 1px;
   margin-left: 0.6em;
   cursor: pointer;

From 78ab92f005ba29b9dcaffdd0f68f33c2eb5b5510 Mon Sep 17 00:00:00 2001
From: Shambhu Lal Verma <developer.sham@gmail.com>
Date: Sun, 7 Jun 2026 22:49:50 +0530
Subject: [PATCH 19/19] chore: publish to Open VSX, fix vscodeignore, bundle
 all extension deps

- Add Open VSX publishing step to release pipeline: packages once to .vsix,
  then publishes to both VS Code Marketplace and Open VSX Registry
- Expand .vscodeignore to exclude docs, src, scripts, config files, and
  node_modules from the packaged extension
- Set noExternal: true in Vite SSR config so all dependencies (axios,
  form-data, etc.) are bundled into extension.js
- Add "rest lab" / "restlab" keywords to package.json for Marketplace search

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .github/workflows/release.yml |   3 +
 .releaserc.js                 |  13 +--
 .vscodeignore                 |  15 +++-
 CHANGELOG.md                  | 150 ++++++++++++++--------------------
 package.json                  |   2 +
 scripts/build.mts             |   4 +-
 6 files changed, 90 insertions(+), 97 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 5f3543d..597e855 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -55,3 +55,6 @@ jobs:
           # Your VS Code Marketplace Personal Access Token.
           # Add this in: GitHub repo → Settings → Secrets → Actions → New secret
           VSCE_PAT: ${{ secrets.VSCE_PAT }}
+          # Your Open VSX Registry Personal Access Token.
+          # Create one at: https://open-vsx.org/ → User Settings → Access Tokens
+          OVSX_PAT: ${{ secrets.OVSX_PAT }}
diff --git a/.releaserc.js b/.releaserc.js
index da1de48..8b0b14a 100644
--- a/.releaserc.js
+++ b/.releaserc.js
@@ -5,7 +5,7 @@
 //   2. release-notes-generator — builds changelog text in memory
 //   3. changelog          — writes changelog text to CHANGELOG.md
 //   4. npm (no publish)   — writes new version into package.json + package-lock.json
-//   5. exec               — runs `vsce publish` to push to VS Code Marketplace
+//   5. exec               — packages to .vsix, publishes to VS Code Marketplace + Open VSX
 //   6. github             — creates the GitHub Release with the generated notes
 //   7. git                — commits package.json + package-lock.json + CHANGELOG.md
 //                           back to main with "[skip ci]" to prevent an infinite loop
@@ -102,14 +102,17 @@ module.exports = {
       },
     ],
 
-    // ── 5. Publish to VS Code Marketplace ────────────────────────────────────
-    // Runs only when there is an actual release (commit-analyzer returned a
-    // version bump). VSCE_PAT is injected from the GitHub Actions secret.
+    // ── 5. Publish to VS Code Marketplace and Open VSX ───────────────────────
+    // Packages once to a .vsix, then publishes the same artifact to both
+    // registries. VSCE_PAT and OVSX_PAT are injected from GitHub Actions secrets.
     [
       "@semantic-release/exec",
       {
         publishCmd:
-          "npm install -g @vscode/vsce && vsce publish -p $VSCE_PAT",
+          "npm install -g @vscode/vsce ovsx && " +
+          "vsce package && " +
+          "vsce publish --packagePath restlab-${nextRelease.version}.vsix -p $VSCE_PAT && " +
+          "ovsx publish restlab-${nextRelease.version}.vsix -p $OVSX_PAT",
       },
     ],
 
diff --git a/.vscodeignore b/.vscodeignore
index 66eabe6..5badf73 100644
--- a/.vscodeignore
+++ b/.vscodeignore
@@ -1,3 +1,16 @@
 **/*.ts
 **/tsconfig.json
-!file.ts
\ No newline at end of file
+!file.ts
+docs
+src
+scripts
+.vscode
+.github
+.claude
+.releaserc.js
+tsconfig.json
+tailwind.config.js
+postcss.config.js
+docs
+node_modules
+CLAUDE.md
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a438393..5fab6f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,116 +1,88 @@
-## <small>1.5.5 (2026-06-05)</small>
+# Changelog
 
-* fix: bundle issue (#16) ([488bfd1](https://github.com/slverma/REST-Lab/commit/488bfd1)), closes [#16](https://github.com/slverma/REST-Lab/issues/16)
+All notable changes to the REST Lab extension will be documented in this file.
 
-## <small>1.5.4 (2026-05-18)</small>
+## Future Roadmap
 
-* fix: remove vscode ignore (#18) ([d537771](https://github.com/slverma/REST-Lab/commit/d537771)), closes [#18](https://github.com/slverma/REST-Lab/issues/18)
+- [ ] Request history
+- [ ] Pre-request scripts
+- [ ] Test scripts / assertions
+- [ ] Code generation (JS fetch, Python requests, curl, etc.)
+- [ ] OAuth 2.0 (Client Credentials, Authorization Code + PKCE)
+- [ ] WebSocket support
+- [ ] GraphQL support
+- [ ] Response diff / compare
+- [ ] Mock server / request stubs
+- [ ] Team sync / shared collections
+- [x] Cookie support — send cookies with requests, view Set-Cookie response cookies
 
-## <small>1.5.3 (2026-05-18)</small>
+---
 
-* fix: build issue (#17) ([05bfe40](https://github.com/slverma/REST-Lab/commit/05bfe40)), closes [#17](https://github.com/slverma/REST-Lab/issues/17)
+## [Unreleased]
 
-## <small>1.5.2 (2026-05-18)</small>
+### Added
 
-* fix: deployment issue (#15) ([1138d19](https://github.com/slverma/REST-Lab/commit/1138d19)), closes [#15](https://github.com/slverma/REST-Lab/issues/15)
+#### First Launch Seed
 
-## <small>1.5.1 (2026-05-18)</small>
+- **Example collection on first install** — REST Lab now seeds a "JSONPlaceholder Examples" collection with pre-built requests on first launch
+  - Includes common endpoints: GET users, GET posts, POST post, PUT post, DELETE post
+  - Seed is transactional: automatically rolls back all `globalState` writes if any step fails
+  - Runs only once — skipped if any collections already exist
 
-* fix: include dist/ in vsix package by overriding .gitignore (#14) ([86f765e](https://github.com/slverma/REST-Lab/commit/86f765e)), closes [#14](https://github.com/slverma/REST-Lab/issues/14)
+### Changed
 
-## 1.5.0 (2026-05-17)
+#### Fluid Layout
 
-* feat: add cookie support for requests and responses (#13) ([8486f6b](https://github.com/slverma/REST-Lab/commit/8486f6b)), closes [#13](https://github.com/slverma/REST-Lab/issues/13)
+- **Fluid spacing and typography tokens** — Added `--rl-*` CSS custom properties for viewport-responsive sizing throughout the request editor
+  - Replaced fixed `px`-based font-shrink media query overrides with continuous fluid scaling
+  - Applied to request bar controls, key-value rows, and the response section
+- **Scrollable tab strip with fade edges** — Tab strip now scrolls horizontally when tabs overflow, with fade-out indicators on both ends signalling hidden content
+- **Fluid URL input** — URL bar grows vertically with content (`min-height` + vertical padding via `useAutoGrow`)
 
-## 1.4.0 (2026-05-17)
+#### Sidebar CSS Rewrite
 
-* feat: add Basic Auth and API Key authentication types and fix action pipeline (#12) ([228bc6c](https://github.com/slverma/REST-Lab/commit/228bc6c)), closes [#12](https://github.com/slverma/REST-Lab/issues/12)
+- **Custom `sidebar.css`** — Replaced all Tailwind utility classes in the sidebar bundle with semantic, maintainable CSS
+  - `FolderActionsDropdown`, `ImportDropdown`, `RequestActionsDropdown`, `Sidebar.tsx` — Tailwind utility strings fully removed
+  - Sidebar bundle now loads `sidebar.css` exclusively with no Tailwind dependency
 
-## 1.3.0 (2026-05-17)
+---
 
-* feat: add Auth tab to request editor with inherit/bearer/none modes ([b546036](https://github.com/slverma/REST-Lab/commit/b546036))
-* feat: add AuthConfig type to RequestConfig, FolderConfig, and InheritedConfig ([0f09621](https://github.com/slverma/REST-Lab/commit/0f09621))
-* feat: add Authentication section to folder/collection editor ([cfcc9e0](https://github.com/slverma/REST-Lab/commit/cfcc9e0))
-* feat: add Basic Auth and API Key authentication types (#10) ([27328b7](https://github.com/slverma/REST-Lab/commit/27328b7)), closes [#10](https://github.com/slverma/REST-Lab/issues/10)
-* feat: add Basic Auth and API Key authentication types (#11) ([4b5a2d9](https://github.com/slverma/REST-Lab/commit/4b5a2d9)), closes [#11](https://github.com/slverma/REST-Lab/issues/11)
-* feat: add EyeIcon component for response hide/show toggle ([43e6cd3](https://github.com/slverma/REST-Lab/commit/43e6cd3))
-* feat: add isSmallScreen auto-layout and isResponseHidden state to context ([4cc0947](https://github.com/slverma/REST-Lab/commit/4cc0947))
-* feat: add resolveAuthToken helper ([dfbc491](https://github.com/slverma/REST-Lab/commit/dfbc491))
-* feat: add styles for response hide panel and response header actions ([ac2d1ef](https://github.com/slverma/REST-Lab/commit/ac2d1ef))
-* feat: create AuthTab component for request editor ([2bdab47](https://github.com/slverma/REST-Lab/commit/2bdab47))
-* feat: create ResponsePanel component with layout toggle and hide button ([119aef2](https://github.com/slverma/REST-Lab/commit/119aef2))
-* feat: include auth in configLoaded message from RequestEditorProvider ([af193b6](https://github.com/slverma/REST-Lab/commit/af193b6))
-* feat: inject resolved Bearer auth header into request execution and cURL export ([d18abd0](https://github.com/slverma/REST-Lab/commit/d18abd0))
-* feat: resolve auth in getInheritedConfig (child overrides parent) ([5991dc2](https://github.com/slverma/REST-Lab/commit/5991dc2))
-* feat: use close icon for hide response button ([957fa1d](https://github.com/slverma/REST-Lab/commit/957fa1d))
-* Chore/release v1.2.5 (#9) ([bd3bfae](https://github.com/slverma/REST-Lab/commit/bd3bfae)), closes [#9](https://github.com/slverma/REST-Lab/issues/9)
-* Merge pull request #7 from slverma/feat/response-panel-improvements ([c7e1920](https://github.com/slverma/REST-Lab/commit/c7e1920)), closes [#7](https://github.com/slverma/REST-Lab/issues/7)
-* Merge pull request #8 from slverma/feat/bearer-auth ([cccddac](https://github.com/slverma/REST-Lab/commit/cccddac)), closes [#8](https://github.com/slverma/REST-Lab/issues/8)
-* fix: auth config takes priority over manual Authorization header ([7165928](https://github.com/slverma/REST-Lab/commit/7165928))
-* fix: enable clipboard paste in Monaco find widget (Ctrl+F search) ([4e4701f](https://github.com/slverma/REST-Lab/commit/4e4701f))
-* fix: hide response closes the full panel (resets on next request) ([d33a1f5](https://github.com/slverma/REST-Lab/commit/d33a1f5))
-* fix: improve find widget paste - direct input manipulation, cleanup, debug logging ([5ee168a](https://github.com/slverma/REST-Lab/commit/5ee168a))
-* fix: rename auth option label to 'inherit from parent' ([2597abd](https://github.com/slverma/REST-Lab/commit/2597abd))
-* fix: standardize EyeIcon size to 16x16 ([2d5e351](https://github.com/slverma/REST-Lab/commit/2d5e351))
-* chore: exclude scripts from tsc, upgrade Node to 22, add deploy script and CLAUDE.md ([d78de43](https://github.com/slverma/REST-Lab/commit/d78de43))
-* docs: add bearer auth design spec ([2aa9aec](https://github.com/slverma/REST-Lab/commit/2aa9aec))
-* docs: add bearer auth implementation plan ([e5eea1b](https://github.com/slverma/REST-Lab/commit/e5eea1b))
-* docs: add implementation plan for response panel improvements ([8d4c121](https://github.com/slverma/REST-Lab/commit/8d4c121))
-* enh: add file ignore ([bcd2945](https://github.com/slverma/REST-Lab/commit/bcd2945))
-* refactor: extract response content helpers to remove duplication in ResponsePanel ([042a4ac](https://github.com/slverma/REST-Lab/commit/042a4ac))
-* refactor: use ResponsePanel component, remove layout toggle from request-bar ([c0f9642](https://github.com/slverma/REST-Lab/commit/c0f9642))
+## 1.5.5 (2026-06-05)
 
-# Changelog
+- fix: bundle issue (#16) ([488bfd1](https://github.com/slverma/REST-Lab/commit/488bfd1))
 
-All notable changes to the REST Lab extension will be documented in this file.
+## 1.5.4 (2026-05-18)
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+- fix: remove vscode ignore (#18) ([d537771](https://github.com/slverma/REST-Lab/commit/d537771))
 
-## Future Roadmap
+## 1.5.3 (2026-05-18)
 
-The following features are being considered for future releases:
+- fix: build issue (#17) ([05bfe40](https://github.com/slverma/REST-Lab/commit/05bfe40))
 
-- [ ] Request history
-- [ ] Pre-request scripts
-- [ ] Test scripts / assertions
-- [ ] Code generation (JS fetch, Python requests, curl, etc.)
-- [ ] OAuth 2.0 (Client Credentials, Authorization Code + PKCE)
-- [ ] WebSocket support
-- [ ] GraphQL support
-- [ ] Response diff / compare
-- [ ] Mock server / request stubs
-- [ ] Team sync / shared collections
-- [x] Cookie support — send cookies with requests, view Set-Cookie response cookies
+## 1.5.2 (2026-05-18)
 
----
+- fix: deployment issue (#15) ([1138d19](https://github.com/slverma/REST-Lab/commit/1138d19))
 
-## [Unreleased]
+## 1.5.1 (2026-05-18)
 
-### Added
+- fix: include dist/ in vsix package by overriding .gitignore (#14) ([86f765e](https://github.com/slverma/REST-Lab/commit/86f765e))
+
+## 1.5.0 (2026-05-17)
+
+- feat: add cookie support for requests and responses (#13) ([8486f6b](https://github.com/slverma/REST-Lab/commit/8486f6b))
+
+## 1.4.0 (2026-05-17)
+
+- feat: add Basic Auth and API Key authentication types and fix action pipeline (#12) ([228bc6c](https://github.com/slverma/REST-Lab/commit/228bc6c))
+
+## 1.3.0 (2026-05-17)
 
-#### Authentication — Basic Auth & API Key
-
-- **Basic Auth** — Username and password encoded as `Authorization: Basic base64(username:password)`
-  - Supports `{{variable}}` interpolation for both username and password
-  - Available on requests and folder/collection settings
-  - Inherits from parent folders like Bearer Token
-- **API Key** — Custom key/value pair injected into a header or query param
-  - "Add to" selector: Header (injects `Key: Value` header) or Query Param (appends `key=value` to URL)
-  - Supports `{{variable}}` interpolation for key and value
-  - Available on requests and folder/collection settings
-  - Inherits from parent folders
-- cURL export updated to include Basic Auth and API Key in generated commands
-
-#### Cookie Support
-
-- **Request Cookies** — Add name/value cookie pairs in the new "Cookies" tab on any request
-  - Cookies are serialized as `Cookie: name=value; name2=value2` header when sending
-  - Supports `{{variable}}` interpolation for cookie names and values
-  - Enable/disable individual cookies with checkboxes
-  - Saved with the request, so cookies persist between sessions
-- **Response Cookies** — Set-Cookie headers from responses are parsed and displayed in a "Cookies" tab on the response panel
-  - Shows name, value, Path, HttpOnly, and Secure attributes
-  - Badge on the Cookies tab shows the number of cookies received
+- feat: add Auth tab to request editor with inherit/bearer/none modes ([b546036](https://github.com/slverma/REST-Lab/commit/b546036))
+- feat: add Basic Auth and API Key authentication types (#10, #11) ([27328b7](https://github.com/slverma/REST-Lab/commit/27328b7))
+- feat: create ResponsePanel component with layout toggle and hide button ([119aef2](https://github.com/slverma/REST-Lab/commit/119aef2))
+- feat: inject resolved Bearer auth header into request execution and cURL export ([d18abd0](https://github.com/slverma/REST-Lab/commit/d18abd0))
+- fix: auth config takes priority over manual Authorization header ([7165928](https://github.com/slverma/REST-Lab/commit/7165928))
+- fix: enable clipboard paste in Monaco find widget ([4e4701f](https://github.com/slverma/REST-Lab/commit/4e4701f))
 
 ---
 
@@ -261,7 +233,7 @@ The following features are being considered for future releases:
 
 ---
 
-## [0.0.5] 15-01-2026
+## [0.0.5] - 2026-01-15
 
 ### Added
 
diff --git a/package.json b/package.json
index 06aa2e2..eaaaadc 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,8 @@
     "fetchclient",
     "restclient",
     "rest client",
+    "rest lab",
+    "restlab",
     "http request",
     "api client",
     "graphql",
diff --git a/scripts/build.mts b/scripts/build.mts
index 303cb1d..107cdf8 100644
--- a/scripts/build.mts
+++ b/scripts/build.mts
@@ -12,9 +12,9 @@ const isProd = process.env.NODE_ENV === "production";
 const extensionConfig: InlineConfig = {
   configFile: false,
   root: rootDir,
-  // node_modules/ is excluded from the vsix; these must be bundled into extension.js
+  // node_modules/ is excluded from the vsix; everything must be bundled into extension.js
   ssr: {
-    noExternal: ["axios", "form-data"],
+    noExternal: true,
   },
   build: {
     lib: {