Fix multipart tab value

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

crates/yaak-git/index.ts

@@ -6,6 +6,7 @@ import { useMemo } from 'react';
 import { BranchDeleteResult, CloneResult, GitCommit, GitRemote, GitStatusSummary, PullResult, PushResult } from './bindings/gen_git';
 
 export * from './bindings/gen_git';
+export * from './bindings/gen_models';
 
 export interface GitCredentials {
   username: string;

crates/yaak-http/src/sender.rs

@@ -31,7 +31,14 @@ pub enum HttpResponseEvent {
     },
     SendUrl {
         method: String,
+        scheme: String,
+        username: String,
+        password: String,
+        host: String,
+        port: u16,
         path: String,
+        query: String,
+        fragment: String,
     },
     ReceiveUrl {
         version: Version,
@@ -65,7 +72,16 @@ impl Display for HttpResponseEvent {
                 };
                 write!(f, "* Redirect {} -> {} ({})", status, url, behavior_str)
             }
-            HttpResponseEvent::SendUrl { method, path } => write!(f, "> {} {}", method, path),
+            HttpResponseEvent::SendUrl { method, scheme, username, password, host, port, path, query, fragment } => {
+                let auth_str = if username.is_empty() && password.is_empty() {
+                    String::new()
+                } else {
+                    format!("{}:{}@", username, password)
+                };
+                let query_str = if query.is_empty() { String::new() } else { format!("?{}", query) };
+                let fragment_str = if fragment.is_empty() { String::new() } else { format!("#{}", fragment) };
+                write!(f, "> {} {}://{}{}:{}{}{}{}", method, scheme, auth_str, host, port, path, query_str, fragment_str)
+            }
             HttpResponseEvent::ReceiveUrl { version, status } => {
                 write!(f, "< {} {}", version_to_str(version), status)
             }
@@ -104,7 +120,9 @@ impl From<HttpResponseEvent> for yaak_models::models::HttpResponseEventData {
                     RedirectBehavior::DropBody => "drop_body".to_string(),
                 },
             },
-            HttpResponseEvent::SendUrl { method, path } => D::SendUrl { method, path },
+            HttpResponseEvent::SendUrl { method, scheme, username, password, host, port, path, query, fragment } => {
+                D::SendUrl { method, scheme, username, password, host, port, path, query, fragment }
+            }
             HttpResponseEvent::ReceiveUrl { version, status } => {
                 D::ReceiveUrl { version: format!("{:?}", version), status }
             }
@@ -415,8 +433,15 @@ impl HttpSender for ReqwestSender {
         ));
 
         send_event(HttpResponseEvent::SendUrl {
-            path: sendable_req.url().path().to_string(),
             method: sendable_req.method().to_string(),
+            scheme: sendable_req.url().scheme().to_string(),
+            username: sendable_req.url().username().to_string(),
+            password: sendable_req.url().password().unwrap_or_default().to_string(),
+            host: sendable_req.url().host_str().unwrap_or_default().to_string(),
+            port: sendable_req.url().port_or_known_default().unwrap_or(0),
+            path: sendable_req.url().path().to_string(),
+            query: sendable_req.url().query().unwrap_or_default().to_string(),
+            fragment: sendable_req.url().fragment().unwrap_or_default().to_string(),
         });
 
         let mut request_headers = Vec::new();

crates/yaak-models/bindings/gen_models.ts

@@ -49,7 +49,7 @@ export type HttpResponseEvent = { model: "http_response_event", id: string, crea
  * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
  * The `From` impl is in yaak-http to avoid circular dependencies.
  */
-export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, } | { "type": "dns_resolved", hostname: string, addresses: Array<string>, duration: bigint, overridden: boolean, };
+export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, scheme: string, username: string, password: string, host: string, port: number, path: string, query: string, fragment: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, } | { "type": "dns_resolved", hostname: string, addresses: Array<string>, duration: bigint, overridden: boolean, };
 
 export type HttpResponseHeader = { name: string, value: string, };
 

crates/yaak-models/src/models.rs

