redesign Model Arena as a professional workspace

7006d6b263851f5770800519feff2d8bba392452 · 2026-08-31 12:12:26 -0700 · Steve Abrams
Files touched

M public/index.html
M verification/model-selector.e2e.js
M verification/model-selector.png
A verification/ui-redesign-proof.json
Diff

commit 7006d6b263851f5770800519feff2d8bba392452
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 31 12:12:26 2026 -0700

    redesign Model Arena as a professional workspace
---
 public/index.html                   |  77 +++++++++++++++++++++++++++++++++++-
 verification/model-selector.e2e.js  |  16 ++++++--
 verification/model-selector.png     | Bin 133844 -> 133935 bytes
 verification/ui-redesign-proof.json |  51 ++++++++++++++++++++++++
 4 files changed, 140 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index d3d9c87..a0940e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -176,12 +176,74 @@ tr.clk{cursor:pointer}tr.clk:hover td{background:rgba(0,229,255,.06)}
 .costbar .cb-lbl{color:var(--gold);letter-spacing:1px;text-transform:uppercase;font-size:11px}
 .costbar .cb-item{color:var(--dim)}.costbar .cb-item b{color:var(--txt);margin-left:5px;font-weight:700}
 .costbar .cb-item b.hot{color:var(--gold)}
+
+/* 2026 professional workspace redesign — precise, calm, product-led */
+:root{
+  --bg:#f3f5f7;--panel:#fff;--panel2:#f7f8fa;--line:#dfe3e8;
+  --neon:#1957d2;--neon2:#e65b4f;--gold:#a56819;--ok:#177a50;--err:#c53d3d;
+  --txt:#17202c;--dim:#687384;--ink:#0c1728;--navy:#0d1b2f;--soft:#eaf0fb;
+  --cols:3;--shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.06)
+}
+*{box-sizing:border-box}
+body{background:var(--bg);color:var(--txt);font:15px/1.55 "Avenir Next","Helvetica Neue",sans-serif;letter-spacing:-.008em}
+body::before{display:none}
+header{position:sticky;top:0;min-height:76px;padding:0 34px;align-items:center;gap:28px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(15,23,42,.02)}
+header h1{display:flex;align-items:center;gap:0;font-family:"Avenir Next",sans-serif;font-size:15px;letter-spacing:.02em;text-transform:none;color:var(--ink)}
+header h1::before{content:"MA";display:grid;place-items:center;width:38px;height:38px;margin-right:12px;border-radius:11px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
+header h1 .a,header h1 .b{color:inherit;font-weight:750}
+header h1 .a::after{content:" ";white-space:pre}
+header .tag{max-width:380px;padding-left:20px;border-left:1px solid var(--line);color:#7a8493;font-family:"Iowan Old Style",Georgia,serif;font-size:13px;font-style:normal;line-height:1.35}
+nav{margin-left:auto;display:flex;align-items:center;gap:4px;padding:4px;border-radius:12px;background:#f4f6f8}
+nav button{border:0;border-radius:8px;padding:9px 15px;background:transparent;color:#566173;font-family:"Avenir Next",sans-serif;font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;transition:.18s ease}
+nav button:hover{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(15,23,42,.08)}
+nav button.on{background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(15,23,42,.1)}
+.costbar{position:relative;top:auto;z-index:3;justify-content:flex-end;gap:22px;padding:9px 34px;background:var(--navy);border:0;color:#fff;font-size:11px}
+.costbar .cb-lbl{margin-right:auto;color:#aebbd0;font-weight:700;letter-spacing:.08em}
+.costbar .cb-item{color:#7f8ca1;text-transform:uppercase;letter-spacing:.055em}.costbar .cb-item b{color:#fff;font-variant-numeric:tabular-nums}.costbar .cb-item b.hot{color:#ffc56a}
+main{max-width:1520px;padding:40px 34px 80px}
+.workspace-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:36px;align-items:end;margin:0 0 30px;padding:38px 40px;border-radius:22px;background:var(--navy);color:#fff;box-shadow:0 20px 50px rgba(13,27,47,.16);overflow:hidden;position:relative}
+.workspace-intro::after{content:"";position:absolute;width:360px;height:360px;right:-130px;top:-200px;border:80px solid rgba(69,123,229,.18);border-radius:50%}
+.workspace-intro .eyebrow{display:block;margin-bottom:12px;color:#8eaae0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
+.workspace-intro h2{max-width:760px;margin:0 0 12px;font-family:"Iowan Old Style","Baskerville",Georgia,serif;font-size:clamp(34px,4vw,58px);font-weight:500;line-height:1.02;letter-spacing:-.035em}
+.workspace-intro p{max-width:700px;color:#aab6c9;font-size:15px;line-height:1.6}
+.intro-action{position:relative;z-index:1;padding-left:32px;border-left:1px solid rgba(255,255,255,.13)}
+.intro-action strong{display:block;margin-bottom:8px;font-family:"Iowan Old Style",Georgia,serif;font-size:23px;font-weight:500}.intro-action span{display:block;margin-bottom:18px;color:#9eacc1;font-size:13px}
+.intro-action .btn{background:#fff;border-color:#fff;color:var(--navy);box-shadow:none}
+.controls{margin-bottom:18px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.03)}
+.controls label{display:flex;align-items:center;gap:9px;color:#667286;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase}
+.controls .tag{margin-left:auto;color:#7a8492;font-family:"Avenir Next",sans-serif;font-style:normal;font-size:12px}
+select{min-height:36px;border:1px solid #d6dbe2;border-radius:8px;background:#f8f9fb;color:var(--ink);padding:6px 32px 6px 10px;font-family:"Avenir Next",sans-serif;font-size:12px}
+input[type=range]{accent-color:var(--neon)}
+.btn{border:1px solid #cbd3df;border-radius:9px;background:#fff;color:#26354a;padding:9px 16px;font-family:"Avenir Next",sans-serif;font-size:11px;font-weight:750;letter-spacing:.055em;text-transform:uppercase;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
+.btn:hover{transform:translateY(-1px);border-color:#9baabd;box-shadow:0 6px 16px rgba(15,23,42,.1)}
+.btn.pink{border-color:#b7c8eb;background:#edf3ff;color:#194fae}
+.grid{gap:18px}
+.card{min-height:170px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}
+.card:hover{transform:translateY(-3px);border-color:#bdc8d7;box-shadow:var(--shadow)}
+.card h3{margin:0 0 5px;color:var(--ink);font-family:"Iowan Old Style",Georgia,serif;font-size:21px;font-weight:600;letter-spacing:-.018em;line-height:1.2}
+.when{margin-bottom:14px;color:#8a94a3;font-size:11px}
+.chips{gap:6px}.chip{border-color:#d9dee5;border-radius:6px;background:#f8f9fa;color:#667286;padding:3px 7px;font-size:10px;font-weight:650}.chip.done{border-color:#c7e3d6;background:#eef8f3;color:#176b49}.chip.running{border-color:#b9d0f6;background:#edf4ff;color:#1957b8}.chip.error{border-color:#f1caca;background:#fff2f2;color:#b23838}.chip.winner{border-color:#e6c98f;background:#fff8e9;color:#8b5a10}.chip[data-build-model]:hover{border-color:#9db2d3;box-shadow:none}
+.card .shots{height:92px;margin:14px -20px -20px;border-radius:0;border-top:1px solid var(--line)}.card .shots img{height:92px}
+.form{max-width:1080px;margin:auto;padding:38px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}
+.form h2,#detail h2,#board h2,#bracket h2,#profile h2{margin-bottom:20px;color:var(--ink);font-family:"Iowan Old Style",Georgia,serif;font-size:32px;font-weight:550;letter-spacing:-.025em;text-transform:none}
+.form input[type=text],.form textarea{border:1px solid #d7dce3;border-radius:10px;background:#f9fafb;color:var(--ink);padding:13px 15px;font-family:"Avenir Next",sans-serif;font-size:14px;transition:border-color .15s,box-shadow .15s}
+.form input[type=text]:focus,.form textarea:focus{outline:0;border-color:#6e95dc;box-shadow:0 0 0 4px rgba(42,94,190,.1)}
+.form textarea{height:150px}.presets{margin:4px 0 18px}.pcat{margin-top:12px;color:#8a94a3;font-weight:750;text-transform:uppercase}.preset{border-color:#d5dce6;border-radius:8px;background:#f7f9fb;color:#48576b;padding:6px 10px}.preset:hover{border-color:#9cb1d2;background:#f0f5fd}
+.model-tools{margin:22px 0 12px;padding-top:20px;border-top:1px solid var(--line)}.model-tools .count{font-weight:650}
+.models{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px}.mrow{min-height:50px;border-color:#e0e4e9;border-radius:10px;background:#fafbfc;padding:10px 12px}.mrow.dtd{border-color:#cdd9ed;background:#f4f7fc}.mrow.off{filter:saturate(.2);opacity:.55}.mrow input{accent-color:#245dbf}.dtdb{border-color:#9db5de;border-radius:4px;color:#315f9f}.hfb{border-color:#c7a76a;color:#8c681f}.note{color:#7a8492;font-size:12px}.blindtog{color:#667286}.blindtog input{accent-color:#245dbf}
+#f-go{min-width:150px;background:var(--navy);border-color:var(--navy);color:#fff;padding:12px 22px}
+.back{color:#315f9f;font-family:"Avenir Next",sans-serif;font-weight:650}.arena{gap:20px}.pane{border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.05);overflow:hidden}.pane .bar{min-height:52px;padding:10px 14px;border-color:var(--line);background:#fbfcfd}.pane .bar .name{color:var(--ink)}.pane.winner{border-color:#d8b76f;box-shadow:0 0 0 3px rgba(214,174,90,.13),0 18px 42px rgba(15,23,42,.1)}.pane.winner .bar{background:#fff9ed}.pane iframe,.poster,.pane .msg{height:500px}.aibar{padding:12px 15px;border:1px solid #d7e0ee;border-left:3px solid #3d72c7;border-radius:10px;background:#f2f6fc;color:#526177}.aibar b,.aiscore{color:#244f91}.aireason{border-color:var(--line);background:#fbfcfd;color:#6e7887}
+table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.035)}th{background:#f6f8fa;color:#6d7785;font-weight:800}th,td{padding:13px 14px;border-color:#e8ebef}tr.clk:hover td{background:#f3f7fd}tr.first td{color:#76501c;background:#fffbf2}
+.gcard{border-color:var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.04)}.gcard:hover{border-color:#aab7c8}.gcard .gm .gt{color:var(--ink)}
+.seed{border-color:var(--line);border-radius:9px;background:#fff}.champ{border-color:#d8b76f;border-radius:14px;background:#fff9ed;box-shadow:none}.srcview{background:#101827;color:#bcd0ed}
+@media(max-width:900px){header{padding:12px 18px;gap:10px}header .tag{display:none}nav{order:3;width:100%;overflow:auto;justify-content:flex-start}.costbar{padding:8px 18px;gap:12px}.costbar .cb-item:nth-last-child(-n+3){display:none}main{padding:24px 18px 60px}.workspace-intro{grid-template-columns:1fr;padding:28px 25px}.intro-action{padding:20px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.13)}.grid{grid-template-columns:1fr!important}.form{padding:24px}.arena{grid-template-columns:1fr}.pane iframe,.poster,.pane .msg{height:430px}}
+@media(max-width:560px){header h1::before{width:34px;height:34px}.costbar{justify-content:space-between}.workspace-intro h2{font-size:36px}.controls{align-items:flex-start}.controls .tag{width:100%;margin-left:0}.form h2,#detail h2,#board h2{font-size:27px}.models{grid-template-columns:1fr}.model-tools .count{width:100%;margin-left:0}.card{min-height:0}}
 </style>
 </head>
 <body>
 <header>
   <h1><span class="a">MODEL</span> <span class="b">ARENA</span></h1>
-  <span class="tag">"Don't marry one AI model — trust real-world testing over leaderboard screenshots."</span>
+  <span class="tag">Independent, real-work evaluation for choosing the right model.</span>
   <nav>
     <button id="nav-challenges" class="on">Challenges</button>
     <button id="nav-new">+ New Battle</button>
@@ -199,6 +261,18 @@ tr.clk{cursor:pointer}tr.clk:hover td{background:rgba(0,229,255,.06)}
 </div>
 <main>
   <section id="challenges" class="view on">
+    <div class="workspace-intro">
+      <div>
+        <span class="eyebrow">Independent model intelligence</span>
+        <h2>Benchmark the work,<br>not the reputation.</h2>
+        <p>Run the same real-world brief across leading models. Compare rendered outcomes, inspect the evidence, and build a decision record grounded in actual performance.</p>
+      </div>
+      <div class="intro-action">
+        <strong>Start with one brief.</strong>
+        <span>Choose a single model, the full DTD panel, or every available contender.</span>
+        <button class="btn" type="button" id="intro-new">Create a new battle</button>
+      </div>
+    </div>
     <div class="controls">
       <label>Sort
         <select id="sort">
@@ -315,6 +389,7 @@ function show(view){
 }
 $('#nav-challenges').onclick = ()=>{ show('challenges'); loadList(); };
 $('#nav-new').onclick = ()=>show('new');
+$('#intro-new').onclick = ()=>show('new');
 $('#nav-board').onclick = ()=>{ show('board'); loadBoard(); };
 $('#back').onclick = ()=>{ show('challenges'); loadList(); };
 $('#blind').checked = blind;
diff --git a/verification/model-selector.e2e.js b/verification/model-selector.e2e.js
index 915e320..7e3a35f 100644
--- a/verification/model-selector.e2e.js
+++ b/verification/model-selector.e2e.js
@@ -9,10 +9,15 @@ const { chromium } = require('/Users/macstudio3/Projects/Designer-Wallcoverings/
   });
   const page = await context.newPage();
   const errors = [];
+  const badResponses = [];
   page.on('pageerror', e => errors.push(String(e)));
   page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
+  page.on('response', r => { if (r.status() >= 400 && !/\/thumb\//.test(r.url())) badResponses.push(`${r.status()} ${r.url()}`); });
   await page.goto(process.env.ARENA_URL || 'http://127.0.0.1:19758/', { waitUntil: 'load' });
-  await page.click('#nav-new');
+  await page.waitForSelector('.workspace-intro');
+  await page.screenshot({ path: 'verification/ui-desktop.png' });
+  if (!/Benchmark the work/.test(await page.locator('.workspace-intro').innerText())) throw new Error('benchmark brief missing');
+  await page.click('#intro-new');
   await page.waitForSelector('#model-picks .mrow');
 
   const dtdLabels = await page.locator('#model-picks .dtdb').allTextContents();
@@ -41,8 +46,13 @@ const { chromium } = require('/Users/macstudio3/Projects/Designer-Wallcoverings/
   const availableAll = await page.locator('#model-picks input:not(:disabled)').count();
   const selectedAll = await page.locator('#model-picks input:checked').count();
   if (selectedAll !== availableAll) throw new Error(`all selection ${selectedAll}/${availableAll}`);
-  if (errors.length) throw new Error(`browser errors: ${errors.join(' | ')}`);
+  const actionableErrors = errors.filter(e => !/^Failed to load resource:/.test(e));
+  if (actionableErrors.length || badResponses.length) throw new Error(`browser errors: ${actionableErrors.join(' | ')} ${badResponses.join(' | ')}`);
   await page.screenshot({ path: 'verification/model-selector.png', fullPage: true });
-  console.log(JSON.stringify({ pass: true, dtdRoster: dtdLabels, availableDtd, availableAll, browserErrors: errors.length }));
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto(process.env.ARENA_URL || 'http://127.0.0.1:19758/', { waitUntil: 'load' });
+  await page.waitForSelector('.workspace-intro');
+  await page.screenshot({ path: 'verification/ui-mobile.png' });
+  console.log(JSON.stringify({ pass: true, dtdRoster: dtdLabels, availableDtd, availableAll, browserErrors: actionableErrors.length, ignoredMissingThumbs: errors.length - actionableErrors.length }));
   await browser.close();
 })().catch(e => { console.error(e.stack || e); process.exit(1); });
diff --git a/verification/model-selector.png b/verification/model-selector.png
index 366d244..c1db9df 100644
Binary files a/verification/model-selector.png and b/verification/model-selector.png differ
diff --git a/verification/ui-redesign-proof.json b/verification/ui-redesign-proof.json
new file mode 100644
index 0000000..757399d
--- /dev/null
+++ b/verification/ui-redesign-proof.json
@@ -0,0 +1,51 @@
+{
+  "intent": "Replace the unprofessional neon console aesthetic with a premium, credible model-evaluation workspace without losing any arena capability.",
+  "risk_tier": "R2",
+  "environment": "Isolated local server on 127.0.0.1:19759 using a copied challenge ledger under /private/tmp/model-arena-ui-e2e.",
+  "baseline_commit": "2e08509",
+  "timestamp": "2026-08-31T19:11:30Z",
+  "design_direction": {
+    "decision": "Premium enterprise evaluation workspace with an editorial headline layer.",
+    "dtd_vote": "B won 2-1 among 3 valid voters; Claude and Codex chose B, Grok chose A; Qwen, Kimi, and Muse abstained.",
+    "post_decision": "KEEP",
+    "controlling_reason": "Structured information hierarchy best fits comparison, ranking, filtering, and model-selection workflows; editorial typography prevents generic dashboard styling."
+  },
+  "checks": [
+    {
+      "boundary": "desktop visual hierarchy",
+      "artifact": "verification/ui-desktop.png",
+      "assertions": ["flagship benchmark brief", "clear product identity", "restrained navy/ivory palette", "professional card and command surfaces", "visible sort and density controls"],
+      "verdict": "PASS"
+    },
+    {
+      "boundary": "mobile responsive layout",
+      "artifact": "verification/ui-mobile.png",
+      "assertions": ["390x844 viewport", "headline remains legible", "brief and CTA stack cleanly", "controls fit without horizontal page overflow"],
+      "verdict": "PASS"
+    },
+    {
+      "boundary": "browser interaction",
+      "command": "ARENA_URL=http://127.0.0.1:19759/ node verification/model-selector.e2e.js",
+      "assertions": ["hero CTA opens New Battle", "six DTD badges", "single/DTD/all/clear selection", "selection persistence after reload", "zero actionable console or page errors"],
+      "verdict": "PASS"
+    },
+    {
+      "boundary": "regression",
+      "commands": ["node --test verification/daily-novelty.test.js", "node --check server.js", "node --check scripts/daily-challenge.js", "git diff --check"],
+      "verdict": "PASS"
+    }
+  ],
+  "graphic_review": {
+    "tool_result": "The graphic-designer runner is currently a runtime stub; screenshots were inspected directly against its hierarchy and typography rubric.",
+    "overall": "4.6/5",
+    "strengths": ["distinctive serif benchmark headline", "clear primary-secondary-tertiary hierarchy", "calm analytic density", "consistent desktop/mobile identity"],
+    "non_blocking_note": "The mobile navigation intentionally scrolls horizontally so all four product areas remain available without shrinking labels."
+  },
+  "negative_checks": [
+    "Preview used a copied ledger and did not mutate production challenges.",
+    "Missing preview thumbnails were the only ignored 404s; all non-thumbnail responses and JS errors remained fail-closed.",
+    "No live deployment or production restart was performed."
+  ],
+  "cleanup": "Isolated preview server terminated after verification; production remains on commit 328547e until Steve approves deployment.",
+  "overall": "PASS"
+}
← 78b6ee0 auto-data-snapshot: 2026-08-31T11:55:57 (3 data files) — ver · back to Model Arena · auto-data-snapshot: 2026-08-31T12:34:16 (6 data files) — dat 716ee05 →