Release 0.25.0 "Supreme": flagship UX upgrade

- WelcomeBanner: redesigned empty-state with 8 smart starter cards (Build,
  Fix a bug, Explain codebase, Write tests, Review changes, Plan refactor,
  Security audit, Optimize performance). One click fills composer + sets mode.
- ModeTabs: replace cryptic mode dropdown with accessible icon-tablist; each
  tab shows a hover description of what that mode does.
- Header declutter: consolidate "20-Min Flow" + "Open Weights" text pills into
  clean icon-only buttons — same function, much less visual noise.
- Context bar: replace "Context X% · N tokens" text with compact 48 px visual
  fill-bar; turns danger-red above 80%; full detail available on hover.
- Status bar: remove model name (already visible in composer picker); move git
  branch inline; cleaner and less technical.
- Help overlay: categorised shortcuts (Task control / Navigation / Other) and
  a "What can I ask?" section with 6 example prompts.
- CSS micro-polish: composer focus-ring glow; send-button scale animation;
  suggestion cards lift on hover; fade-up animation on welcome banner.
- Font rendering: optimizeLegibility, font-feature-settings liga+kern,
  -moz-osx-font-smoothing grayscale.
- Dark mode parity for all new components; mobile: starter-grid 2-col <540px,
  mode tab labels hidden (icons remain).

Author: ShadowfetchStudio

CHANGELOG.md

@@ -1,7 +1,32 @@
 # Changelog
 
+## 0.25.0 — "Supreme"
+
+- **Welcome Banner**: redesigned empty-state with 8 smart starter cards (Build a
+  feature, Fix a bug, Explain this codebase, Write tests, Review my changes,
+  Plan a refactor, Security audit, Optimize performance). Each card populates
+  the composer and sets the correct mode in one click.
+- **Mode Tabs**: replaced the cryptic "Build/Plan/Review/Test" dropdown with
+  accessible `role="tablist"` icon-tabs that show a hover description of exactly
+  what each mode does.
+- **Header declutter**: consolidated the "20-Min Flow" and "Open Weights" text
+  pills into clean icon-only buttons — less noise, same functionality.
+- **Context bar**: replaced the "Context X% · Ntokens" text in the status bar
+  with a compact 48 px visual fill-bar that shows remaining context at a glance
+  (turns danger-red above 80%). Full detail is available on hover.
+- **Status bar cleanup**: removed the model name from the status bar (visible in
+  the composer model picker) and moved the git branch inline for less clutter.
+- **CSS micro-polish**: composer ring glow on focus; send-button subtle
+  scale-up/down on hover/active; suggestion cards lift on hover; smooth
+  `fade-up` animation on the welcome banner; improved font rendering.
+- **Dark mode parity**: all new components (WelcomeBanner, ModeTabs, starter
+  cards, ctx-bar) have matching dark-mode tokens and no flash-of-wrong-colour.
+- **Mobile**: starter-grid collapses to 2-column below 540 px; mode tab labels
+  are hidden on very small screens (icons remain).
+
 ## 0.24.0
 
+
 - Vendor CLI agent backends: spawn the official Claude, Codex, or Grok CLI in a
   trusted workspace. ShadowCode never reads, stores, or proxies vendor OAuth
   tokens. Login remains `claude auth login`, `codex login`, and `grok login`.

Cargo.lock

@@ -4,7 +4,7 @@ default-members = ["native/core"]
 resolver = "2"
 
 [workspace.package]
-version = "0.24.0"
+version = "0.25.0"
 edition = "2021"
 rust-version = "1.95"
 license = "MIT"

Cargo.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "shadow-agent"
-version = "0.24.0"
+version = "0.25.0"
 description = "Linux-native, model-agnostic coding-agent harness (Claude Code / Codex alternative)"
 readme = "README.md"
 requires-python = ">=3.12"

