Interface tour

Annotated map of Signoff Studio windows and panels on Windows App v26.8.5 and VS Code Extension v0.2.58. Both hosts share the same React webview for API, Runner, and DB. Chrome around that shell differs by platform.

---

Welcome & first launch

• Platform Availability: Full Parity (Welcome dialog). Installer / Marketplace chrome is platform-specific.
• Overview: First open shows Welcome with Import Existing Project and Create Collection. You can dismiss it and return via Import or + New collection anytime.
• How It Works (Windows App):
  1. Launch Signoff Studio from the Start menu or Desktop shortcut.
  2. On Welcome, choose Import Existing Project (Starter Guide) or Create Collection.
  3. Workspaces default under

     Documents\Signoff Studio\

     .

• How It Works (VS Code Extension):
  1. Click the Signoff Studio Activity Bar icon.
  2. Use the sidebar welcome (Open Signoff Studio) or Command Palette → Signoff Studio: Open.
  3. The same Welcome dialog appears inside the editor webview.

• Code / Configuration Examples:

Documents\Signoff Studio\<workspace-name>\
  signoff-workspace.json
  collections\
  environments\

• Edge Cases, Troubleshooting & Pro-Tips:
  • Closing Welcome does not delete data; it only hides the dialog.
  • If the webview is blank after update, reload the window (VS Code) or restart the app (Windows).
  • Prefer importing the Starter Guide before building your own collection.

---

Top bar & mode tabs

• Platform Availability: API / Runner / DB — Full Parity. Git — Windows Only.
• Overview: The top bar switches product modes and surfaces workspace, environment, Import, Logs, Help, and Settings. A dirty ● marker appears when the open request or workspace has unsaved edits.
• How It Works (Windows App):
  1. Use mode tabs: API, Runner, DB, Git.
  2. Open the workspace menu for New / Open / Import / Manage / Switch.
  3. Use the environment globe to pick the active env for

     {{variable}}

     resolution.

• How It Works (VS Code Extension):
  1. Open the webview; use API, Runner, and DB only (no Git tab).
  2. Workspace actions mirror the Windows menu and also appear as Command Palette commands.
  3. VS Code theme tokens bridge into the webview for visual consistency.

• Code / Configuration Examples:

Modes: api | runner | database | git(Windows)
Active environment affects URL, headers, auth, and scripts.

• Edge Cases, Troubleshooting & Pro-Tips:
  • Unsaved dialogs block mode switches when a request would lose edits — save or discard first.
  • Schedules and monitors only fire while this UI is open; keep the Windows app running for always-on monitors.

GAP IDENTIFIED: The Git mode tab and native File / Edit / View / Help app menu exist only on Windows. In VS Code use the built-in Source Control view and Command Palette for host actions.

---

Collections sidebar & request tabs

• Platform Availability: Full Parity
• Overview: The left tree lists collections, folders, and requests. Opening a request creates a tab with Params, Auth, Headers, Body, Pre-request, Tests, and Settings. History lives in the footer.
• How It Works (Windows App):
  1. Expand a collection → folder → request.
  2. Right-click for Open, Run, Rename, Duplicate, Codegen, Examples, Reveal, Delete, and more.
  3. Collection tabs expose Overview, Variables, Auth, Scripts, Tests, Settings, Documentation.

• How It Works (VS Code Extension):
  1. Same tree and context menus inside the webview.
  2. Optionally run from the explorer context via Signoff Studio: Run Collection / Run Request.
  3. Reveal in File Explorer opens the on-disk workspace path from the host.

• Code / Configuration Examples:

{
  "name": "Signoff Studio Starter Guide",
  "items": [
    { "name": "01 - GET & Query", "type": "folder" }
  ]
}

• Edge Cases, Troubleshooting & Pro-Tips:
  • Duplicate vs Clone: Duplicate copies in-place; Clone can retarget destination folders.
  • Large trees: collapse folders (Ctrl+Shift+C in Runner selection UI) and use bottom Search.

---

Request builder & response viewer

• Platform Availability: Full Parity (UI). Restore Response Panel command — VS Code Only.
• Overview: Build REST and other protocols in the center pane; responses open in Pretty / Raw / Headers / Explorer / Checks (and Stream for live protocols). Save prompts protect unsaved work.
• How It Works (Windows App):
  1. Edit method + URL, then Params / Auth / Headers / Body.
  2. Press Ctrl+Enter or Send.
  3. Inspect Pretty JSON, run asserts, extract variables, or generate client code.

• How It Works (VS Code Extension):
  1. Same builder and response tabs in the editor webview.
  2. If the response pane was closed, run Signoff Studio: Restore Response Panel.
  3. Host zoom and editor font settings may differ from Windows appearance settings.

• Code / Configuration Examples:

GET {{baseUrl}}/get?product=signoff&suite={{suiteName}}
Authorization: Bearer {{token}}

• Edge Cases, Troubleshooting & Pro-Tips:
  • Binary / multipart bodies: use Binary or Multipart body modes, not Raw JSON.
  • SSL failures: toggle verification in Settings → General (Windows overlay) or request Settings tab for overrides.

---

Environments switcher & page

• Platform Availability: Full Parity
• Overview: The globe switcher selects the active environment. The Environments page manages Variables and Secrets with masking for committed files.
• How It Works (Windows App):
  1. Open the top-bar environment switcher and pick an env (e.g. httpbingo).
  2. Open the Environments page for CRUD, import, and secret fields.
  3. Reference values as

     {{name}}

     in URLs, headers, bodies, and scripts.

