nexu-io · zoeforfun · Apr 20, 2026 · Apr 20, 2026 · Apr 20, 2026 · Apr 20, 2026
diff --git a/AGENTS.md b/AGENTS.md
diff --git a/apps/slark/electron.vite.config.ts b/apps/slark/electron.vite.config.ts
@@ -14,6 +14,15 @@ export default defineConfig({
     resolve: {
       alias: {
         "@": resolve("src/renderer/src"),
+        // Point ui-web at its source during dev so edits to primitives/patterns
+        // reflect instantly via HMR, and so the classes Tailwind scans in
+        // packages/ui-web/src/**/*.{ts,tsx} are the same ones actually rendered
+        // at runtime. Without this the renderer consumes the stale dist bundle
+        // (see packages/ui-web/package.json "main": "./dist/index.js") and any
+        // new utility classes in a primitive silently never reach the DOM,
+        // even though Tailwind still generates CSS for them. Storybook already
+        // does the same remap in apps/storybook/.storybook/main.ts.
+        "@nexu-design/ui-web": resolve(__dirname, "../../packages/ui-web/src/index.ts"),
       },
     },
     plugins: [react(), tailwindcss()],

diff --git a/apps/slark/src/main/index.ts b/apps/slark/src/main/index.ts
@@ -36,6 +36,8 @@ function handleDeepLink(url: string): void {
 }
 
 function createWindow(): void {
+  const isMac = process.platform === "darwin";
+
   const mainWindow = new BrowserWindow({
     width: 1280,
     height: 800,
@@ -44,7 +46,15 @@ function createWindow(): void {
     show: false,
     titleBarStyle: "hiddenInset",
     trafficLightPosition: { x: 16, y: 14 },
-    backgroundColor: "#09090b",
+    // On macOS we opt into native sidebar vibrancy so the ActivityBar and any
+    // translucent chrome can show real frosted-glass (blurs the desktop behind
+    // the window). `visualEffectState: "active"` keeps the blur active even when
+    // the window loses focus, matching the look of Slack / Cursor / Finder.
+    // Non-mac platforms fall back to a solid light background that matches
+    // --color-surface-0 so there's no black flash on startup.
+    ...(isMac
+      ? { vibrancy: "sidebar" as const, visualEffectState: "active" as const }
+      : { backgroundColor: "#fafafa" }),
     webPreferences: {
       preload: join(__dirname, "../preload/index.js"),
       sandbox: false,

diff --git a/apps/slark/src/renderer/index.html b/apps/slark/src/renderer/index.html
@@ -23,7 +23,7 @@
       })()
     </script>
   </head>
-  <body class="bg-background text-foreground antialiased">
+  <body class="text-foreground antialiased">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/apps/slark/src/renderer/src/app/App.tsx b/apps/slark/src/renderer/src/app/App.tsx
@@ -87,8 +87,8 @@ export function App(): React.ReactElement {
         ) : (
           <Routes>
             <Route element={<AppLayout />}>
-              <Route path="/" element={<Navigate to="/chat/ch-welcome" replace />} />
-              <Route path="/chat" element={<Navigate to="/chat/ch-welcome" replace />} />
+              <Route path="/" element={<Navigate to="/chat/ch-showcase" replace />} />
+              <Route path="/chat" element={<Navigate to="/chat/ch-showcase" replace />} />
               <Route path="/chat/:channelId" element={<ChatView />} />
               <Route path="/agents" element={<AgentsView />} />
               <Route path="/agents/:memberId" element={<MemberDetailRoute />} />
@@ -98,7 +98,7 @@ export function App(): React.ReactElement {
               <Route path="/settings/profile" element={<SettingsView />} />
             </Route>
             <Route path="/invite/:token" element={<InviteLandingPage />} />
-            <Route path="*" element={<Navigate to="/chat/ch-welcome" replace />} />
+            <Route path="*" element={<Navigate to="/chat/ch-showcase" replace />} />
           </Routes>
         )}
         <DevPanel />

diff --git a/apps/slark/src/renderer/src/app/globals.css b/apps/slark/src/renderer/src/app/globals.css
@@ -5,21 +5,48 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+ * Root containers stay transparent so any translucent chrome (ActivityBar,
+ * floating toasts) can show the BrowserWindow's native macOS vibrancy through
+ * the parent chain. On non-mac the BrowserWindow's backgroundColor (set in
+ * main/index.ts) provides the solid fallback. Content panels (Sidebar, chat
+ * main) keep their own opaque bg so long-form text stays maximally readable.
+ */
+html,
+body,
+#root {
+  background: transparent;
+}
+
 :root {
   --slark-color-nexu-primary: oklch(0.65 0.2 260);
   --slark-color-nexu-agent: oklch(0.7 0.18 160);
   --slark-color-nexu-runtime: oklch(0.75 0.15 55);
+  /* User presence tokens — the app standardises on three states:
+     online (green), away (yellow, also used for DND), offline (gray).
+     `nexu-busy` stays around for legacy / agent-status call sites that
+     want a warmer "working / DND" hue; new code should prefer one of
+     the three user-presence tokens above. */
   --slark-color-nexu-online: oklch(0.72 0.19 145);
+  --slark-color-nexu-away: oklch(0.82 0.16 90);
   --slark-color-nexu-busy: oklch(0.7 0.2 30);
-  --slark-color-nexu-offline: oklch(0.55 0 0);
+  --slark-color-nexu-offline: oklch(0.65 0 0);
 
   --slark-color-nav: var(--color-surface-1);
   --slark-color-nav-surface: var(--color-surface-2);
   --slark-color-nav-hover: var(--color-surface-2);
-  --slark-color-nav-active: var(--color-brand-primary);
-  --slark-color-nav-active-fg: var(--color-accent-fg);
-  --slark-color-nav-active-soft: color-mix(in srgb, var(--color-accent-fg) 18%, transparent);
-  --slark-color-nav-active-muted: color-mix(in srgb, var(--color-accent-fg) 78%, transparent);
+  /*
+   * Selected navigation row follows the restrained Slack / Cursor pattern:
+   * a neutral surface-3 fill (one step darker than hover's surface-2) plus
+   * text-heading (near-black) text and font-semibold weight. No brand color
+   * and no filled accent — per AGENTS.md, --color-brand-primary is reserved
+   * for links / focus rings / accented badges, and --color-accent is reserved
+   * for primary interactive surfaces like filled buttons.
+   */
+  --slark-color-nav-active: var(--color-surface-3);
+  --slark-color-nav-active-fg: var(--color-text-heading);
+  --slark-color-nav-active-soft: color-mix(in srgb, var(--color-text-heading) 18%, transparent);
+  --slark-color-nav-active-muted: color-mix(in srgb, var(--color-text-heading) 78%, transparent);
   --slark-color-nav-fg: var(--color-text-heading);
   --slark-color-nav-muted: var(--color-text-secondary);
   --slark-color-nav-border: var(--color-border-subtle);
@@ -32,6 +59,7 @@
   --color-nexu-agent: var(--slark-color-nexu-agent);
   --color-nexu-runtime: var(--slark-color-nexu-runtime);
   --color-nexu-online: var(--slark-color-nexu-online);
+  --color-nexu-away: var(--slark-color-nexu-away);
   --color-nexu-busy: var(--slark-color-nexu-busy);
   --color-nexu-offline: var(--slark-color-nexu-offline);
 

diff --git a/apps/slark/src/renderer/src/components/agents/AgentsSidebar.tsx b/apps/slark/src/renderer/src/components/agents/AgentsSidebar.tsx
@@ -1,19 +1,18 @@
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Plus, Search, Users as UsersIcon, Bot, UserPlus } from "lucide-react";
+import { Plus, Search, Bot, UserPlus } from "lucide-react";
 
 import { Button, Input, cn } from "@nexu-design/ui-web";
 
-import { useT } from "@/i18n";
 import { useAgentsStore } from "@/stores/agents";
+import { presenceDotClass, presenceLabel } from "@/lib/user-presence";
 import { mockAgents, mockAgentTemplates, mockUsers } from "@/mock/data";
 import { CreateAgentDialog } from "./CreateAgentDialog";
 import { InvitePeopleDialog } from "@/components/chat/InvitePeopleDialog";
 import type { Agent, User } from "@/types";
 
 export function AgentsSidebar(): React.ReactElement {
   const navigate = useNavigate();
-  const t = useT();
   const { memberId } = useParams();
   const { agents, setAgents, setTemplates, selectAgent } = useAgentsStore();
   const [showCreateAgent, setShowCreateAgent] = useState(false);
@@ -70,14 +69,17 @@ export function AgentsSidebar(): React.ReactElement {
     <div className="flex flex-col h-full">
       <div className="px-3 pb-2 space-y-2">
         <div className="relative" ref={addMenuRef}>
+          {/* Outline variant: white fill + subtle border + surface-2 hover.
+              This gives the Add-teammate action a clear visual weight and
+              keeps it distinct from the adjacent gray-filled Search input. */}
           <Button
             onClick={() => setShowAddMenu((v) => !v)}
-            variant="ghost"
+            variant="outline"
             size="sm"
-            className="h-8 w-full justify-start rounded-md bg-nav-hover text-nav-fg hover:bg-nav-border hover:text-nav-fg"
+            className="h-8 w-full justify-start"
             leadingIcon={<Plus className="h-3.5 w-3.5" />}
           >
-            {t("team.addMember")}
+            Add teammate
           </Button>
 
           {showAddMenu && (
@@ -89,10 +91,10 @@ export function AgentsSidebar(): React.ReactElement {
                 }}
                 variant="ghost"
                 size="inline"
-                className="h-auto w-full justify-start rounded-md px-2.5 py-2 text-xs text-left text-foreground hover:bg-accent hover:text-foreground"
+                className="h-auto w-full justify-start rounded-md px-2.5 py-2 text-xs text-left text-foreground hover:bg-surface-2 hover:text-foreground"
                 leadingIcon={<UserPlus className="h-3.5 w-3.5 shrink-0" />}
               >
-                <span className="flex-1">{t("team.invitePerson")}</span>
+                <span className="flex-1">Invite person</span>
               </Button>
               <Button
                 onClick={() => {
@@ -103,10 +105,10 @@ export function AgentsSidebar(): React.ReactElement {
                 title={atAgentLimit ? `${agents.length}/10` : undefined}
                 variant="ghost"
                 size="inline"
-                className="h-auto w-full justify-start rounded-md px-2.5 py-2 text-xs text-left text-foreground hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
+                className="h-auto w-full justify-start rounded-md px-2.5 py-2 text-xs text-left text-foreground hover:bg-surface-2 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent"
                 leadingIcon={<Bot className="h-3.5 w-3.5 shrink-0" />}
               >
-                <span className="flex-1">{t("team.createAgent")}</span>
+                <span className="flex-1">Create agent</span>
                 {atAgentLimit && (
                   <span className="text-[10px] text-muted-foreground">{agents.length}/10</span>
                 )}
@@ -118,19 +120,24 @@ export function AgentsSidebar(): React.ReactElement {
         <Input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          placeholder={t("team.searchPlaceholder")}
+          placeholder="Search team"
           leadingIcon={<Search className="h-3.5 w-3.5 text-nav-muted" />}
           className="h-8 border-transparent bg-nav-input text-nav-fg shadow-none focus-within:border-transparent focus-within:ring-1 focus-within:ring-nav-ring"
           inputClassName="text-[13px] placeholder:text-nav-muted"
         />
       </div>
 
-      <div className="flex-1 overflow-y-auto px-2 space-y-3">
+      {/* `pt-2` gives the first section header visible breathing room
+          below the Search input — flush against the input block it felt
+          cramped and made the header read as input meta. */}
+      <div className="flex-1 overflow-y-auto px-2 pt-2 space-y-3">
         {filteredUsers.length > 0 && (
           <div>
+            {/* Section headers drop their leading icon — the uppercase
+                label already reads as a header and the icon was adding
+                visual noise in a narrow sidebar. */}
             <div className="flex items-center gap-1.5 px-2 py-1 text-[10px] font-semibold text-nav-muted uppercase tracking-wider">
-              <UsersIcon className="h-3 w-3" />
-              <span className="flex-1">{t("team.people")}</span>
+              <span className="flex-1">Members</span>
               <span className="text-[10px] normal-case tracking-normal font-medium">
                 {filteredUsers.length}
               </span>
@@ -149,27 +156,50 @@ export function AgentsSidebar(): React.ReactElement {
                     : "text-nav-muted hover:bg-nav-hover hover:text-nav-fg",
                 )}
               >
-                <img src={user.avatar} alt="" className="h-7 w-7 rounded-full shrink-0" />
+                {/* Avatar + presence dot overlay. The ring keeps the photo
+                    readable on surface hover fills; the small colored dot
+                    in the bottom-right carries the member's live status
+                    (online / away / offline) using the shared presence
+                    palette. A `border-nav` ring on the dot cuts it out
+                    cleanly from whichever avatar it's sitting on. */}
+                <span className="relative inline-block shrink-0">
+                  <img
+                    src={user.avatar}
+                    alt=""
+                    className="h-7 w-7 rounded-full ring-1 ring-inset ring-black/5"
+                  />
+                  <span
+                    role="status"
+                    aria-label={presenceLabel(user.status)}
+                    title={presenceLabel(user.status)}
+                    className={cn(
+                      "absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-nav",
+                      presenceDotClass(user.status),
+                    )}
+                  />
+                </span>
                 <div className="min-w-0 flex-1 text-left">
                   <div className="flex items-center gap-1.5">
                     <span className="text-sm font-medium truncate">{user.name}</span>
                     {user.role === "owner" && (
-                      <span
-                        className={cn(
-                          "text-[9px] font-semibold uppercase tracking-wide px-1 py-px rounded shrink-0",
-                          memberId === user.id
-                            ? "text-nav-active-fg bg-nav-active-soft"
-                            : "text-nav-muted bg-nav-hover",
-                        )}
-                      >
-                        {t("team.role.owner")}
+                      /* Owner tag always reads as a brand-accented label
+                         (brand-primary on brand-subtle), selected row or
+                         not — matches the larger Owner badge on the
+                         profile detail header for visual consistency. */
+                      <span className="text-[9px] font-semibold uppercase tracking-wide text-brand-primary bg-brand-subtle px-1 py-px rounded shrink-0">
+                        Owner
                       </span>
                     )}
                   </div>
                   <div
                     className={cn(
-                      "text-xs truncate",
-                      memberId === user.id ? "text-nav-active-muted" : "text-nav-muted",
+                      /* `font-normal` overrides the Button primitive's default
+                         `font-medium` so secondary meta (email, agent desc)
+                         reads as body text, not a second heading.
+                         `text-text-tertiary` is the lightest text token — used
+                         here so email stays clearly subordinate to the name. */
+                      "text-xs font-normal truncate",
+                      memberId === user.id ? "text-nav-active-muted" : "text-text-tertiary",
                     )}
                   >
                     {user.email}
@@ -183,8 +213,7 @@ export function AgentsSidebar(): React.ReactElement {
         {filteredAgents.length > 0 && (
           <div>
             <div className="flex items-center gap-1.5 px-2 py-1 text-[10px] font-semibold text-nav-muted uppercase tracking-wider">
-              <Bot className="h-3 w-3" />
-              <span className="flex-1">{t("team.agents")}</span>
+              <span className="flex-1">Agents</span>
               <span className="text-[10px] normal-case tracking-normal font-medium">
                 {filteredAgents.length}
               </span>
@@ -203,13 +232,17 @@ export function AgentsSidebar(): React.ReactElement {
                     : "text-nav-muted hover:bg-nav-hover hover:text-nav-fg",
                 )}
               >
-                <img src={agent.avatar} alt="" className="h-7 w-7 rounded-lg shrink-0" />
+                <img
+                  src={agent.avatar}
+                  alt=""
+                  className="h-7 w-7 rounded-lg shrink-0 ring-1 ring-inset ring-black/5"
+                />
                 <div className="min-w-0 flex-1 text-left">
                   <div className="text-sm font-medium truncate">{agent.name}</div>
                   <div
                     className={cn(
-                      "text-xs truncate",
-                      memberId === agent.id ? "text-nav-active-muted" : "text-nav-muted",
+                      "text-xs font-normal truncate",
+                      memberId === agent.id ? "text-nav-active-muted" : "text-text-tertiary",
                     )}
                   >
                     {agent.description}
@@ -221,7 +254,7 @@ export function AgentsSidebar(): React.ReactElement {
         )}
 
         {filteredUsers.length === 0 && filteredAgents.length === 0 && (
-          <div className="px-2 py-4 text-center text-xs text-nav-muted">{t("team.noResults")}</div>
+          <div className="px-2 py-4 text-center text-xs text-nav-muted">No matches</div>
         )}
       </div>
 

diff --git a/apps/slark/src/renderer/src/components/agents/AgentsView.tsx b/apps/slark/src/renderer/src/components/agents/AgentsView.tsx
@@ -47,7 +47,7 @@ export function AgentsView(): React.ReactElement {
           return (
             <div
               key={agent.id}
-              className="rounded-xl border border-border p-4 hover:bg-accent/30 transition-colors"
+              className="rounded-xl border border-border p-4 hover:bg-surface-2 transition-colors"
             >
               <div className="flex items-start gap-3">
                 <img src={agent.avatar} alt="" className="h-10 w-10 rounded-xl" />