@@ -1495,7 +1495,21 @@ pub enum HttpResponseEventData {
     },
     SendUrl {
         method: String,
+        #[serde(default)]
+        scheme: String,
+        #[serde(default)]
+        username: String,
+        #[serde(default)]
+        password: String,
+        #[serde(default)]
+        host: String,
+        #[serde(default)]
+        port: u16,
         path: String,
+        #[serde(default)]
+        query: String,
+        #[serde(default)]
+        fragment: String,
     },
     ReceiveUrl {
         version: String,

package-lock.json

@@ -807,6 +807,21 @@
         "@lezer/xml": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-yaml": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.2.tgz",
+      "integrity": "sha512-dxrfG8w5Ce/QbT7YID7mWZFKhdhsaTNOYjOkSIMt1qmC4VQnXSDSYVHHHn8k6kJUfIhtLo8t1JJgltlxWdsITw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.2.0",
+        "@lezer/lr": "^1.0.0",
+        "@lezer/yaml": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/language": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz",
@@ -832,6 +847,19 @@
         "crelt": "^1.0.5"
       }
     },
+    "node_modules/@codemirror/merge": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.11.2.tgz",
+      "integrity": "sha512-NO5EJd2rLRbwVWLgMdhIntDIhfDtMOKYEZgqV5WnkNUS2oXOCVWLPjG/kgl/Jth2fGiOuG947bteqxP9nBXmMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/highlight": "^1.0.0",
+        "style-mod": "^4.1.0"
+      }
+    },
     "node_modules/@codemirror/search": {
       "version": "6.5.11",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz",
@@ -1614,6 +1642,17 @@
         "@lezer/lr": "^1.0.0"
       }
     },
+    "node_modules/@lezer/yaml": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.3.tgz",
+      "integrity": "sha512-GuBLekbw9jDBDhGur82nuwkxKQ+a3W5H0GfaAthDXcAu+XdpS43VlnxA9E9hllkpSP5ellRDKjLLj7Lu9Wr6xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.4.0"
+      }
+    },
     "node_modules/@marijn/find-cluster-break": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
@@ -7811,9 +7850,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.4.tgz",
-      "integrity": "sha512-U7tt8JsyrxSRKspfhtLET79pU8K+tInj5QZXs1jSugO1Vq5dFj3kmZsRldo29mTBfcjDRVRXrEZ6LS63Cog9ZA==",
+      "version": "4.11.7",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.7.tgz",
+      "integrity": "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==",
       "license": "MIT",
       "engines": {
         "node": ">=16.9.0"
@@ -15721,7 +15760,7 @@
     },
     "packages/plugin-runtime-types": {
       "name": "@yaakapp/api",
-      "version": "0.7.1",
+      "version": "0.8.0",
       "dependencies": {
         "@types/node": "^24.0.13"
       },
@@ -15743,7 +15782,7 @@
         "@hono/mcp": "^0.2.3",
         "@hono/node-server": "^1.19.7",
         "@modelcontextprotocol/sdk": "^1.25.2",
-        "hono": "^4.11.4",
+        "hono": "^4.11.7",
         "zod": "^3.25.76"
       },
       "devDependencies": {
@@ -15984,7 +16023,9 @@
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.2",
         "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/language": "^6.11.0",
+        "@codemirror/merge": "^6.11.2",
         "@codemirror/search": "^6.5.11",
         "@dnd-kit/core": "^6.3.1",
         "@gilbarbara/deep-equal": "^0.3.1",

packages/plugin-runtime-types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaakapp/api",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "keywords": [
     "api-client",
     "insomnia-alternative",

plugins-external/mcp-server/package.json

@@ -18,7 +18,7 @@
     "@hono/mcp": "^0.2.3",
     "@hono/node-server": "^1.19.7",
     "@modelcontextprotocol/sdk": "^1.25.2",
-    "hono": "^4.11.4",
+    "hono": "^4.11.7",
     "zod": "^3.25.76"
   },
   "devDependencies": {

plugins/auth-basic/package.json

@@ -11,6 +11,7 @@
   "version": "0.1.0",
   "scripts": {
     "build": "yaakcli build",
-    "dev": "yaakcli dev"
+    "dev": "yaakcli dev",
+    "test": "vitest --run tests"
   }
 }

plugins/auth-basic/src/index.ts

@@ -21,7 +21,8 @@ export const plugin: PluginDefinition = {
       },
     ],
     async onApply(_ctx, { values }) {
-      const { username, password } = values;
+      const username = values.username ?? '';
+      const password = values.password ?? '';
       const value = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
       return { setHeaders: [{ name: 'Authorization', value }] };
     },