• How It Works (VS Code Extension):
  1. Same switcher and Environments page in the shared shell.
  2. Import Bruno / Postman / Signoff env files via Import → Environments.
  3. Secrets stay local; do not enable “include secrets in export” unless intentional.

• Code / Configuration Examples:

{
  "name": "httpbingo",
  "variables": [
    { "key": "baseUrl", "value": "https://httpbingo.org" },
    { "key": "suiteName", "value": "signoff-starter" }
  ]
}

• Edge Cases, Troubleshooting & Pro-Tips:
  • None selected → unresolved

    {{vars}}

    stay literal.
  • Precedence:

    --var

    / runtime overrides beat env JSON, which beats collection variables.

---

Runner workspace

• Platform Availability: Full Parity (Manual / CLI / Background). Scheduled monitors — Partial (desktop preferred for always-on).
• Overview: Runner executes a collection or folder plan with Run / Pause / Resume / Stop, live dashboard, inspector, reports, and history. Load and Monitors docks live here.
• How It Works (Windows App):
  1. Switch to Runner, pick collection/folder scope and environment.
  2. Configure iterations, delay, workers, bail, retries, and reporters.
  3. Run and open Report / History; use bottom Monitors for schedules.

• How It Works (VS Code Extension):
  1. Same Runner shell in the webview.
  2. Keep the Signoff panel open if any schedule must fire.
  3. Prefer the Windows Store app when monitors must outlive the IDE.

• Code / Configuration Examples:

npm run runner -- run -c ./Pets.signoff.json -e ./local.signoff.env.json \
  --reporters json,html,junit -i 1 -w 1 --bail -v

• Edge Cases, Troubleshooting & Pro-Tips:
  • Network errors should show a readable message and the endpoint URL — never a bare

    Cannot read properties of undefined (reading 'status')

    .
  • PDF reports need a Chromium-class browser on PATH or

    SIGNOFF_CHROME_PATH

    .

---

Database workbench

• Platform Availability: Full Parity
• Overview: DB mode connects to Sample, Postgres, MySQL, SQL Server, Oracle, or SQLite with a SQL editor, schema intel, multi-result grids, and export.
• How It Works (Windows App):
  1. Open DB, create or select a connection, Test, then connect.
  2. Write SQL; Ctrl+Enter runs the current statement.
  3. Use schema tree, transactions, kill session, and result export as needed.

• How It Works (VS Code Extension):
  1. Same workbench in the webview (runtime synced into the extension host).
  2. Credentials use the local vault — not VS Code Settings Sync secrets by default.
  3. Driver overlays can update/rollback independently of the extension patch version.

• Code / Configuration Examples:

SELECT id, name FROM pets WHERE status = 'available' LIMIT 20;

• Edge Cases, Troubleshooting & Pro-Tips:
  • Oracle / SQL Server often need extra client bits; read connection error text carefully.
  • Prefer read-only users for exploratory work against shared databases.

---

Bottom utility bar

• Platform Availability: Full Parity
• Overview: Search, Cookies, Console, Dev Tools, and Preferences sit under the main panes for cross-cutting diagnostics without leaving the current mode.
• How It Works (Windows App):
  1. Click Search to jump to requests by name/method/URL.
  2. Open Cookies / Console / Dev Tools after a send.
  3. Preferences controls console auto-open, preserve, compact, and telemetry ping.

• How It Works (VS Code Extension):
  1. Same utility bar in the webview.
  2. Cookie jar file path differs (

     ~/.signoff/http-cookies/vscode.json

     vs desktop path).
  3. Console help improve ping is anonymous (install id, version, OS) — no request bodies.

• Code / Configuration Examples: See Cookies & utilities.

• Edge Cases, Troubleshooting & Pro-Tips:

  • Enable Open console on errors when debugging flaky auth or TLS.
  • Clear cookies when a session cookie poisons subsequent requests.

---

VS Code host chrome

• Platform Availability: VS Code Only
• Overview: Activity Bar container, sidebar welcome, status bar entry, and ten Command Palette commands with no

  contributes.configuration

  and no contributed keybindings.
• How It Works (Windows App): N/A — use the native window and Settings overlay instead.
• How It Works (VS Code Extension):
  1. Activity Bar → Signoff Studio icon.
  2. Command Palette (

     Ctrl+Shift+P

     ) → type

     Signoff Studio

     .
  3. Status bar shows Signoff Studio when the extension is active.

• Code / Configuration Examples:

qasignoff.open
qasignoff.switchWorkspace
qasignoff.restoreResponsePanel
qasignoff.newWorkspace
qasignoff.openWorkspace
qasignoff.importWorkspace
qasignoff.manageWorkspaces
qasignoff.explorer.runCollection
qasignoff.explorer.runRequest
qasignoff.explorer.revealInExplorer

• Edge Cases, Troubleshooting & Pro-Tips:
  • There are no VS Code

    settings.json

    keys for Signoff — configure inside the webview / Preferences / Windows Settings overlay.
  • Bind your own keybindings in

    keybindings.json

    to these command IDs if desired.

GAP IDENTIFIED: VS Code does not contribute configuration or default keybindings. Desktop Settings overlay (proxy, certificates, updates, full AI providers UI) is Windows-first; VS Code relies on shared Preferences + AI surfaces inside the webview where available.

---

Related

• Install
• Settings
• Shortcuts
• Parity & gap report