Release dev → master: agent OS control framework, macOS-dark theme, store/desktop/chat redesigns

.gitignore

@@ -98,3 +98,4 @@ docs/AGENT_HANDOFF.md
 docs/audit/
 .understand-anything/
 docs/agent-jobs/
+.design/

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-jaylfc25@gmail.com.
+info@taos.my.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Contributing to TinyAgentOS
+# Contributing to taOS
 
-Welcome — and thanks for your interest in contributing. TinyAgentOS is a self-hosted AI agent platform for low-power hardware. Before diving in, please read the [README](README.md) for a project overview.
+Welcome — and thanks for your interest in contributing. taOS is a self-hosted AI agent platform for low-power hardware. Before diving in, please read the [README](README.md) for a project overview.
 
 > **Note:** The project is in early development. APIs and interfaces may change. That is fine — contributions of all sizes are welcome.
 
@@ -233,4 +233,4 @@ Routes are registered in `app.py`. Route modules access stores via `request.app.
 
 ## Contact
 
-Questions not suited for a GitHub issue? Email jaylfc25@gmail.com.
+Questions not suited for a GitHub issue? Email info@taos.my.

LICENSE

@@ -49,7 +49,7 @@ free of charge and is not a Commercial Purpose, provided the Software (and
 anything built on it) is not offered, sold, hosted, or otherwise made available
 to any third party.
 
-To obtain a commercial license, contact JAN LABS LTD at jaylfc25@gmail.com.
+To obtain a commercial license, contact JAN LABS LTD at info@taos.my.
 
 4. Trademarks
 

desktop/package.json

@@ -29,6 +29,9 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tldraw/tldraw": "^4.5.10",
+    "@tsparticles/engine": "^3.9.1",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.9.1",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
@@ -68,6 +71,7 @@
     "vitest": "^4.1.0"
   },
   "overrides": {
-    "dompurify": "^3.4.0"
+    "dompurify": "^3.4.0",
+    "esbuild": "^0.28.1"
   }
 }

desktop/src/App.tsx

@@ -2,6 +2,8 @@ import { useState, useCallback, useEffect } from "react";
 import { TopBar } from "@/components/TopBar";
 import { Desktop } from "@/components/Desktop";
 import { Dock } from "@/components/Dock";
+import { ParticlesWallpaper } from "@/components/ParticlesWallpaper";
+import { WallpaperTextOverlay } from "@/components/WallpaperTextOverlay";
 import { Launchpad } from "@/components/Launchpad";
 import { SearchPalette } from "@/components/SearchPalette";
 import { ShortcutProvider, useShortcut } from "@/hooks/use-shortcut-registry";
@@ -125,6 +127,19 @@ export function App() {
   const wallpaperImage = useThemeStore((s) => s.wallpaperImage);
   const wallpaperMobileImage = useThemeStore((s) => s.wallpaperMobileImage);
   const wallpaperFallback = useThemeStore((s) => s.wallpaperFallback);
+  const wallpaperLightImage = useThemeStore((s) => s.wallpaperLightImage);
+  const wallpaperLightMobileImage = useThemeStore((s) => s.wallpaperLightMobileImage);
+  const wallpaperLightFallback = useThemeStore((s) => s.wallpaperLightFallback);
+  const scheme = useThemeStore((s) => s.scheme);
+  const wallpaperKind = useThemeStore((s) => s.wallpaperKind);
+  const wallpaperComponent = useThemeStore((s) => s.wallpaperComponent);
+  const wallpaperOverlayText = useThemeStore((s) => s.wallpaperOverlayText);
+  const showOverlayText = useThemeStore((s) => s.showOverlayText);
+  const isAnimatedWallpaper = wallpaperKind === "animated";
+  const useLightWallpaper = scheme === "light" && !!wallpaperLightImage;
+  const effWallpaperImage = useLightWallpaper ? wallpaperLightImage : wallpaperImage;
+  const effWallpaperMobile = useLightWallpaper ? wallpaperLightMobileImage : wallpaperMobileImage;
+  const effWallpaperFallback = useLightWallpaper ? wallpaperLightFallback : wallpaperFallback;
   const windows = useProcessStore((s) => s.windows);
   const openWindow = useProcessStore((s) => s.openWindow);
   const closeWindow = useProcessStore((s) => s.closeWindow);
@@ -288,11 +303,13 @@ export function App() {
     <ShortcutProvider>
       <SystemShortcuts toggleSearch={toggleSearch} toggleLaunchpad={toggleLaunchpad} toggleAssistant={toggleAssistant} />
       <LoginGate>
-    <div className={`taos-wallpaper h-screen w-screen flex flex-col text-shell-text${isBrowserMobile ? " taos-browser" : ""}`} style={{ backgroundColor: wallpaperFallback, ["--wallpaper-desktop" as never]: wallpaperImage, ["--wallpaper-mobile" as never]: wallpaperMobileImage }}>
+    <div className={`taos-wallpaper relative h-screen w-screen flex flex-col text-shell-text${isBrowserMobile ? " taos-browser" : ""}`} style={{ backgroundColor: effWallpaperFallback, ["--wallpaper-desktop" as never]: isAnimatedWallpaper ? "none" : effWallpaperImage, ["--wallpaper-mobile" as never]: isAnimatedWallpaper ? "none" : effWallpaperMobile }}>
+      {isAnimatedWallpaper && wallpaperComponent === "particles" && <ParticlesWallpaper />}
+      {showOverlayText && wallpaperOverlayText && <WallpaperTextOverlay text={wallpaperOverlayText} />}
       <EffectsLayer />
       {/* Install banner — shown in browser mode, hidden in PWA */}
       {isBrowserMobile && <InstallPromptBanner />}
-      <div className={`flex-1 flex flex-col overflow-hidden transition-all duration-500 ${launched ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}>
+      <div className={`relative z-[1] flex-1 flex flex-col overflow-hidden transition-all duration-500 ${launched ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}>
         <MobileTopBar
           onHome={handleMobileHome}
           onSearch={() => { setCardSwitcherOpen(false); setSearchOpen((v) => !v); }}

desktop/src/apps/ActivityApp.tsx

@@ -639,7 +639,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
                             {capabilities.map((c) => (
                               <span
                                 key={`${w.name}-c-${c}`}
-                                className="text-[9px] px-1.5 py-0.5 rounded-full bg-violet-500/15 text-violet-200 font-medium"
+                                className="text-[9px] px-1.5 py-0.5 rounded-full bg-cyan-500/15 text-cyan-200 font-medium"
                                 aria-label={`Current capability: ${c}`}
                               >
                                 {c}
@@ -699,7 +699,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
             <CardContent className="p-0">
               <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center gap-2">
-                  <Network size={14} className="text-indigo-400" />
+                  <Network size={14} className="text-cyan-400" />
                   <h3 className="text-xs font-semibold text-shell-text">Network</h3>
                 </div>
               </div>
@@ -726,7 +726,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
             <CardContent className="p-0">
               <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center gap-2">
-                  <Activity size={14} className="text-violet-400" />
+                  <Activity size={14} className="text-cyan-400" />
                   <h3 className="text-xs font-semibold text-shell-text">Scheduler</h3>
                 </div>
                 <div className="flex items-center gap-3 text-[10px] text-shell-text-tertiary tabular-nums">
@@ -747,7 +747,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
                   const tierLabel = ["GPU", "NPU", "CPU", "CLUSTER"][r.tier] ?? "?";
                   const tierColor = [
                     "text-emerald-400 bg-emerald-500/10",
-                    "text-violet-400 bg-violet-500/10",
+                    "text-cyan-400 bg-cyan-500/10",
                     "text-sky-400 bg-sky-500/10",
                     "text-amber-400 bg-amber-500/10",
                   ][r.tier] ?? "text-shell-text-tertiary bg-white/5";
@@ -791,7 +791,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
                         {r.capabilities.map((c) => (
                           <span
                             key={`ready-${c}`}
-                            className="text-[9px] px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-200 font-medium"
+                            className="text-[9px] px-1.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-200 font-medium"
                             title="Ready now — backend is loaded"
                           >
                             {c}
@@ -841,7 +841,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
                   const tierLabels = ["GPU", "NPU", "CPU"];
                   const tierColors = [
                     "text-emerald-400 bg-emerald-500/10",
-                    "text-violet-400 bg-violet-500/10",
+                    "text-cyan-400 bg-cyan-500/10",
                     "text-sky-400 bg-sky-500/10",
                   ];
 
@@ -877,7 +877,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
                             ...(w.capabilities || []).map((c) => (
                               <span
                                 key={`worker-ready-${c}`}
-                                className="text-[9px] px-1.5 py-0.5 rounded-full bg-violet-500/20 text-violet-200 font-medium"
+                                className="text-[9px] px-1.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-200 font-medium"
                                 title="Ready now — backend is loaded"
                               >
                                 {c}
@@ -907,7 +907,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
                       t.status === "complete"
                         ? "text-emerald-400"
                         : t.status === "running"
-                        ? "text-violet-400"
+                        ? "text-cyan-400"
                         : t.status === "error"
                         ? "text-red-400"
                         : t.status === "rejected"

desktop/src/apps/AgentSkillsPanel.tsx

@@ -22,7 +22,7 @@ const CATEGORY_COLORS: Record<string, string> = {
   media: "bg-pink-500/20 text-pink-400",
   browser: "bg-cyan-500/20 text-cyan-400",
   data: "bg-emerald-500/20 text-emerald-400",
-  comms: "bg-indigo-500/20 text-indigo-400",
+  comms: "bg-cyan-500/20 text-cyan-400",
   system: "bg-slate-500/20 text-slate-400",
 };
 

desktop/src/apps/AgentsApp.tsx

@@ -27,14 +27,33 @@ const TAOS_AGENT_STUB: Agent = {
   name: "taos-agent",
   display_name: "taOS agent",
   host: "localhost",
-  color: "#6366f1",
+  color: "#06b6d4",
   emoji: "🤖",
   status: "running",
   vectors: 0,
   framework: "opencode",
   paused: false,
 };
 
+/** Placeholder card shown while the agent list is loading. Matches the
+ *  AgentRow shape (identity tile + two-line stack + trailing metric) with a
+ *  shimmer that respects prefers-reduced-motion (see tokens.css). */
+function AgentRowSkeleton() {
+  return (
+    <div
+      className="flex items-center gap-3 px-4 py-3.5 rounded-xl border border-shell-border bg-shell-surface shadow-[var(--shadow-card)]"
+      aria-hidden="true"
+    >
+      <div className="taos-shimmer h-9 w-9 rounded-lg bg-shell-surface-active shrink-0" />
+      <div className="flex-1 min-w-0 space-y-2">
+        <div className="taos-shimmer h-3.5 w-40 max-w-[60%] rounded bg-shell-surface-active" />
+        <div className="taos-shimmer h-2.5 w-24 max-w-[40%] rounded bg-shell-surface-active" />
+      </div>
+      <div className="taos-shimmer h-3 w-16 rounded bg-shell-surface-active shrink-0" />
+    </div>
+  );
+}
+
 export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
   const [agents, setAgents] = useState<Agent[]>([]);
   const [archived, setArchived] = useState<ArchivedAgent[]>([]);
@@ -45,9 +64,9 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
   const [diskStates, setDiskStates] = useState<Record<string, DiskState>>({});
   const [quotaErrors, setQuotaErrors] = useState<Record<string, string>>({});
   const [latestByFramework, setLatestByFramework] = useState<Record<string, LatestVersion>>({});
-  // Hydrate the taOS agent stub with live model info (display only — the detail
-  // panel fetches its own config on open). We only use this to show the current
-  // model in the row's framework pill area; failures are silently ignored.
+  // Hydrate the taOS agent stub with live model info (display only; the detail
+  // panel fetches its own config on open). Shown as the model indicator line on
+  // the system agent's card; failures are silently ignored.
   const [taosModel, setTaosModel] = useState<string | undefined>(undefined);
   const isMobile = useIsMobile();
   const openWindow = useProcessStore((s) => s.openWindow);
@@ -70,6 +89,7 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
                 status: String(a.status ?? "stopped") as Agent["status"],
                 vectors: Number(a.vectors ?? 0),
                 framework: a.framework ? String(a.framework) : undefined,
+                model: a.model ? String(a.model) : undefined,
                 paused: Boolean(a.paused),
                 on_worker_failure: (a.on_worker_failure as Agent["on_worker_failure"]) ?? "pause",
                 fallback_models: Array.isArray(a.fallback_models) ? (a.fallback_models as string[]) : [],
@@ -469,15 +489,16 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
       {/* Content */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-full text-shell-text-tertiary text-sm">
-            Loading agents...
+          <div className="p-4 space-y-2" aria-busy="true" aria-label="Loading agents">
+            {[0, 1, 2].map((i) => (
+              <AgentRowSkeleton key={i} />
+            ))}
           </div>
         ) : agents.length === 0 && archived.length === 0 ? (
           <div className="flex flex-col h-full min-h-0">
             <div className="p-4">
-              <p className="text-xs font-medium text-shell-text-tertiary uppercase tracking-wider mb-2">System agent</p>
               <AgentRow
-                agent={{ ...TAOS_AGENT_STUB, display_name: taosModel ? `taOS agent — ${taosModel}` : "taOS agent" }}
+                agent={{ ...TAOS_AGENT_STUB, model: taosModel }}
                 diskState={null}
                 latestByFramework={latestByFramework}
                 onViewLogs={() => setTaosDetailOpen(true)}
@@ -488,31 +509,29 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
                 protected
               />
             </div>
-            <div className="flex flex-col items-center justify-center flex-1 gap-4 text-shell-text-tertiary px-4 pb-8">
-              <div className="w-20 h-20 rounded-2xl flex items-center justify-center"
-                style={{ background: "linear-gradient(135deg, rgba(139,146,163,0.15), rgba(91,97,112,0.08))" }}
-              >
-                <Bot size={36} className="text-accent/50" />
+            <div className="flex flex-col items-center justify-center flex-1 gap-4 px-4 pb-8">
+              <div className="w-16 h-16 rounded-lg flex items-center justify-center bg-shell-surface border border-shell-border">
+                <Bot size={30} className="text-shell-text-tertiary" />
               </div>
               <div className="text-center">
-                <p className="text-base font-medium text-shell-text-secondary mb-1">No agents deployed yet</p>
-                <p className="text-xs text-shell-text-tertiary max-w-xs">Deploy your first AI agent to start automating tasks on your device.</p>
+                <p className="text-base font-medium text-shell-text mb-1">No agents deployed yet</p>
+                <p className="text-sm text-shell-text-secondary max-w-xs">Deploy your first AI agent to start automating tasks on your device.</p>
               </div>
               <Button
                 onClick={() => setWizardOpen(true)}
                 className="text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 hover:brightness-110 border-0 mt-1"
                 style={{ background: "linear-gradient(135deg, #8b92a3, #5b6170)" }}
+                aria-label="Deploy agent"
               >
                 <Plus size={15} />
-                Deploy your first agent
+                Deploy Agent
               </Button>
             </div>
           </div>
         ) : agents.length === 0 ? (
           <div className="p-4">
-            <p className="text-xs font-medium text-shell-text-tertiary uppercase tracking-wider mb-2">System agent</p>
             <AgentRow
-              agent={{ ...TAOS_AGENT_STUB, display_name: taosModel ? `taOS agent — ${taosModel}` : "taOS agent" }}
+              agent={{ ...TAOS_AGENT_STUB, model: taosModel }}
               diskState={null}
               latestByFramework={latestByFramework}
               onViewLogs={() => setTaosDetailOpen(true)}
@@ -531,19 +550,19 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
           </div>
         ) : (
           <div className="p-4">
-            {/* System agent — always shown above the deployed agents list */}
-            <p className="text-xs font-medium text-shell-text-tertiary uppercase tracking-wider mb-2">System agent</p>
-            <AgentRow
-              agent={{ ...TAOS_AGENT_STUB, display_name: taosModel ? `taOS agent — ${taosModel}` : "taOS agent" }}
-              diskState={null}
-              latestByFramework={latestByFramework}
-              onViewLogs={() => setTaosDetailOpen(true)}
-              onViewSkills={() => setTaosDetailOpen(true)}
-              onViewMessages={() => setTaosDetailOpen(true)}
-              onDelete={() => {}}
-              onResume={() => {}}
-              protected
-            />
+            <div className="mb-3">
+              <AgentRow
+                agent={{ ...TAOS_AGENT_STUB, model: taosModel }}
+                diskState={null}
+                latestByFramework={latestByFramework}
+                onViewLogs={() => setTaosDetailOpen(true)}
+                onViewSkills={() => setTaosDetailOpen(true)}
+                onViewMessages={() => setTaosDetailOpen(true)}
+                onDelete={() => {}}
+                onResume={() => {}}
+                protected
+              />
+            </div>
 
             {/* Disk quota notification cards */}
             {agents
@@ -594,7 +613,7 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
                   </div>
                 );
               })}
-            <div className="space-y-2" role="list" aria-label="Agent list">
+            <div className="space-y-3" role="list" aria-label="Agent list">
               {agents.map((agent) => (
                 <AgentRow
                   key={agent.name}