plugins/auth-basic/tests/index.test.ts

@@ -0,0 +1,77 @@
+import type { Context } from '@yaakapp/api';
+import { describe, expect, test } from 'vitest';
+import { plugin } from '../src';
+
+const ctx = {} as Context;
+
+describe('auth-basic', () => {
+  test('Both username and password', async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { username: 'user', password: 'pass' },
+        headers: [],
+        url: 'https://yaak.app',
+        method: 'POST',
+        contextId: '111',
+      }),
+    ).toEqual({
+      setHeaders: [{ name: 'Authorization', value: `Basic ${Buffer.from('user:pass').toString('base64')}` }],
+    });
+  });
+
+  test('Empty password', async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { username: 'apikey', password: '' },
+        headers: [],
+        url: 'https://yaak.app',
+        method: 'POST',
+        contextId: '111',
+      }),
+    ).toEqual({
+      setHeaders: [{ name: 'Authorization', value: `Basic ${Buffer.from('apikey:').toString('base64')}` }],
+    });
+  });
+
+  test('Missing password (undefined)', async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { username: 'apikey' },
+        headers: [],
+        url: 'https://yaak.app',
+        method: 'POST',
+        contextId: '111',
+      }),
+    ).toEqual({
+      setHeaders: [{ name: 'Authorization', value: `Basic ${Buffer.from('apikey:').toString('base64')}` }],
+    });
+  });
+
+  test('Missing username (undefined)', async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: { password: 'secret' },
+        headers: [],
+        url: 'https://yaak.app',
+        method: 'POST',
+        contextId: '111',
+      }),
+    ).toEqual({
+      setHeaders: [{ name: 'Authorization', value: `Basic ${Buffer.from(':secret').toString('base64')}` }],
+    });
+  });
+
+  test('No values (both undefined)', async () => {
+    expect(
+      await plugin.authentication?.onApply(ctx, {
+        values: {},
+        headers: [],
+        url: 'https://yaak.app',
+        method: 'POST',
+        contextId: '111',
+      }),
+    ).toEqual({
+      setHeaders: [{ name: 'Authorization', value: `Basic ${Buffer.from(':').toString('base64')}` }],
+    });
+  });
+});

plugins/themes-yaak/src/themes/synthwave-84.ts