pyproject.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ShadowCode",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "identifier": "com.shadowfetch.shadowcode",
   "build": {
     "beforeDevCommand": {

src-tauri/tauri.conf.json

@@ -1,3 +1,3 @@
 """ShadowCode — Linux-native autonomous coding-agent harness (brand: ShadowCode; binary: shadow; desktop id: shadow-agent)."""
 
-__version__ = "0.24.0"
+__version__ = "0.25.0"

src/shadow_agent/__init__.py

@@ -1,6 +1,6 @@
 {
   "name": "shadow-agent-ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": true,
   "type": "module",
   "scripts": {

ui/package.json

@@ -8,7 +8,6 @@ import {
 import {
   ArrowDown,
   ArrowUp,
-  ArrowUpRight,
   Check,
   ChevronRight,
   Code2,
@@ -26,7 +25,6 @@ import {
   Sparkles,
   Square,
   TerminalSquare,
-  TestTube2,
   X,
   Cpu,
 } from "lucide-react";
@@ -53,6 +51,8 @@ import { Markdown } from "./components/Markdown";
 import { Onboarding } from "./components/Onboarding";
 import { FlowGuide } from "./components/FlowGuide";
 import { OpenWeightHub } from "./components/OpenWeightHub";
+import { WelcomeBanner } from "./components/WelcomeBanner";
+import { ModeTabs } from "./components/ModeTabs";
 import {
   CustomModelDialog,
   Help,
@@ -1165,23 +1165,21 @@ export default function App() {
         <div className="top-right">
           <button
             type="button"
-            className="top-action flow-guide-btn"
-            aria-label="20-Minute Fast-Track Guide"
-            title="20-Minute Fast-Track Guide"
-            onClick={() => setOverlay("flow-guide")}
+            className="icon-btn"
+            aria-label="Open-Weight Models & Vendor CLIs"
+            title="Models & AI providers"
+            onClick={() => setOverlay("open-weights")}
           >
-            <Sparkles size={14} />
-            <span>20-Min Flow</span>
+            <Cpu size={17} />
           </button>
           <button
             type="button"
-            className="top-action open-weights-btn"
-            aria-label="Open-Weight Models Showcase"
-            title="Open-Weight Models Showcase"
-            onClick={() => setOverlay("open-weights")}
+            className="icon-btn"
+            aria-label="20-Minute Fast-Track Guide"
+            title="Fast-track guide (new to ShadowCode?)"
+            onClick={() => setOverlay("flow-guide")}
           >
-            <Cpu size={14} />
-            <span>Open Weights</span>
+            <Sparkles size={16} />
           </button>
           <button
             type="button"
@@ -1391,131 +1389,15 @@ export default function App() {
                 Opening task…
               </div>
             ) : empty && !conversation.history.viewing ? (
-              <div className="welcome">
-                <div className="welcome-symbol">
-                  <img src="/icon.svg" alt="" />
-                </div>
-                <div className="eyebrow">
-                  PILLAR FOR OPEN SOURCE & OPEN WEIGHTS · LINUX NATIVE
-                </div>
-                <h1>What are we building today?</h1>
-                <p>
-                  A focused, autonomous workspace powered by local open-weight
-                  models.
-                </p>
-
-                <div className="welcome-meta-bar">
-                  <button
-                    type="button"
-                    className="workspace-badge"
-                    title={workspace}
-                    onClick={() => setOverlay("project")}
-                  >
-                    <FolderOpen size={14} />
-                    <span>
-                      {workspace.split("/").pop() || "Choose a project"}
-                    </span>
-                    <ChevronRight size={13} />
-                  </button>
-
-                  <button
-                    type="button"
-                    className="model-hero-badge"
-                    title="Configure open-weight models"
-                    onClick={() => setOverlay("open-weights")}
-                  >
-                    <Cpu size={14} />
-                    <span>{model || "Choose Open-Weight Model"}</span>
-                    <span className="badge-tag">
-                      {isVendorProvider(
-                        selectedModel?.provider ||
-                          String(status?.model?.provider || ""),
-                      )
-                        ? VENDOR_GROUP
-                        : LOCAL_GROUP}
-                    </span>
-                  </button>
-
-                  <button
-                    type="button"
-                    className="guide-hero-badge"
-                    onClick={() => setOverlay("flow-guide")}
-                  >
-                    <Sparkles size={14} />
-                    <span>20-Min Fast-Track Flow</span>
-                  </button>
-                </div>
-
-                <div className="suggestions grid-3">
-                  {[
-                    {
-                      icon: Code2,
-                      title: "Build a feature",
-                      body: "Turn an idea into working code with verification",
-                      prompt: "Help me build ",
-                      mode: "coder",
-                    },
-                    {
-                      icon: ListChecks,
-                      title: "Plan milestones",
-                      body: "Non-destructive plan & architectural blueprint",
-                      prompt:
-                        "Create a detailed implementation plan and milestone roadmap for ",
-                      mode: "planner",
-                    },
-                    {
-                      icon: GitPullRequest,
-                      title: "Find & fix bugs",
-                      body: "Scan for edge cases and reliability issues",
-                      prompt:
-                        "Review this project for bugs and reliability issues. Explain your findings before changing files.",
-                      mode: "reviewer",
-                    },
-                    {
-                      icon: Sparkles,
-                      title: "Codebase tour",
-                      body: "Understand the architecture and entry points",
-                      prompt:
-                        "Explore this workspace and explain its architecture, key entry points, and how to run it in 3 bullet points.",
-                      mode: "reviewer",
-                    },
-                    {
-                      icon: TestTube2,
-                      title: "Generate tests",
-                      body: "Author unit tests and verify coverage",
-                      prompt:
-                        "Write automated tests for the core modules and verify they pass.",
-                      mode: "tester",
-                    },
-                    {
-                      icon: ShieldCheck,
-                      title: "Security audit",
-                      body: "Audit for vulnerabilities and exposed secrets",
-                      prompt:
-                        "Audit this workspace for security risks, unvalidated inputs, and exposed secrets.",
-                      mode: "reviewer",
-                    },
-                  ].map((s) => (
-                    <button
-                      type="button"
-                      className="suggestion"
-                      key={s.title}
-                      onClick={() => {
-                        setTask(s.prompt);
-                        setMode(s.mode);
-                        promptRef.current?.focus();
-                      }}
-                    >
-                      <s.icon size={18} />
-                      <strong>
-                        {s.title}
-                        <ArrowUpRight size={13} />
-                      </strong>
-                      <span>{s.body}</span>
-                    </button>
-                  ))}
-                </div>
-              </div>
+              <WelcomeBanner
+                workspace={workspace}
+                model={model || status?.model.name || ""}
+                onSelect={(prompt, selectedMode) => {
+                  setTask(prompt);
+                  setMode(selectedMode);
+                  promptRef.current?.focus();
+                }}
+              />
             ) : (
               <>
                 {transcript.items.map((item, i) =>
@@ -1863,17 +1745,11 @@ export default function App() {
                 }
               />
               <span className="control-divider" />
-              <select
-                className="mode-select"
-                aria-label="Agent mode"
+              <ModeTabs
                 value={mode}
-                onChange={(e) => setMode(e.target.value)}
-              >
-                <option value="coder">Build</option>
-                <option value="planner">Plan</option>
-                <option value="reviewer">Review</option>
-                <option value="tester">Test</option>
-              </select>
+                onChange={setMode}
+                disabled={busy && !isNative()}
+              />
               <span className="grow" />
               <span className="composer-hint">
                 {commandWaiting
@@ -1935,7 +1811,7 @@ export default function App() {
         </div>
         <footer className="statusline" aria-live="polite">
           <span className={`status-dot ${busy ? "active" : ""}`} />
-          <span>
+          <span className="status-label">
             {busy
               ? job?.status === "paused"
                 ? "Paused"
@@ -1944,23 +1820,30 @@ export default function App() {
                 ? "Reconnecting"
                 : "Ready"}
           </span>
-          <span className="sep">/</span>
-          <span title={model}>{model}</span>
-          <span className="grow" />
-          <span title="Input tokens as a percentage of this task's model context limit">
-            Context {ctx}%
-          </span>
-          <span className="sep">·</span>
-          <span>{formatTokens(transcript.usage.total_tokens || 0)} tokens</span>
           {git.branch && (
-            <button
-              type="button"
-              title="Review git changes"
-              onClick={() => setPanel("changes")}
+            <>
+              <span className="sep">·</span>
+              <button
+                type="button"
+                title="Review git changes"
+                onClick={() => setPanel("changes")}
+              >
+                <GitBranch size={12} />
+                {git.branch}
+              </button>
+            </>
+          )}
+          <span className="grow" />
+          {ctx > 0 && (
+            <span
+              className={`ctx-bar${ctx >= 80 ? " ctx-warn" : ""}`}
+              title={`${ctx}% of context used · ${formatTokens(transcript.usage.total_tokens || 0)} tokens`}
             >
-              <GitBranch size={12} />
-              {git.branch}
-            </button>
+              <span
+                className="ctx-fill"
+                style={{ width: `${Math.min(ctx, 100)}%` }}
+              />
+            </span>
           )}
           <span className="version">
             {health?.version ? `v${health.version}` : "Connecting"}