From c0f75bcfc2de45d3dab6bb0f4c03f80c514bcdb7 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Tue, 10 Nov 2026 16:09:13 -0700 Subject: [PATCH] Yaak Proxy: square app icons beside long names, and the final uncovered why line App icons keep their square however a long app name squeezes them, in the card's buttons, the strip's Choose menu and the sidebar, and a long entry hint truncates instead of the button's label. A connection nothing on the list covers reads "Encrypted Content: Enable decryption to see requests to ", with the host as code. Co-Authored-By: Claude Opus 5.5 --- apps/yaak-proxy/components/AppIcon.tsx | 9 +++++++-- apps/yaak-proxy/components/EncryptedCard.tsx | 9 +++++++-- apps/yaak-proxy/components/HttpsStrip.tsx | 6 +++--- apps/yaak-proxy/components/Sidebar.tsx | 4 +++- apps/yaak-proxy/harness/httpsFixtures.ts | 7 +++++++ apps/yaak-proxy/lib/encryptedCard.test.ts | 8 +++++--- apps/yaak-proxy/lib/encryptedCard.ts | 21 +++++++++++++++----- 7 files changed, 48 insertions(+), 16 deletions(-) diff --git a/apps/yaak-proxy/components/AppIcon.tsx b/apps/yaak-proxy/components/AppIcon.tsx index c90b0a824..74f9b12e9 100644 --- a/apps/yaak-proxy/components/AppIcon.tsx +++ b/apps/yaak-proxy/components/AppIcon.tsx @@ -42,8 +42,13 @@ export function AppIcon({ path, className = "size-4" }: { path: string; classNam }, [path]); return url == null ? ( - + ) : ( - + // Square whatever squeezes it, beside text that truncates + ); } diff --git a/apps/yaak-proxy/components/EncryptedCard.tsx b/apps/yaak-proxy/components/EncryptedCard.tsx index 96db399d3..ec64cfab3 100644 --- a/apps/yaak-proxy/components/EncryptedCard.tsx +++ b/apps/yaak-proxy/components/EncryptedCard.tsx @@ -185,6 +185,11 @@ function LineText({ line }: { line: Line }) { typeof part === "string" ? ( // oxlint-disable-next-line react/no-array-index-key -- the parts of one fixed line {part} + ) : "bold" in part ? ( + // oxlint-disable-next-line react/no-array-index-key -- the parts of one fixed line + + {part.bold} + ) : ( // oxlint-disable-next-line react/no-array-index-key -- the parts of one fixed line {part.code} @@ -222,7 +227,7 @@ function ActionButton({ flow.clientPath == null ? ( ) : ( - + ) ) : ( @@ -241,7 +246,7 @@ function ActionButton({ action.hint == null ? undefined : ( diff --git a/apps/yaak-proxy/components/HttpsStrip.tsx b/apps/yaak-proxy/components/HttpsStrip.tsx index 632aa594e..8bbc5a399 100644 --- a/apps/yaak-proxy/components/HttpsStrip.tsx +++ b/apps/yaak-proxy/components/HttpsStrip.tsx @@ -77,9 +77,9 @@ export function HttpsStrip() { app.path == null ? ( app.name ) : ( - - - {app.name} + + + {app.name} ), keepOpenOnSelect: true, diff --git a/apps/yaak-proxy/components/Sidebar.tsx b/apps/yaak-proxy/components/Sidebar.tsx index 1d5f6d8b5..434a50833 100644 --- a/apps/yaak-proxy/components/Sidebar.tsx +++ b/apps/yaak-proxy/components/Sidebar.tsx @@ -85,7 +85,9 @@ function ItemInner({ item }: { item: SidebarItem }) { {item.kind === "encrypted" && } {item.kind === "saved" && } {item.kind === "folder" && } - {item.appPath != null && } + {item.appPath != null && ( + + )} {item.kind === "folder" && item.path != null ? ( // Named by its last part; the whole path on hover diff --git a/apps/yaak-proxy/harness/httpsFixtures.ts b/apps/yaak-proxy/harness/httpsFixtures.ts index 4fa7a659c..765165470 100644 --- a/apps/yaak-proxy/harness/httpsFixtures.ts +++ b/apps/yaak-proxy/harness/httpsFixtures.ts @@ -40,6 +40,12 @@ const apps = { clientBundleId: "com.1password.1password", clientPath: "/Applications/1Password.app", }, + headless: { + clientName: "chrome-headless-shell", + clientBundleId: null, + clientPath: + "/Users/you/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell", + }, acme: { clientName: "Acme Sync", clientBundleId: "dev.acme.sync", @@ -124,6 +130,7 @@ function encryptedScene(): Flow[] { tunnel(10, "fonts.gstatic.com", apps.dia), tunnel(11, "clients2.google.com", apps.chrome), tunnel(12, "home.taila714c.ts.net:8317", apps.dia, { url: "home.taila714c.ts.net:8317" }), + tunnel(13, "optimizationguide-pa.googleapis.com", apps.headless), ]; } diff --git a/apps/yaak-proxy/lib/encryptedCard.test.ts b/apps/yaak-proxy/lib/encryptedCard.test.ts index 69ea1f72a..c8ab5062d 100644 --- a/apps/yaak-proxy/lib/encryptedCard.test.ts +++ b/apps/yaak-proxy/lib/encryptedCard.test.ts @@ -90,7 +90,9 @@ describe("the card of an encrypted connection", () => { test("something else listed: not on the list, with the same choices", () => { const c = card({ list: [...user("host:api.stripe.com"), ...BUILT_INS] }); - expect(lineText(c.why)).toBe("Decryption not configured for `www.google.com`"); + expect(lineText(c.why)).toBe( + "**Encrypted Content:** Enable decryption to see requests to `www.google.com`", + ); expect(c.actions.map((a) => a.label)).toEqual([ "Decrypt www.google.com", "Decrypt Dia", @@ -108,10 +110,10 @@ describe("the card of an encrypted connection", () => { test("names the host nothing on the list covers, its port only when not 443", () => { const list = [...user("host:api.stripe.com"), ...BUILT_INS]; expect(lineText(card({ list, flow: { ...tunnel, url: "t.yaak.app:443" } }).why)).toBe( - "Decryption not configured for `t.yaak.app`", + "**Encrypted Content:** Enable decryption to see requests to `t.yaak.app`", ); expect(lineText(card({ list, flow: { ...tunnel, url: "home.ts.net:8317" } }).why)).toBe( - "Decryption not configured for `home.ts.net:8317`", + "**Encrypted Content:** Enable decryption to see requests to `home.ts.net:8317`", ); }); diff --git a/apps/yaak-proxy/lib/encryptedCard.ts b/apps/yaak-proxy/lib/encryptedCard.ts index dd3027a9d..3c86cc648 100644 --- a/apps/yaak-proxy/lib/encryptedCard.ts +++ b/apps/yaak-proxy/lib/encryptedCard.ts @@ -78,12 +78,19 @@ export interface CardAction { icon: "host" | "app" | "everything" | "lock" | "lock_open" | "refresh" | "shield" | "terminal"; } -/** A line of text, the hosts, apps and entries in it shown as code, as Yaak shows literal values */ -export type Line = (string | { code: string })[]; +/** + * A line of text, the hosts, apps and entries in it shown as code, as Yaak shows literal values, + * and a lead in bold + */ +export type Line = (string | { code: string } | { bold: string })[]; -/** A line as plain text, its code in backticks */ +/** A line as plain text, its code in backticks and its bold in asterisks */ export function lineText(line: Line): string { - return line.map((part) => (typeof part === "string" ? part : `\`${part.code}\``)).join(""); + return line + .map((part) => + typeof part === "string" ? part : "code" in part ? `\`${part.code}\`` : `**${part.bold}**`, + ) + .join(""); } export interface EncryptedCardModel { @@ -265,7 +272,11 @@ function whyLine( ? ["Nothing is decrypted yet"] : decryptsNow ? ["Not on the decrypt list"] - : ["Decryption not configured for ", { code: c.label }], + : [ + { bold: "Encrypted Content:" }, + " Enable decryption to see requests to ", + { code: c.label }, + ], whySub: null, }; }