@@ -19,9 +19,6 @@ export const synthwave84: Theme = {
     danger: 'hsl(340, 100%, 65%)',
   },
   components: {
-    dialog: {
-      surface: 'hsl(253, 45%, 12%)',
-    },
     sidebar: {
       surface: 'hsl(253, 42%, 18%)',
       border: 'hsl(253, 40%, 22%)',

src-web/components/HttpResponseTimeline.tsx

@@ -149,14 +149,27 @@ function EventDetails({
       );
     }
 
-    // Request URL - show method and path separately
+    // Request URL - show all URL parts separately
     if (e.type === 'send_url') {
+      const auth = e.username || e.password ? `${e.username}:${e.password}@` : '';
+      const isDefaultPort =
+        (e.scheme === 'http' && e.port === 80) || (e.scheme === 'https' && e.port === 443);
+      const portStr = isDefaultPort ? '' : `:${e.port}`;
+      const query = e.query ? `?${e.query}` : '';
+      const fragment = e.fragment ? `#${e.fragment}` : '';
+      const fullUrl = `${e.scheme}://${auth}${e.host}${portStr}${e.path}${query}${fragment}`;
       return (
         <KeyValueRows>
-          <KeyValueRow label="Method">
-            <HttpMethodTagRaw forceColor method={e.method} />
-          </KeyValueRow>
+          <KeyValueRow label="URL">{fullUrl}</KeyValueRow>
+          <KeyValueRow label="Method">{e.method}</KeyValueRow>
+          <KeyValueRow label="Scheme">{e.scheme}</KeyValueRow>
+          {e.username ? <KeyValueRow label="Username">{e.username}</KeyValueRow> : null}
+          {e.password ? <KeyValueRow label="Password">{e.password}</KeyValueRow> : null}
+          <KeyValueRow label="Host">{e.host}</KeyValueRow>
+          {!isDefaultPort ? <KeyValueRow label="Port">{e.port}</KeyValueRow> : null}
           <KeyValueRow label="Path">{e.path}</KeyValueRow>
+          {e.query ? <KeyValueRow label="Query">{e.query}</KeyValueRow> : null}
+          {e.fragment ? <KeyValueRow label="Fragment">{e.fragment}</KeyValueRow> : null}
         </KeyValueRows>
       );
     }
@@ -244,7 +257,10 @@ type EventTextParts = { prefix: '>' | '<' | '*'; text: string };
 function getEventTextParts(event: HttpResponseEventData): EventTextParts {
   switch (event.type) {
     case 'send_url':
-      return { prefix: '>', text: `${event.method} ${event.path}` };
+      return {
+        prefix: '>',
+        text: `${event.method} ${event.path}${event.query ? `?${event.query}` : ''}${event.fragment ? `#${event.fragment}` : ''}`,
+      };
     case 'receive_url':
       return { prefix: '<', text: `${event.version} ${event.status}` };
     case 'header_up':
@@ -265,9 +281,15 @@ function getEventTextParts(event: HttpResponseEventData): EventTextParts {
       return { prefix: '*', text: `[${formatBytes(event.bytes)} received]` };
     case 'dns_resolved':
       if (event.overridden) {
-        return { prefix: '*', text: `DNS override ${event.hostname} -> ${event.addresses.join(', ')}` };
+        return {
+          prefix: '*',
+          text: `DNS override ${event.hostname} -> ${event.addresses.join(', ')}`,
+        };
       }
-      return { prefix: '*', text: `DNS resolved ${event.hostname} to ${event.addresses.join(', ')} (${event.duration}ms)` };
+      return {
+        prefix: '*',
+        text: `DNS resolved ${event.hostname} to ${event.addresses.join(', ')} (${event.duration}ms)`,
+      };
     default:
       return { prefix: '*', text: '[unknown event]' };
   }
@@ -314,7 +336,7 @@ function getEventDisplay(event: HttpResponseEventData): EventDisplay {
         icon: 'arrow_big_up_dash',
         color: 'primary',
         label: 'Request',
-        summary: `${event.method} ${event.path}`,
+        summary: `${event.method} ${event.path}${event.query ? `?${event.query}` : ''}${event.fragment ? `#${event.fragment}` : ''}`,
       };
     case 'receive_url':
       return {

src-web/components/core/Editor/DiffViewer.css

@@ -0,0 +1,39 @@
+.cm-wrapper.cm-multiline .cm-mergeView {
+  @apply h-full w-full overflow-auto pr-0.5;
+
+  .cm-mergeViewEditors {
+    @apply w-full min-h-full;
+  }
+
+  .cm-mergeViewEditor {
+    @apply w-full min-h-full relative;
+
+    .cm-collapsedLines {
+      @apply bg-none bg-surface border border-border py-1 mx-0.5 text-text opacity-80 hover:opacity-100 rounded cursor-default;
+    }
+  }
+
+  .cm-line {
+    @apply pl-1.5;
+  }
+  .cm-changedLine {
+    /* Round top corners only if previous line is not a changed line */
+    &:not(.cm-changedLine + &) {
+      @apply rounded-t;
+    }
+    /* Round bottom corners only if next line is not a changed line */
+    &:not(:has(+ .cm-changedLine)) {
+      @apply rounded-b;
+    }
+  }
+
+  /* Let content grow and disable individual scrolling for sync */
+  .cm-editor {
+    @apply h-auto relative !important;
+    position: relative !important;
+  }
+
+  .cm-scroller {
+    @apply overflow-visible !important;
+  }
+}

src-web/components/core/Editor/DiffViewer.tsx

@@ -0,0 +1,64 @@
+import { yaml } from '@codemirror/lang-yaml';
+import { syntaxHighlighting } from '@codemirror/language';
+import { MergeView } from '@codemirror/merge';
+import { EditorView } from '@codemirror/view';
+import classNames from 'classnames';
+import { useEffect, useRef } from 'react';
+import './DiffViewer.css';
+import { readonlyExtensions, syntaxHighlightStyle } from './extensions';
+
+interface Props {
+  /** Original/previous version (left side) */
+  original: string;
+  /** Modified/current version (right side) */
+  modified: string;
+  className?: string;
+}
+
+export function DiffViewer({ original, modified, className }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<MergeView | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Clean up previous instance
+    viewRef.current?.destroy();
+
+    const sharedExtensions = [
+      yaml(),
+      syntaxHighlighting(syntaxHighlightStyle),
+      ...readonlyExtensions,
+      EditorView.lineWrapping,
+    ];
+
+    viewRef.current = new MergeView({
+      a: {
+        doc: original,
+        extensions: sharedExtensions,
+      },
+      b: {
+        doc: modified,
+        extensions: sharedExtensions,
+      },
+      parent: containerRef.current,
+      collapseUnchanged: { margin: 2, minSize: 3 },
+      highlightChanges: false,
+      gutter: true,
+      orientation: 'a-b',
+      revertControls: undefined,
+    });
+
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = null;
+    };
+  }, [original, modified]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames('cm-wrapper cm-multiline h-full w-full', className)}
+    />
+  );
+}

src-web/components/core/Editor/Editor.css

@@ -101,8 +101,8 @@
 
     .template-tag {
       /* Colors */
-      @apply bg-surface text-text border-border-subtle whitespace-nowrap cursor-default;
-      @apply hover:border-border-subtle hover:text-text hover:bg-surface-highlight;
+      @apply bg-surface text-text-subtle border-border-subtle whitespace-nowrap cursor-default;
+      @apply hover:border-border hover:text-text hover:bg-surface-highlight;
 
       @apply inline border px-1 mx-[0.5px] rounded dark:shadow;
 

src-web/components/git/GitCommitDialog.tsx

@@ -1,3 +1,4 @@
+import { useCachedNode } from '@dnd-kit/core/dist/hooks/utilities';
 import type { GitStatusEntry } from '@yaakapp-internal/git';
 import { useGit } from '@yaakapp-internal/git';
 import type {
@@ -9,14 +10,16 @@ import type {
   Workspace,
 } from '@yaakapp-internal/models';
 import classNames from 'classnames';
-
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { modelToYaml } from '../../lib/diffYaml';
+import { isSubEnvironment } from '../../lib/model_util';
 import { resolvedModelName } from '../../lib/resolvedModelName';
 import { showErrorToast } from '../../lib/toast';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
 import type { CheckboxProps } from '../core/Checkbox';
 import { Checkbox } from '../core/Checkbox';
+import { DiffViewer } from '../core/Editor/DiffViewer';
 import { Icon } from '../core/Icon';
 import { InlineCode } from '../core/InlineCode';
 import { Input } from '../core/Input';
@@ -48,6 +51,7 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
   const [isPushing, setIsPushing] = useState(false);
   const [commitError, setCommitError] = useState<string | null>(null);
   const [message, setMessage] = useState<string>('');
+  const [selectedEntry, setSelectedEntry] = useState<GitStatusEntry | null>(null);
 
   const handleCreateCommit = async () => {
     setCommitError(null);
@@ -138,6 +142,35 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     return next(workspace, []);
   }, [workspace, internalEntries]);
 
+  const checkNode = useCallback(
+    (treeNode: CommitTreeNode) => {
+      const checked = nodeCheckedStatus(treeNode);
+      const newChecked = checked === 'indeterminate' ? true : !checked;
+      setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
+      // TODO: Also ensure parents are added properly
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const checkEntry = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
+      else add.mutate({ relaPaths: [entry.relaPath] });
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const handleSelectChild = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry === selectedEntry) {
+        setSelectedEntry(null);
+      } else {
+        setSelectedEntry(entry);
+      }
+    },
+    [selectedEntry],
+  );
+
   if (tree == null) {
     return null;
   }
@@ -146,77 +179,92 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     return <EmptyStateText>No changes since last commit</EmptyStateText>;
   }
 
