From b89cf707a24becbaa94d1763c54988c2f513e96f Mon Sep 17 00:00:00 2001 From: Hanzo AI Date: Sat, 25 Jul 2026 10:17:15 -0700 Subject: [PATCH] =?UTF-8?q?studio=20v0.18.3:=20monochrome=20shell=20chrome?= =?UTF-8?q?=20=E2=80=94=20coherent=20with=20the=20Home=20+=20@hanzo/gui=20?= =?UTF-8?q?design=20system?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit shell.css (chat sidebar · Developers dock · GPUs panel) was still on the old charcoal palette; snap it to the canonical monochrome tokens the Home already uses: page #000 · surface #0a0a0a · raised #1a1a1a · border #1f1f1f · text #ededed · dim #888 · brand/CTA #fff. Semantic green (online) / red (error) kept. The shared shell now matches the create experience + the chat's own empty-state and friendly-error work already on main. --- middleware/shell.css | 86 ++++++++++++++++++++++---------------------- pyproject.toml | 2 +- 2 files changed, 44 insertions(+), 44 deletions(-) diff --git a/middleware/shell.css b/middleware/shell.css index 69850468..a71f483d 100644 --- a/middleware/shell.css +++ b/middleware/shell.css @@ -6,58 +6,58 @@ flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 36px); font:400 14px/1.4 Inter,system-ui,-apple-system,sans-serif} #hzbar button,#hzbar a{font:inherit} -.hz-pill{display:inline-flex;align-items:center;gap:7px;background:#131317;color:#ececf1;border:1px solid #232329; +.hz-pill{display:inline-flex;align-items:center;gap:7px;background:#1a1a1a;color:#ededed;border:1px solid #1f1f1f; border-radius:999px;padding:7px 13px;cursor:pointer;text-decoration:none;white-space:nowrap} -.hz-pill:hover{border-color:#3a3a48} +.hz-pill:hover{border-color:#333333} .hz-pill .hz-dot{width:8px;height:8px;border-radius:50%;background:#555;flex:0 0 auto} .hz-pill.on .hz-dot{background:#3ddc84} -.hz-pill.hz-chat{background:#f4f4f6;color:#111;border-color:#f4f4f6;font-weight:600} -.hz-topup{color:#6aa5ff;text-decoration:none;font-size:.82em;border-left:1px solid #232329;padding-left:7px} +.hz-pill.hz-chat{background:#ffffff;color:#111;border-color:#ffffff;font-weight:600} +.hz-topup{color:#888888;text-decoration:none;font-size:.82em;border-left:1px solid #1f1f1f;padding-left:7px} .hz-topup:hover{text-decoration:underline} /* right-docked chat sidebar (both views) */ -#hzchat{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:94vw;background:#0e0e12;color:#ececf1; - border-left:1px solid #232329;z-index:2147483001;display:flex;flex-direction:column; +#hzchat{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:94vw;background:#0a0a0a;color:#ededed; + border-left:1px solid #1f1f1f;z-index:2147483001;display:flex;flex-direction:column; transform:translateX(100%);transition:transform .22s ease;box-shadow:-14px 0 44px #0007} #hzchat.on{transform:translateX(0)} -#hzchat .hz-h{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid #232329;flex-wrap:wrap} -#hzchat .hz-h .hz-av{width:26px;height:26px;border-radius:50%;background:#26262e;display:flex;align-items:center; +#hzchat .hz-h{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid #1f1f1f;flex-wrap:wrap} +#hzchat .hz-h .hz-av{width:26px;height:26px;border-radius:50%;background:#242424;display:flex;align-items:center; justify-content:center;font-size:.72rem;font-weight:600;flex:0 0 auto} #hzchat .hz-h .hz-who{font-size:.82rem;min-width:0} #hzchat .hz-h .hz-who b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -#hzchat .hz-h .hz-who span{color:#8a8a95;font-size:.72rem} -#hzchat .hz-h .hz-x{margin-left:auto;cursor:pointer;color:#8a8a95;font-size:1.3rem;line-height:1;background:none;border:none} +#hzchat .hz-h .hz-who span{color:#888888;font-size:.72rem} +#hzchat .hz-h .hz-x{margin-left:auto;cursor:pointer;color:#888888;font-size:1.3rem;line-height:1;background:none;border:none} #hzmsgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .hz-m{max-width:88%;padding:9px 12px;border-radius:12px;font-size:.86rem;line-height:1.45;white-space:pre-wrap;word-break:break-word} -.hz-m.u{align-self:flex-end;background:#f4f4f6;color:#111;border-bottom-right-radius:3px} -.hz-m.a{align-self:flex-start;background:#1a1a20;border:1px solid #232329;border-bottom-left-radius:3px} -.hz-m.sys{align-self:center;color:#8a8a95;font-size:.78rem;background:none} +.hz-m.u{align-self:flex-end;background:#ffffff;color:#111;border-bottom-right-radius:3px} +.hz-m.a{align-self:flex-start;background:#1a1a1a;border:1px solid #1f1f1f;border-bottom-left-radius:3px} +.hz-m.sys{align-self:center;color:#888888;font-size:.78rem;background:none} /* chat empty state — assistant identity + one line + 3 tappable starters */ .hz-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:auto 0;padding:8px 6px} -.hz-empty .hz-eav{width:40px;height:40px;border-radius:50%;background:#1a1a20;border:1px solid #232329;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#ececf1} -.hz-empty .hz-etitle{font-size:.95rem;font-weight:600;color:#ececf1} -.hz-empty .hz-esub{font-size:.8rem;color:#8a8a95;line-height:1.45;max-width:280px} +.hz-empty .hz-eav{width:40px;height:40px;border-radius:50%;background:#1a1a1a;border:1px solid #1f1f1f;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#ededed} +.hz-empty .hz-etitle{font-size:.95rem;font-weight:600;color:#ededed} +.hz-empty .hz-esub{font-size:.8rem;color:#888888;line-height:1.45;max-width:280px} .hz-empty .hz-starters{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:8px} -.hz-empty .hz-starter{background:#131317;color:#ececf1;border:1px solid #232329;border-radius:10px;padding:9px 12px;font:inherit;font-size:.82rem;text-align:left;cursor:pointer} -.hz-empty .hz-starter:hover{border-color:#3a3a48;background:#17171c} -#hzform{display:flex;gap:8px;padding:12px;border-top:1px solid #232329} -#hzform input{flex:1;background:#0a0a0d;border:1px solid #232329;border-radius:9px;color:#ececf1;padding:9px 11px;font:inherit;font-size:.85rem;outline:none} -#hzform button{background:#f4f4f6;color:#111;border:none;border-radius:9px;padding:0 14px;font-weight:600;cursor:pointer} -#hzchat .hz-pw{padding:8px 12px 11px;text-align:center;color:#6a6a75;font-size:.68rem;letter-spacing:.02em;border-top:1px solid #17171c} -#hzchat .hz-pw b{color:#8a8a95;font-weight:600} -.hz-m.a.streaming::after{content:"▍";color:#8a8a95;margin-left:1px;animation:hzblink 1s steps(1) infinite} +.hz-empty .hz-starter{background:#1a1a1a;color:#ededed;border:1px solid #1f1f1f;border-radius:10px;padding:9px 12px;font:inherit;font-size:.82rem;text-align:left;cursor:pointer} +.hz-empty .hz-starter:hover{border-color:#333333;background:#171717} +#hzform{display:flex;gap:8px;padding:12px;border-top:1px solid #1f1f1f} +#hzform input{flex:1;background:#0a0a0a;border:1px solid #1f1f1f;border-radius:9px;color:#ededed;padding:9px 11px;font:inherit;font-size:.85rem;outline:none} +#hzform button{background:#ffffff;color:#111;border:none;border-radius:9px;padding:0 14px;font-weight:600;cursor:pointer} +#hzchat .hz-pw{padding:8px 12px 11px;text-align:center;color:#666666;font-size:.68rem;letter-spacing:.02em;border-top:1px solid #171717} +#hzchat .hz-pw b{color:#888888;font-weight:600} +.hz-m.a.streaming::after{content:"▍";color:#888888;margin-left:1px;animation:hzblink 1s steps(1) infinite} @keyframes hzblink{50%{opacity:0}} /* GPUs panel (both views) */ -#hzgpus{position:fixed;bottom:64px;right:18px;z-index:2147483001;width:320px;max-width:92vw;background:#131317; - color:#ececf1;border:1px solid #232329;border-radius:12px;padding:12px 14px;display:none;box-shadow:0 18px 50px #0009} +#hzgpus{position:fixed;bottom:64px;right:18px;z-index:2147483001;width:320px;max-width:92vw;background:#1a1a1a; + color:#ededed;border:1px solid #1f1f1f;border-radius:12px;padding:12px 14px;display:none;box-shadow:0 18px 50px #0009} #hzgpus.on{display:block} #hzgpus h4{font-size:.82rem;font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:7px} -.hz-node{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-top:1px solid #1e1e24;font-size:.8rem} +.hz-node{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-top:1px solid #1f1f1f;font-size:.8rem} .hz-node:first-of-type{border-top:none} .hz-node .hz-dot{width:8px;height:8px;border-radius:50%;background:#555;margin-top:5px;flex:0 0 auto} .hz-node.on .hz-dot{background:#3ddc84} .hz-node .hz-nn{flex:1;min-width:0} .hz-node .hz-nn b{font-weight:500} -.hz-node .hz-nsub{color:#8a8a95;font-size:.72rem;margin-top:2px} +.hz-node .hz-nsub{color:#888888;font-size:.72rem;margin-top:2px} /* Tablet: a touch narrower sidebar; the pill bar + panels already fit. */ @media (max-width:900px){#hzchat{width:340px}} /* Phone: chat becomes a full-width bottom sheet (same pattern the old chatpanel @@ -68,33 +68,33 @@ .hz-pill{padding:7px 11px} .hz-pill .hz-lbl{display:none} /* icon-only Chat/GPUs → one line, clears content */ #hzchat{top:auto;bottom:0;width:100vw;max-width:100vw;height:85vh; - border-left:none;border-top:1px solid #232329;border-radius:16px 16px 0 0; + border-left:none;border-top:1px solid #1f1f1f;border-radius:16px 16px 0 0; transform:translateY(100%);box-shadow:0 -14px 44px #0007} #hzchat.on{transform:translateY(0)} #hzgpus{left:12px;right:12px;width:auto;bottom:66px} } /* Developers workbench — the bottom drawer (Queue · Logs · Shell), both views. Sits UNDER the pill bar's z so the pills stay clickable above it. */ -#hzwb{position:fixed;left:0;right:0;bottom:0;height:44vh;min-height:260px;background:#0e0e12;color:#ececf1; - border-top:1px solid #232329;z-index:2147482999;display:none;flex-direction:column; +#hzwb{position:fixed;left:0;right:0;bottom:0;height:44vh;min-height:260px;background:#0a0a0a;color:#ededed; + border-top:1px solid #1f1f1f;z-index:2147482999;display:none;flex-direction:column; box-shadow:0 -14px 44px #0007;font:400 13px/1.45 Inter,system-ui,-apple-system,sans-serif} #hzwb.on{display:flex} -.hzwb-h{display:flex;align-items:center;gap:4px;padding:7px 10px;border-bottom:1px solid #232329;flex:0 0 auto} -.hzwb-tab{background:none;border:none;color:#8a8a95;font:inherit;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer} -.hzwb-tab:hover{color:#ececf1} -.hzwb-tab.on{background:#1a1a20;color:#ececf1} +.hzwb-h{display:flex;align-items:center;gap:4px;padding:7px 10px;border-bottom:1px solid #1f1f1f;flex:0 0 auto} +.hzwb-tab{background:none;border:none;color:#888888;font:inherit;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer} +.hzwb-tab:hover{color:#ededed} +.hzwb-tab.on{background:#1a1a1a;color:#ededed} .hzwb-sp{flex:1} -.hzwb-ic{background:none;border:none;color:#8a8a95;font:inherit;font-size:1.05rem;line-height:1;padding:5px 9px;cursor:pointer;border-radius:8px} -.hzwb-ic:hover{color:#ececf1;background:#1a1a20} +.hzwb-ic{background:none;border:none;color:#888888;font:inherit;font-size:1.05rem;line-height:1;padding:5px 9px;cursor:pointer;border-radius:8px} +.hzwb-ic:hover{color:#ededed;background:#1a1a1a} .hzwb-b{flex:1;min-height:0;overflow:auto;padding:12px 14px} .hzwb-row{padding:2px 0} -.hzwb-dim{color:#8a8a95} -.hzwb-cmd{color:#c9c9d4;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;margin-top:8px} -.hzwb-out{color:#ececf1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem; +.hzwb-dim{color:#888888} +.hzwb-cmd{color:#a3a3a3;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;margin-top:8px} +.hzwb-out{color:#ededed;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem; white-space:pre-wrap;word-break:break-word;margin:4px 0 0;padding:0} .hzwb-out.err{color:#ff7a70} -#hzwbform{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid #232329;flex:0 0 auto} -#hzwbform .hzwb-ps{color:#8a8a95;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} -#hzwbform input{flex:1;background:#0a0a0d;border:1px solid #232329;border-radius:9px;color:#ececf1;padding:8px 11px; +#hzwbform{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid #1f1f1f;flex:0 0 auto} +#hzwbform .hzwb-ps{color:#888888;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} +#hzwbform input{flex:1;background:#0a0a0a;border:1px solid #1f1f1f;border-radius:9px;color:#ededed;padding:8px 11px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;outline:none} @media (max-width:600px){#hzwb{height:70vh}} diff --git a/pyproject.toml b/pyproject.toml index 06720c84..dd58da58 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,6 +1,6 @@ [project] name = "hanzo-studio" -version = "0.18.2" +version = "0.18.3" readme = "README.md" license = { file = "LICENSE" } requires-python = ">=3.10"