Apply the execution-desk design system across Mail, RFQ and the app shell

src/app/components/AppShell.tsx

@@ -18,6 +18,16 @@ export default function AppShell({ renderLocalnetTools }: AppShellProps) {
   const mailActive = pathname.startsWith("/mail") || pathname === "/inbox";
   const rfqActive = pathname === "/rfq" || pathname.startsWith("/rfq/");
   const connected = walletMode === "privy" ? privyConnected : readyConnected;
+  const payActive = pathname === "/pay";
+  const moduleName = mailActive
+    ? "MAILBOX"
+    : payActive
+      ? "PAY"
+      : pathname === "/contacts"
+        ? "COUNTERPARTIES"
+        : rfqActive
+          ? "RFQ WORKSPACE"
+          : "APP20";
 
   return (
     <div
@@ -31,8 +41,11 @@ export default function AppShell({ renderLocalnetTools }: AppShellProps) {
           className={`signal-dot ${connected ? "is-live" : ""}`}
           aria-hidden="true"
         />
-        {connected ? "WALLET CONNECTED · PUBLIC-NETWORK RFQ DISABLED" : "APP20 RFQ WORKSPACE"}
-        <span>MAIL / PAY / FUNDING ARE SEPARATE · PUBLIC BOUNDARIES REMAIN CORRELATABLE</span>
+        {/* Live session state for the module you are actually in. It used to
+            name the RFQ workspace on every route, Mailbox included. */}
+        {connected
+          ? `${moduleName} · WALLET CONNECTED · PUBLIC-NETWORK RFQ DISABLED`
+          : `${moduleName} · NO WALLET CONNECTED`}
       </div>
       <header className="app-header">
         <Link
@@ -56,15 +69,11 @@ export default function AppShell({ renderLocalnetTools }: AppShellProps) {
           >
             Counterparties
           </Link>
-        </nav>
-        <div className="app-utilities">
-          <Link
-            className="request-link"
-            to="/pay"
-            aria-current={pathname === "/pay" ? "page" : undefined}
-          >
+          <Link to="/pay" aria-current={payActive ? "page" : undefined}>
             Pay
           </Link>
+        </nav>
+        <div className="app-utilities">
           <SessionControl />
         </div>
       </header>

src/app/components/session.module.css

@@ -86,9 +86,13 @@
   opacity: 0.6;
 }
 
+/* Which network is current is state, and the header already has one way of
+   marking current: the tab's inset accent rule. A solid accent block here also
+   sat flush against the connect button and read as one control. */
 .networkToggle .networkActive {
-  color: var(--shell-bg);
-  background: var(--shell-orange);
+  color: var(--shell-text);
+  background: var(--shell-inset);
+  box-shadow: inset 0 -2px var(--shell-orange);
 }
 
 .networkToggle span[role="status"] {

src/app/contacts/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Link } from "@tanstack/react-router";
+import SelectWallet from "@/app/components/client/WalletHandle/SelectWallet";
 import { useActiveStarknetSession } from "@/app/active-session";
 import { storeDeskHandoff } from "@/lib/desk-handoff";
 import { MAIL_RECOVERY_PHRASE_AUTHORITY_NOTICE } from "@/lib/mail-authority-copy";
@@ -243,8 +244,12 @@ function AddressBookPanel({
           <div className={styles.bookEmptyBlock}>
             <strong>Wallet required</strong>
             <p className={styles.bookEmpty}>
-              Connect a wallet to open this account's encrypted book.
+              The book is encrypted under the connected account, so it opens
+              only once a wallet is connected.
             </p>
+            <span className={styles.connectAction}>
+              <SelectWallet />
+            </span>
           </div>
         )}
       </div>

src/app/css-module-classes.test.ts

@@ -0,0 +1,53 @@
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * A CSS-module class that does not exist resolves to `undefined`: the element
+ * renders with no styling at all and the word "undefined" in its class list,
+ * with nothing to notice at build time. Two such references had left a page
+ * masthead and a form field unstyled before this guard existed.
+ */
+function componentFiles(): string[] {
+  return execFileSync("git", ["ls-files", "src/**/*.tsx"], {
+    encoding: "utf8",
+  })
+    .split("\n")
+    .filter(Boolean);
+}
+
+function definedClasses(cssPath: string): Set<string> {
+  const text = readFileSync(cssPath, "utf8");
+  const names = new Set<string>();
+  for (const match of text.matchAll(/\.([A-Za-z_][\w-]*)/g)) names.add(match[1]);
+  return names;
+}
+
+function resolveImport(fromFile: string, specifier: string): string {
+  if (specifier.startsWith("@/")) return resolve("src", specifier.slice(2));
+  return resolve(dirname(fromFile), specifier);
+}
+
+describe("CSS module references", () => {
+  it("only uses classes its stylesheet defines", () => {
+    const undefinedReferences: string[] = [];
+    for (const file of componentFiles()) {
+      const source = readFileSync(file, "utf8");
+      const importMatch = source.match(
+        /import\s+styles\s+from\s+"([^"]+\.css)"/,
+      );
+      if (!importMatch) continue;
+      const defined = definedClasses(resolveImport(file, importMatch[1]));
+      const used = new Set(
+        [...source.matchAll(/styles\.([A-Za-z_][\w]*)/g)].map(
+          (match) => match[1],
+        ),
+      );
+      for (const name of used) {
+        if (!defined.has(name)) undefinedReferences.push(`${file}: ${name}`);
+      }
+    }
+    expect(undefinedReferences).toEqual([]);
+  });
+});

src/app/funding/FundingReadinessPanel.tsx

@@ -242,7 +242,7 @@ export function FundingReadinessPanelView({
           style={{
             display: "grid",
             gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
-            gap: 12,
+            gap: 1,
           }}
         >
           <div>

src/app/globals.css

@@ -420,8 +420,7 @@ a {
   align-items: center;
   gap: 6px;
 }
-.app-tabs a,
-.request-link {
+.app-tabs a {
   display: inline-flex;
   min-height: 44px;
   align-items: center;
@@ -434,24 +433,18 @@ a {
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
-.app-tabs a[aria-current="page"],
-.request-link[aria-current="page"] {
+.app-tabs a[aria-current="page"] {
   border-color: var(--shell-line);
   color: var(--shell-text);
   box-shadow: inset 0 -2px var(--shell-orange);
 }
-.app-tabs a:hover,
-.request-link:hover {
+.app-tabs a:hover {
   color: var(--shell-text);
   border-color: var(--shell-orange);
 }
 .app-utilities {
   justify-content: flex-end;
 }
-.request-link {
-  border-color: var(--shell-orange);
-  color: var(--shell-text);
-}
 .network-status,
 .wallet-status {
   display: inline-flex;
@@ -483,6 +476,65 @@ a {
   overflow-wrap: anywhere;
 }
 
+/* The funding gate was the one panel still outside the desk's language: a
+   plain paragraph for its eyebrow, body-sans labels on its facts, and every
+   sentence running the full width of the window. */
+.funding-readiness-panel > p:first-child {
+  color: var(--shell-orange);
+  font-family: var(--font-mono-ui), monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.funding-readiness-panel h2 {
+  margin: 6px 0 0;
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+.funding-readiness-panel h3 {
+  margin: 18px 0 6px;
+  font-family: var(--font-mono-ui), monospace;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--shell-muted);
+}
+
+.funding-readiness-panel p,
+.funding-readiness-panel li {
+  max-width: var(--measure-reading);
+  line-height: 1.55;
+}
+
+.funding-readiness-panel dl {
+  border: 1px solid var(--shell-line);
+  background: var(--shell-line);
+}
+
+.funding-readiness-panel dl > div {
+  padding: 9px 11px;
+  background: var(--shell-bg);
+}
+
+.funding-readiness-panel dt {
+  color: var(--shell-muted);
+  font-family: var(--font-mono-ui), monospace;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.funding-readiness-panel dd {
+  margin: 4px 0 0;
+  font-size: 13px;
+}
+
 .panel-heading {
   display: grid;
   gap: 5px;
@@ -849,9 +901,6 @@ a {
     font-size: clamp(8px, 2.25vw, 9px);
     letter-spacing: 0.03em;
   }
-  .app-utilities .request-link {
-    padding: 0 5px;
-  }
   /* Wrap rather than clip: the Disconnect action stays reachable at 320px. */
   .app-utilities {
     min-width: 0;