-  const checkNode = (treeNode: CommitTreeNode) => {
-    const checked = nodeCheckedStatus(treeNode);
-    const newChecked = checked === 'indeterminate' ? true : !checked;
-    setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
-    // TODO: Also ensure parents are added properly
-  };
-
-  const checkEntry = (entry: GitStatusEntry) => {
-    if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
-    else add.mutate({ relaPaths: [entry.relaPath] });
-  };
-
   return (
-    <div className="grid grid-rows-1 h-full">
+    <div className="h-full px-2 pb-4">
       <SplitLayout
-        name="commit"
-        layout="vertical"
-        defaultRatio={0.3}
+        name="commit-horizontal"
+        layout="horizontal"
+        defaultRatio={0.6}
         firstSlot={({ style }) => (
-          <div style={style} className="h-full overflow-y-auto pb-3">
-            <TreeNodeChildren node={tree} depth={0} onCheck={checkNode} />
-            {externalEntries.find((e) => e.status !== 'current') && (
-              <>
-                <Separator className="mt-3 mb-1">External file changes</Separator>
-                {externalEntries.map((entry) => (
-                  <ExternalTreeNode
-                    key={entry.relaPath + entry.status}
-                    entry={entry}
-                    onCheck={checkEntry}
+          <div style={style} className="h-full px-4">
+            <SplitLayout
+              name="commit-vertical"
+              layout="vertical"
+              defaultRatio={0.35}
+              firstSlot={({ style: innerStyle }) => (
+                <div
+                  style={innerStyle}
+                  className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
+                >
+                  <TreeNodeChildren
+                    node={tree}
+                    depth={0}
+                    onCheck={checkNode}
+                    onSelect={handleSelectChild}
+                    selectedPath={selectedEntry?.relaPath ?? null}
                   />
-                ))}
-              </>
-            )}
+                  {externalEntries.find((e) => e.status !== 'current') && (
+                    <>
+                      <Separator className="mt-3 mb-1">External file changes</Separator>
+                      {externalEntries.map((entry) => (
+                        <ExternalTreeNode
+                          key={entry.relaPath + entry.status}
+                          entry={entry}
+                          onCheck={checkEntry}
+                        />
+                      ))}
+                    </>
+                  )}
+                </div>
+              )}
+              secondSlot={({ style: innerStyle }) => (
+                <div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
+                  <Input
+                    className="!text-base font-sans rounded-md"
+                    placeholder="Commit message..."
+                    onChange={setMessage}
+                    stateKey={null}
+                    label="Commit message"
+                    fullHeight
+                    multiLine
+                    hideLabel
+                  />
+                  {commitError && <Banner color="danger">{commitError}</Banner>}
+                  <HStack alignItems="center">
+                    <InlineCode>{status.data?.headRefShorthand}</InlineCode>
+                    <HStack space={2} className="ml-auto">
+                      <Button
+                        color="secondary"
+                        size="sm"
+                        onClick={handleCreateCommit}
+                        disabled={!hasAddedAnything}
+                        isLoading={isPushing}
+                      >
+                        Commit
+                      </Button>
+                      <Button
+                        color="primary"
+                        size="sm"
+                        disabled={!hasAddedAnything}
+                        onClick={handleCreateCommitAndPush}
+                        isLoading={isPushing}
+                      >
+                        Commit and Push
+                      </Button>
+                    </HStack>
+                  </HStack>
+                </div>
+              )}
+            />
           </div>
         )}
         secondSlot={({ style }) => (
-          <div style={style} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
-            <Input
-              className="!text-base font-sans rounded-md"
-              placeholder="Commit message..."
-              onChange={setMessage}
-              stateKey={null}
-              label="Commit message"
-              fullHeight
-              multiLine
-              hideLabel
-            />
-            {commitError && <Banner color="danger">{commitError}</Banner>}
-            <HStack alignItems="center">
-              <InlineCode>{status.data?.headRefShorthand}</InlineCode>
-              <HStack space={2} className="ml-auto">
-                <Button
-                  color="secondary"
-                  size="sm"
-                  onClick={handleCreateCommit}
-                  disabled={!hasAddedAnything}
-                  isLoading={isPushing}
-                >
-                  Commit
-                </Button>
-                <Button
-                  color="primary"
-                  size="sm"
-                  disabled={!hasAddedAnything}
-                  onClick={handleCreateCommitAndPush}
-                  isLoading={isPushing}
-                >
-                  Commit and Push
-                </Button>
-              </HStack>
-            </HStack>
+          <div style={style} className="h-full px-4 border-l border-l-border-subtle">
+            {selectedEntry ? (
+              <DiffPanel entry={selectedEntry} />
+            ) : (
+              <EmptyStateText>Select a change to view diff</EmptyStateText>
+            )}
           </div>
         )}
       />
@@ -228,61 +276,77 @@ function TreeNodeChildren({
   node,
   depth,
   onCheck,
+  onSelect,
+  selectedPath,
 }: {
   node: CommitTreeNode | null;
   depth: number;
   onCheck: (node: CommitTreeNode, checked: boolean) => void;
+  onSelect: (entry: GitStatusEntry) => void;
+  selectedPath: string | null;
 }) {
   if (node === null) return null;
   if (!isNodeRelevant(node)) return null;
 
   const checked = nodeCheckedStatus(node);
+  const isSelected = selectedPath === node.status.relaPath;
+
   return (
     <div
       className={classNames(
-        depth > 0 && 'pl-1 ml-[10px] border-l border-dashed border-border-subtle',
+        depth > 0 && 'pl-4 ml-2 border-l border-dashed border-border-subtle relative',
       )}
     >
-      <div className="flex gap-3 w-full h-xs">
+      <div
+        className={classNames(
+          'relative flex gap-1 w-full h-xs items-center',
+          isSelected ? 'text-text' : 'text-text-subtle',
+        )}
+      >
+        {isSelected && (
+          <div className="absolute -left-[100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
+        )}
         <Checkbox
-          fullWidth
-          className="w-full hover:bg-surface-highlight rounded px-1 group"
           checked={checked}
+          title={checked ? 'Unstage change' : 'Stage change'}
+          hideLabel
           onChange={(checked) => onCheck(node, checked)}
-          title={
-            <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
-              {node.model.model !== 'http_request' &&
-              node.model.model !== 'grpc_request' &&
-              node.model.model !== 'websocket_request' ? (
-                <Icon
-                  color="secondary"
-                  icon={
-                    node.model.model === 'folder'
-                      ? 'folder'
-                      : node.model.model === 'environment'
-                        ? 'variable'
-                        : 'house'
-                  }
-                />
-              ) : (
-                <span aria-hidden />
-              )}
-              <div className="truncate">{resolvedModelName(node.model)}</div>
-              {node.status.status !== 'current' && (
-                <InlineCode
-                  className={classNames(
-                    'py-0 ml-auto bg-transparent w-[6rem] text-center',
-                    node.status.status === 'modified' && 'text-info',
-                    node.status.status === 'untracked' && 'text-success',
-                    node.status.status === 'removed' && 'text-danger',
-                  )}
-                >
-                  {node.status.status}
-                </InlineCode>
-              )}
-            </div>
-          }
         />
+        <button
+          type="button"
+          className={classNames('flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left')}
+          onClick={() => node.status.status !== 'current' && onSelect(node.status)}
+        >
+          {node.model.model !== 'http_request' &&
+          node.model.model !== 'grpc_request' &&
+          node.model.model !== 'websocket_request' ? (
+            <Icon
+              color="secondary"
+              icon={
+                node.model.model === 'folder'
+                  ? 'folder'
+                  : node.model.model === 'environment'
+                    ? 'variable'
+                    : 'house'
+              }
+            />
+          ) : (
+            <span aria-hidden className="w-4" />
+          )}
+          <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
+          {node.status.status !== 'current' && (
+            <InlineCode
+              className={classNames(
+                'py-0 bg-transparent w-[6rem] text-center shrink-0',
+                node.status.status === 'modified' && 'text-info',
+                node.status.status === 'untracked' && 'text-success',
+                node.status.status === 'removed' && 'text-danger',
+              )}
+            >
+              {node.status.status}
+            </InlineCode>
+          )}
+        </button>
       </div>
 
       {node.children.map((childNode) => {
@@ -292,6 +356,8 @@ function TreeNodeChildren({
             node={childNode}
             depth={depth + 1}
             onCheck={onCheck}
+            onSelect={onSelect}
+            selectedPath={selectedPath}
           />
         );
       })}
@@ -401,3 +467,17 @@ function isNodeRelevant(node: CommitTreeNode): boolean {
   // Recursively check children
   return node.children.some((c) => isNodeRelevant(c));
 }
+
+function DiffPanel({ entry }: { entry: GitStatusEntry }) {
+  const prevYaml = modelToYaml(entry.prev);
+  const nextYaml = modelToYaml(entry.next);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="text-sm text-text-subtle mb-2 px-1">
+        {resolvedModelName(entry.next ?? entry.prev)} ({entry.status})
+      </div>
+      <DiffViewer original={prevYaml ?? ''} modified={nextYaml ?? ''} className="flex-1 min-h-0" />
+    </div>
+  );
+}

src-web/components/git/GitDropdown.tsx

@@ -211,7 +211,7 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
           id: 'commit',
           title: 'Commit Changes',
           size: 'full',
-          className: '!max-h-[min(80vh,40rem)] !max-w-[min(50rem,90vw)]',
+          noPadding: true,
           render: ({ hide }) => (
             <GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
           ),

src-web/components/responseViewers/MultipartViewer.tsx

@@ -56,10 +56,10 @@ export function MultipartViewer({ data, boundary, idPrefix = 'multipart' }: Prop
       addBorders
       label="Multipart"
       layout="horizontal"
-      tabListClassName="border-r border-r-border"
-      tabs={parts.map((part) => ({
+      tabListClassName="border-r border-r-border -ml-3"
+      tabs={parts.map((part, i) => ({
         label: part.name ?? '',
-        value: part.name ?? '',
+        value: tabValue(part, i),
         rightSlot:
           part.filename && part.headers.contentType.mediaType?.startsWith('image/') ? (
             <div className="h-5 w-5 overflow-auto flex items-center justify-end">
@@ -77,7 +77,7 @@ export function MultipartViewer({ data, boundary, idPrefix = 'multipart' }: Prop
         <TabContent
           // biome-ignore lint/suspicious/noArrayIndexKey: Nothing else to key on
           key={idPrefix + part.name + i}
-          value={part.name ?? ''}
+          value={tabValue(part, i)}
           className="pl-3 !pt-0"
         >
           <Part part={part} />
@@ -115,7 +115,7 @@ function Part({ part }: { part: MultipartPart }) {
   }
 
   if (mimeType?.match(/csv|tab-separated/i)) {
-    return <CsvViewer text={content} />;
+    return <CsvViewer text={content} className="bg-primary h-10 w-10" />;
   }
 
   if (mimeType?.match(/^text\/html/i) || detectedLanguage === 'html') {
@@ -132,3 +132,7 @@ function Part({ part }: { part: MultipartPart }) {
 
   return <TextViewer text={content} language={detectedLanguage} stateKey={null} />;
 }
+
+function tabValue(part: MultipartPart, i: number) {
+  return `${part.name ?? ''}::${i}`;
+}

src-web/lib/diffYaml.ts

@@ -0,0 +1,15 @@
+import type { SyncModel } from '@yaakapp-internal/git';
+import { stringify } from 'yaml';
+
+/**
+ * Convert a SyncModel to a clean YAML string for diffing.
+ * Removes noisy fields like updatedAt that change on every edit.
+ */
+export function modelToYaml(model: SyncModel | null): string {
+  if (!model) return '';
+
+  return stringify(model, {
+    indent: 2,
+    lineWidth: 0,
+  });
+}

src-web/lib/theme/window.ts

@@ -104,11 +104,12 @@ function templateTagColorVariables(color: YaakColor | null): Partial<CSSVariable
   if (color == null) return {};
 
   return {
-    text: color.lift(0.6).css(),
+    text: color.lift(0.7).css(),
     textSubtle: color.lift(0.4).css(),
     textSubtlest: color.css(),
     surface: color.lower(0.2).translucify(0.8).css(),
-    border: color.lower(0.2).translucify(0.2).css(),
+    border: color.translucify(0.6).css(),
+    borderSubtle: color.translucify(0.8).css(),
     surfaceHighlight: color.lower(0.1).translucify(0.7).css(),
   };
 }
@@ -137,6 +138,16 @@ function bannerColorVariables(color: YaakColor | null): Partial<CSSVariables> {
   };
 }
 
+function inputCSS(color: YaakColor | null): Partial<CSSVariables> {
+  if (color == null) return {};
+
+  const theme: Partial<ThemeComponentColors> = {
+    border: color.css(),
+  };
+
+  return theme;
+}
+
 function buttonSolidColorVariables(
   color: YaakColor | null,
   isDefault = false,

src-web/package.json

@@ -14,7 +14,9 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.3.2",
     "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.11.0",
+    "@codemirror/merge": "^6.11.2",
     "@codemirror/search": "^6.5.11",
     "@dnd-kit/core": "^6.3.1",
     "@gilbarbara/deep-equal": "^0.3.1",