+
+ {isAnimatedWallpaper && wallpaperComponent === "particles" &&
+
{ setCardSwitcherOpen(false); setSearchOpen((v) => !v); }}
diff --git a/desktop/src/apps/ActivityApp.tsx b/desktop/src/apps/ActivityApp.tsx
index bfdc4b85a..764b9b301 100644
--- a/desktop/src/apps/ActivityApp.tsx
+++ b/desktop/src/apps/ActivityApp.tsx
@@ -639,7 +639,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
{capabilities.map((c) => (
{c}
@@ -699,7 +699,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
@@ -726,7 +726,7 @@ export function ActivityApp({ windowId: _windowId }: { windowId: string }) {
-
Network
-
Scheduler
@@ -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) => (
{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) => (
{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"
diff --git a/desktop/src/apps/AgentSkillsPanel.tsx b/desktop/src/apps/AgentSkillsPanel.tsx
index 8430791a3..7d63dff9f 100644
--- a/desktop/src/apps/AgentSkillsPanel.tsx
+++ b/desktop/src/apps/AgentSkillsPanel.tsx
@@ -22,7 +22,7 @@ const CATEGORY_COLORS: Record = {
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",
};
diff --git a/desktop/src/apps/AgentsApp.tsx b/desktop/src/apps/AgentsApp.tsx
index dcbe50eca..4fc877f9c 100644
--- a/desktop/src/apps/AgentsApp.tsx
+++ b/desktop/src/apps/AgentsApp.tsx
@@ -27,7 +27,7 @@ const TAOS_AGENT_STUB: Agent = {
name: "taos-agent",
display_name: "taOS agent",
host: "localhost",
- color: "#6366f1",
+ color: "#06b6d4",
emoji: "🤖",
status: "running",
vectors: 0,
@@ -35,6 +35,25 @@ const TAOS_AGENT_STUB: Agent = {
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 (
+
+ );
+}
+
export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
const [agents, setAgents] = useState([]);
const [archived, setArchived] = useState([]);
@@ -45,9 +64,9 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
const [diskStates, setDiskStates] = useState>({});
const [quotaErrors, setQuotaErrors] = useState>({});
const [latestByFramework, setLatestByFramework] = useState>({});
- // 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(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 */}
{loading ? (
-
- Loading agents...
+
+ {[0, 1, 2].map((i) => (
+
) : agents.length === 0 && archived.length === 0 ? (
- setTaosDetailOpen(true)}
@@ -488,31 +509,29 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
protected
/>
- System agent
-
-
) : agents.length === 0 ? (
+
+
-
No agents deployed yet
-Deploy your first AI agent to start automating tasks on your device.
+No agents deployed yet
+Deploy your first AI agent to start automating tasks on your device.
- setTaosDetailOpen(true)}
@@ -531,19 +550,19 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
) : (
System agent
- {/* System agent — always shown above the deployed agents list */}
- setTaosDetailOpen(true)}
- onViewSkills={() => setTaosDetailOpen(true)}
- onViewMessages={() => setTaosDetailOpen(true)}
- onDelete={() => {}}
- onResume={() => {}}
- protected
- />
+
);
})}
- System agent
-
+ setTaosDetailOpen(true)}
+ onViewSkills={() => setTaosDetailOpen(true)}
+ onViewMessages={() => setTaosDetailOpen(true)}
+ onDelete={() => {}}
+ onResume={() => {}}
+ protected
+ />
+
{/* Disk quota notification cards */}
{agents
@@ -594,7 +613,7 @@ export function AgentsApp({ windowId: _windowId }: { windowId: string }) {
+
{agents.map((agent) => (
(
{c}
@@ -346,7 +346,7 @@ function WorkerDetail({
{b.capabilities.map((c) => (
{c}
@@ -394,7 +394,7 @@ function WorkerDetail({
{/* Capabilities */}
0 ? ` · ${latentCaps.length} potential` : ""})`}
- icon={ = {
const TRANSPORT_PILL: Record = {
stdio: "bg-blue-500/20 text-blue-300",
- sse: "bg-violet-500/20 text-violet-300",
+ sse: "bg-cyan-500/20 text-cyan-300",
ws: "bg-teal-500/20 text-teal-300",
};
@@ -876,7 +876,7 @@ function PermissionsTab({
diff --git a/desktop/src/apps/MessagesApp.tsx b/desktop/src/apps/MessagesApp.tsx
index d31653c56..20f5232d3 100644
--- a/desktop/src/apps/MessagesApp.tsx
+++ b/desktop/src/apps/MessagesApp.tsx
@@ -37,6 +37,7 @@ import { useVisualViewport } from "@/hooks/use-visual-viewport";
import { useDropTarget } from "@/shell/dnd/use-drop-target";
import { startDrag, endDrag } from "@/shell/dnd/dnd-bus";
import { resolveAgentEmoji } from "@/lib/agent-emoji";
+import { MessageAvatar } from "./chat/MessageAvatar";
import { ChannelSettingsPanel } from "./chat/ChannelSettingsPanel";
import { AgentContextMenu } from "./chat/AgentContextMenu";
import { SlashMenu, type SlashCommandsBySlug } from "./chat/SlashMenu";
@@ -1480,9 +1481,9 @@ export function MessagesApp({
{allEmpty ? (
No capabilities reported
@@ -409,7 +409,7 @@ function WorkerDetail({ {capabilities.map((c) => ( {c} diff --git a/desktop/src/apps/ImportApp.tsx b/desktop/src/apps/ImportApp.tsx index 0a5992c98..296f1d92d 100644 --- a/desktop/src/apps/ImportApp.tsx +++ b/desktop/src/apps/ImportApp.tsx @@ -295,7 +295,7 @@ export function ImportApp({ windowId: _windowId }: { windowId: string }) { variant="secondary" onClick={handleEmbed} disabled={!selectedAgent || embedding} - className="bg-violet-600 text-white hover:bg-violet-500" + className="bg-cyan-600 text-white hover:bg-cyan-500" >Resource patterns
{a.allowed_resources.map((r, i) => (
- {r}
+ {r}
))}
-
-
@@ -1568,7 +1589,7 @@ export function MessagesApp({
onClick={() => setProjectsExpanded((v) => !v)}
aria-expanded={projectsExpanded}
aria-controls="projects-section-mobile"
- style={{ fontSize: 12, textTransform: "uppercase" as const, letterSpacing: 0.5, color: "rgba(255,255,255,0.45)", padding: "0 20px 6px", fontWeight: 600, display: "flex", alignItems: "center", gap: 6, background: "none", border: "none", cursor: "pointer", width: "100%" }}
+ style={{ fontSize: 12, textTransform: "uppercase" as const, letterSpacing: 0.5, color: "var(--color-shell-text-secondary)", padding: "0 20px 6px", fontWeight: 600, display: "flex", alignItems: "center", gap: 6, background: "none", border: "none", cursor: "pointer", width: "100%" }}
>
Projects ({projectGroups.length})
@@ -2122,12 +2143,46 @@ export function MessagesApp({
)}
No conversations yet
-Deploy an agent to start chatting
+ +No conversations yet
+Deploy an agent to start chatting
{visibleInSection(section.items, section.label).length === 0 ? ( collapsedSections[section.label] ? null : ( -None yet
+ None yet
)
) : (
- {visibleInSection(section.items, section.label).map((ch, idx, arr) => (
+ {visibleInSection(section.items, section.label).map((ch, idx, arr) => {
+ const isA2A = ch.settings?.kind === "a2a";
+ // Only direct messages get an agent avatar; topics/groups/a2a get
+ // a glyph tile (a topic/group can include agent members too).
+ const agentMember = ch.type === "dm" ? (ch.members ?? []).find((m) => m !== "user") : undefined;
+ const count = unread[ch.id] ?? 0;
+ return (
- ))}
+ );
+ })}
)}
setHoveredMessageId(msg.id)}
onMouseLeave={() => setHoveredMessageId((id) => id === msg.id ? null : id)}
>
+ {/* avatar gutter */}
+
{
+ if (msg.author_type !== "agent") return;
+ e.preventDefault();
+ setContextMenu({ slug: msg.author_id, x: e.clientX, y: e.clientY });
+ }}
+ >
+ {showAuthor ? (
+ (() => {
+ const agent = isAgent ? liveAgents.find((a) => a.name === msg.author_id) : undefined;
+ return (
+
+ {/* content column */}
+
{showAuthor && (
- {isAgent && !isDeadAgent && (() => {
- const agent = liveAgents.find((a) => a.name === msg.author_id);
- if (!agent) return null;
- return (
-
- );
- })()}
{isAgent && !isDeadAgent && (
-
+
Agent
)}
{isDeadAgent && (
-
+
{authorState === "archived" ? "inactive" : "removed"}
)}
{relativeTime(msg.created_at, nowMs)}
- {msg.edited_at && (edited)}
+ {msg.edited_at && (edited)}
)}
{msg.deleted_at ? (
@@ -2189,10 +2232,10 @@ export function MessagesApp({
onCancel={() => setEditingMessageId(null)}
/>
) : (
-
+
{renderContent(msg.content)}
{msg.state === "pending" && (
- ...
+ ...
)}
{msg.state === "streaming" && (
@@ -2223,7 +2266,7 @@ export function MessagesApp({
const url = msg.metadata?.canvas_url ?? `/canvas/${msg.metadata?.canvas_id}`;
setViewingCanvas({ url, title: msg.metadata?.canvas_title as string | undefined });
}}
- className="h-7 px-2.5 text-[12px] gap-1.5 bg-white/[0.04] border-white/10 hover:bg-white/[0.08]"
+ className="h-7 px-2.5 text-[12px] gap-1.5 bg-shell-surface border-shell-border-strong hover:bg-shell-surface-hover"
aria-label="View canvas"
>
- {Object.entries(msg.reactions).map(([emoji, users]) => (
-
- ))}
+ = {
const CAPABILITY_COLORS: Record = {
chat: "bg-sky-500/20 text-sky-400",
- code: "bg-violet-500/20 text-violet-400",
+ code: "bg-cyan-500/20 text-cyan-400",
reasoning: "bg-amber-500/20 text-amber-400",
multilingual: "bg-emerald-500/20 text-emerald-400",
};
@@ -424,7 +424,7 @@ export function ModelsApp({ windowId: _windowId }: { windowId: string }) {
aria-pressed={subFilter === opt}
className={`text-[11px] px-2 py-0.5 rounded-full border transition-colors ${
subFilter === opt
- ? "bg-violet-500/25 border-violet-500/40 text-violet-200"
+ ? "bg-cyan-500/25 border-cyan-500/40 text-cyan-200"
: "bg-white/5 border-white/10 text-shell-text-secondary hover:bg-white/10"
}`}
>
@@ -531,7 +531,7 @@ export function ModelsApp({ windowId: _windowId }: { windowId: string }) {
{filteredCloud.length > 0 && (
diff --git a/desktop/src/apps/ProjectsApp/board/BoardToolbar.module.css b/desktop/src/apps/ProjectsApp/board/BoardToolbar.module.css
index 78986b01a..615d0d98b 100644
--- a/desktop/src/apps/ProjectsApp/board/BoardToolbar.module.css
+++ b/desktop/src/apps/ProjectsApp/board/BoardToolbar.module.css
@@ -4,18 +4,18 @@
.seg { display: inline-flex; gap: 0; background: rgba(255,255,255,.05); border: 1px solid var(--board-hair); border-radius: 8px; padding: 2px; }
.seg button { background: transparent; border: 0; padding: 4px 10px; border-radius: 6px; color: #86868b; font: 600 11.5px -apple-system; cursor: pointer; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
-.seg button.on { background: rgba(167,139,250,.18); color: #fff; box-shadow: 0 0 0 1px rgba(167,139,250,.3); }
+.seg button.on { background: rgba(34,211,238,.18); color: #fff; box-shadow: 0 0 0 1px rgba(34,211,238,.3); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255,255,255,.05); border: 1px solid var(--board-hair); border-radius: 8px; color: #d2d2d7; font: 600 11.5px -apple-system; cursor: pointer; }
.pill select { background: transparent; color: inherit; border: 0; font: inherit; outline: none; }
.live { color: #5fdb84; }
.live::before, .dead::before { content: "● "; }
.dead { color: #86868b; }
.search { background: rgba(255,255,255,.05); border: 1px solid var(--board-hair); border-radius: 8px; color: #f5f5f7; padding: 5px 10px; font: 11.5px -apple-system; min-width: 220px; outline: none; }
-.search:focus { border-color: rgba(167,139,250,.5); }
-.add { background: var(--board-accent-violet); border: 0; color: #1a1a1c; padding: 5px 12px; border-radius: 8px; font: 700 11.5px -apple-system; cursor: pointer; }
+.search:focus { border-color: rgba(34,211,238,.5); }
+.add { background: var(--board-accent-cyan); border: 0; color: #1a1a1c; padding: 5px 12px; border-radius: 8px; font: 700 11.5px -apple-system; cursor: pointer; }
.filterWrap { position: relative; }
.popover { position: absolute; top: calc(100% + 6px); right: 0; background: #1f1f22; border: 1px solid var(--board-hair); padding: 10px; border-radius: 10px; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 10; display: flex; flex-direction: column; gap: 8px; }
.popRow { display: flex; gap: 8px; align-items: center; font: 12px -apple-system; color: #d2d2d7; }
.chipRow { display: flex; gap: 4px; }
.chip { background: rgba(255,255,255,.05); border: 1px solid var(--board-hair); border-radius: 6px; padding: 3px 8px; color: #86868b; font: 600 10.5px -apple-system; cursor: pointer; }
-.chipOn { background: rgba(167,139,250,.18); color: #fff; border-color: rgba(167,139,250,.4); }
+.chipOn { background: rgba(34,211,238,.18); color: #fff; border-color: rgba(34,211,238,.4); }
diff --git a/desktop/src/apps/ProjectsApp/board/TaskCard.module.css b/desktop/src/apps/ProjectsApp/board/TaskCard.module.css
index eff619e74..97cfd18d1 100644
--- a/desktop/src/apps/ProjectsApp/board/TaskCard.module.css
+++ b/desktop/src/apps/ProjectsApp/board/TaskCard.module.css
@@ -1,5 +1,5 @@
.card { width: 100%; text-align: left; padding: 0; background: var(--board-card-bg); border: 1px solid var(--board-hair); border-radius: 11px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden; color: var(--ink-1, #f5f5f7); }
-.card:hover { transform: translateY(-2px); border-color: var(--board-hair-strong); box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(167,139,250,.18); }
+.card:hover { transform: translateY(-2px); border-color: var(--board-hair-strong); box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(34,211,238,.18); }
.priEdge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.p0 .priEdge { background: linear-gradient(180deg, var(--board-p0), #c70015); }
.p1 .priEdge { background: linear-gradient(180deg, var(--board-p1), #c97e15); }
diff --git a/desktop/src/apps/ProjectsApp/board/TaskCardCover.module.css b/desktop/src/apps/ProjectsApp/board/TaskCardCover.module.css
index 0f4096108..1c190f62e 100644
--- a/desktop/src/apps/ProjectsApp/board/TaskCardCover.module.css
+++ b/desktop/src/apps/ProjectsApp/board/TaskCardCover.module.css
@@ -3,5 +3,5 @@
.terminal { height: 110px; padding: 9px 11px; background: #0d0d10; font: 10px/1.55 ui-monospace, monospace; color: #82aaff; overflow: hidden; border-bottom: 1px solid var(--board-hair); position: relative; }
.screenshot { height: 110px; background: linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #1e1b4b 100%); border-bottom: 1px solid var(--board-hair); position: relative; }
.badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.55); color: #f5f5f7; font: 600 9.5px/1 -apple-system, sans-serif; padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); text-transform: uppercase; letter-spacing: 0.5px; }
-.cursor { display: inline-block; width: 6px; height: 11px; background: var(--board-accent-violet); animation: blink 1.1s steps(2) infinite; }
+.cursor { display: inline-block; width: 6px; height: 11px; background: var(--board-accent-cyan); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
diff --git a/desktop/src/apps/ProjectsApp/board/TaskModal.module.css b/desktop/src/apps/ProjectsApp/board/TaskModal.module.css
index 75b343321..789896120 100644
--- a/desktop/src/apps/ProjectsApp/board/TaskModal.module.css
+++ b/desktop/src/apps/ProjectsApp/board/TaskModal.module.css
@@ -15,6 +15,6 @@
.layout > aside { background: rgba(255,255,255,.025); border: 1px solid var(--board-hair); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; font: 12px -apple-system; color: #d2d2d7; }
.layout > aside h4 { font: 600 10.5px -apple-system; color: #86868b; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .5px; }
.layout > aside input { background: rgba(255,255,255,.05); border: 1px solid var(--board-hair); color: #f5f5f7; border-radius: 6px; padding: 4px 8px; font: 12px -apple-system; width: 100%; outline: none; }
-.layout > aside input:focus { border-color: rgba(167,139,250,.5); }
+.layout > aside input:focus { border-color: rgba(34,211,238,.5); }
.layout > aside [role="button"] { cursor: pointer; }
.layout > aside [role="button"]:hover { color: #fff; }
diff --git a/desktop/src/apps/ProvidersApp.tsx b/desktop/src/apps/ProvidersApp.tsx
index 04881e7ce..031183ff4 100644
--- a/desktop/src/apps/ProvidersApp.tsx
+++ b/desktop/src/apps/ProvidersApp.tsx
@@ -161,7 +161,7 @@ function TypePill({ type }: { type: string }) {
return (
{type}
@@ -1029,7 +1029,7 @@ function ProviderDetail({
return (
{label}
diff --git a/desktop/src/apps/SecretsApp.tsx b/desktop/src/apps/SecretsApp.tsx
index 658b85b13..582a28494 100644
--- a/desktop/src/apps/SecretsApp.tsx
+++ b/desktop/src/apps/SecretsApp.tsx
@@ -9,6 +9,7 @@ import {
Input,
Label,
} from "@/components/ui";
+import { GitHubConnect } from "./secrets/GitHubConnect";
/* ------------------------------------------------------------------ */
/* Types */
@@ -31,7 +32,7 @@ type CategoryFilter = "all" | "api-key" | "credential" | "token" | "config";
const CATEGORY_STYLES: Record = {
"api-key": "bg-sky-500/20 text-sky-400",
- credential: "bg-violet-500/20 text-violet-400",
+ credential: "bg-cyan-500/20 text-cyan-400",
token: "bg-amber-500/20 text-amber-400",
config: "bg-emerald-500/20 text-emerald-400",
};
@@ -345,6 +346,9 @@ export function SecretsApp({ windowId: _windowId }: { windowId: string }) {
{/* Content */}
+ {Object.entries(msg.reactions).map(([emoji, users]) => {
+ const mine = currentUserId != null && users.includes(currentUserId);
+ return (
+
+ );
+ })}
)}
@@ -2253,7 +2304,7 @@ export function MessagesApp({
const excerpt = (msg.content || "").slice(0, 80);
const msgChannelId = msg.channel_id ?? selectedChannel ?? "";
return (
-
+
{
if (showEmoji && showEmoji.messageId === msg.id) {
@@ -2354,6 +2405,7 @@ export function MessagesApp({
})(),
document.body,
)}
+
);
diff --git a/desktop/src/apps/ModelsApp.tsx b/desktop/src/apps/ModelsApp.tsx
index 811c71851..ed4f1e676 100644
--- a/desktop/src/apps/ModelsApp.tsx
+++ b/desktop/src/apps/ModelsApp.tsx
@@ -83,7 +83,7 @@ const COMPAT_STYLES: Record
-
@@ -541,7 +541,7 @@ export function ModelsApp({ windowId: _windowId }: { windowId: string }) {
Cloud Models
({filteredCloud.length}){model.filename}
- + {model.host}
+
+
{loading ? (
Loading secrets...
diff --git a/desktop/src/apps/SettingsApp/__tests__/ThemesPanel.test.tsx b/desktop/src/apps/SettingsApp/__tests__/ThemesPanel.test.tsx
index 8a4c7e15c..344de32cb 100644
--- a/desktop/src/apps/SettingsApp/__tests__/ThemesPanel.test.tsx
+++ b/desktop/src/apps/SettingsApp/__tests__/ThemesPanel.test.tsx
@@ -20,10 +20,10 @@ describe("ThemesPanel", () => {
expect(document.documentElement.style.getPropertyValue("--color-accent")).toBe("");
});
- it("shows built-in Default and Matrix Terminal even when server returns empty list", async () => {
+ it("shows built-in taOS Dark and taOS Light even when server returns empty list", async () => {
vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true, json: async () => [] }));
render( = {
- rkllama: { label: "rkllama (NPU)", icon: "🧠", color: "purple", classes: "bg-purple-500/15 text-purple-300 border-purple-500/30" },
- "rk-llama-cpp": { label: "rk-llama.cpp (NPU GGUF)", icon: "🧠", color: "violet", classes: "bg-violet-500/15 text-violet-300 border-violet-500/30" },
- ezrknpu: { label: "ezrknpu", icon: "🧩", color: "purple", classes: "bg-purple-500/15 text-purple-300 border-purple-500/30" },
+ rkllama: { label: "rkllama (NPU)", icon: "🧠", color: "cyan", classes: "bg-cyan-500/15 text-cyan-300 border-cyan-500/30" },
+ "rk-llama-cpp": { label: "rk-llama.cpp (NPU GGUF)", icon: "🧠", color: "cyan", classes: "bg-cyan-500/15 text-cyan-300 border-cyan-500/30" },
+ ezrknpu: { label: "ezrknpu", icon: "🧩", color: "cyan", classes: "bg-cyan-500/15 text-cyan-300 border-cyan-500/30" },
ollama: { label: "Ollama", icon: "🦙", color: "blue", classes: "bg-blue-500/15 text-blue-300 border-blue-500/30" },
"llama-cpp": { label: "llama.cpp", icon: "🦫", color: "amber", classes: "bg-amber-500/15 text-amber-300 border-amber-500/30" },
vllm: { label: "vLLM", icon: "⚡", color: "yellow", classes: "bg-yellow-500/15 text-yellow-300 border-yellow-500/30" },
@@ -33,7 +33,7 @@ export const BACKEND_META: Record = {
transformers: { label: "Transformers", icon: "🤗", color: "rose", classes: "bg-rose-500/15 text-rose-300 border-rose-500/30" },
"sentence-transformers": { label: "Sentence Transformers", icon: "🤗", color: "rose", classes: "bg-rose-500/15 text-rose-300 border-rose-500/30" },
diffusers: { label: "Diffusers", icon: "🎨", color: "fuchsia", classes: "bg-fuchsia-500/15 text-fuchsia-300 border-fuchsia-500/30" },
- comfyui: { label: "ComfyUI", icon: "🧩", color: "indigo", classes: "bg-indigo-500/15 text-indigo-300 border-indigo-500/30" },
+ comfyui: { label: "ComfyUI", icon: "🧩", color: "cyan", classes: "bg-cyan-500/15 text-cyan-300 border-cyan-500/30" },
"sd-webui": { label: "SD WebUI", icon: "🎨", color: "fuchsia", classes: "bg-fuchsia-500/15 text-fuchsia-300 border-fuchsia-500/30" },
"stable-diffusion-cpp": { label: "stable-diffusion.cpp", icon: "🖼️", color: "pink", classes: "bg-pink-500/15 text-pink-300 border-pink-500/30" },
fastsdcpu: { label: "FastSD CPU", icon: "🖌️", color: "teal", classes: "bg-teal-500/15 text-teal-300 border-teal-500/30" },
diff --git a/desktop/src/apps/StoreApp/index.tsx b/desktop/src/apps/StoreApp/index.tsx
index 745463607..67d9ae6ef 100644
--- a/desktop/src/apps/StoreApp/index.tsx
+++ b/desktop/src/apps/StoreApp/index.tsx
@@ -1,6 +1,10 @@
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { ShoppingBag, Search, Download, Trash2, Check, Package, Loader2, Bot, Brain, Plug, Wrench, Image, Music, Video, Globe, Home, Cpu, Sparkles, Workflow, ClipboardList, Server } from "lucide-react";
-import { Button, Card, CardContent, CardFooter, CardHeader, Input } from "@/components/ui";
+import {
+ Search, Download, Trash2, Check, Package, Loader2, Server,
+ Compass, Grid2x2, Bot, Brain, Plug, Wrench, Star, Globe,
+ ArrowDownToLine, RefreshCw, Users, Cpu,
+} from "lucide-react";
+import { Input } from "@/components/ui";
import { fetchLatestFrameworks, LatestVersion } from "@/lib/framework-api";
import type { CatalogApp, InstallTarget, InstalledEntry } from "./types";
import { DevicePillBar, UnknownHardwareBanner } from "./DevicePillBar";
@@ -12,406 +16,350 @@ import { compatVisuals } from "./compat-visuals";
import { loadFilter, saveFilter } from "./storage";
import { emitAppEvent, APP_INSTALLED } from "@/lib/app-event-bus";
-/* ------------------------------------------------------------------ */
-/* Categories */
-/* ------------------------------------------------------------------ */
-
-interface Category {
- id: string;
+/* ------------------------------------------------------------------
+ Dashboard-icons CDN helper
+ ------------------------------------------------------------------ */
+
+const di = (slug: string) =>
+ `https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/${slug}.png`;
+
+/* ------------------------------------------------------------------
+ Nav sections
+ ------------------------------------------------------------------ */
+
+type NavId =
+ | "discover"
+ | "apps"
+ | "agents"
+ | "models"
+ | "services"
+ | "mcp"
+ | "devtools"
+ | "community"
+ | "installed"
+ | "updates";
+
+interface NavItem {
+ id: NavId;
label: string;
icon: React.ReactNode;
- types: string[]; // which app types belong here
- description: string;
+ group?: string;
}
-// Each category lists the identifiers (category OR type fallback) that land in it.
-// The Services category is intentionally absent — every service-typed app carries
-// an explicit `category:` that routes it to one of the categories below.
-const CATEGORIES: Category[] = [
- { id: "all", label: "All Apps", icon: ): string => app.category || app.type;
+/* ------------------------------------------------------------------
+ Homelab catalog additions with real star counts + dashboard-icons
+ ------------------------------------------------------------------ */
+
+const HOMELAB_APPS: CatalogApp[] = [
+ {
+ id: "home-assistant", name: "Home Assistant", type: "home",
+ version: "latest", description: "Run your whole smart home locally. 2,000+ integrations, no cloud.",
+ tagline: "Open-source home automation platform",
+ installed: false, compat: "green",
+ repo: "home-assistant/core", iconSlug: "home-assistant", stars: 72400,
+ cover: "radial-gradient(120% 120% at 30% 20%,#16607a,transparent 60%),linear-gradient(140deg,#0e2230,#0a1620)",
+ category: "home",
+ },
+ {
+ id: "immich", name: "Immich", type: "home",
+ version: "latest", description: "Your own Google Photos. AI search, face grouping, phone backup.",
+ tagline: "Self-hosted photo and video library",
+ installed: false, compat: "green",
+ repo: "immich-app/immich", iconSlug: "immich", stars: 50100,
+ cover: "radial-gradient(120% 120% at 70% 30%,#5a2f7a,transparent 60%),linear-gradient(140deg,#21142b,#150d1a)",
+ category: "home",
+ },
+ {
+ id: "jellyfin", name: "Jellyfin", type: "home",
+ version: "latest", description: "Stream your movies, shows and music to any device. Zero fees.",
+ tagline: "Free and open source media server",
+ installed: false, compat: "green",
+ repo: "jellyfin/jellyfin", iconSlug: "jellyfin", stars: 35000,
+ cover: "radial-gradient(120% 120% at 40% 30%,#1f4d63,transparent 60%),linear-gradient(140deg,#10222a,#0b161b)",
+ category: "home",
+ },
+ {
+ id: "vaultwarden", name: "Vaultwarden", type: "home",
+ version: "latest", description: "Self-hosted Bitwarden. Your passwords never leave the house.",
+ tagline: "Unofficial Bitwarden-compatible server",
+ installed: false, compat: "green",
+ repo: "dani-garcia/vaultwarden", iconSlug: "vaultwarden", stars: 42000,
+ cover: "radial-gradient(120% 120% at 60% 25%,#1f5a3a,transparent 60%),linear-gradient(140deg,#12261b,#0c1712)",
+ category: "home",
+ },
+ {
+ id: "sonarr", name: "Sonarr", type: "home",
+ version: "latest", description: "TV series library manager and downloader automation.",
+ tagline: "Smart PVR for Usenet and BitTorrent users",
+ installed: false, compat: "green",
+ repo: "Sonarr/Sonarr", iconSlug: "sonarr", stars: 11200,
+ category: "home",
+ },
+ {
+ id: "radarr", name: "Radarr", type: "home",
+ version: "latest", description: "Movie collection manager and download automator.",
+ tagline: "Fork of Sonarr to work with movies",
+ installed: false, compat: "green",
+ repo: "Radarr/Radarr", iconSlug: "radarr", stars: 9600,
+ category: "home",
+ },
+ {
+ id: "qbittorrent", name: "qBittorrent", type: "home",
+ version: "latest", description: "Fast and lightweight BitTorrent client with web UI.",
+ tagline: "Open-source software alternative to uTorrent",
+ installed: false, compat: "green",
+ repo: "qbittorrent/qBittorrent", iconSlug: "qbittorrent", stars: 27600,
+ category: "home",
+ },
+ {
+ id: "sabnzbd", name: "SABnzbd", type: "home",
+ version: "latest", description: "The automated Usenet download application.",
+ tagline: "Open source binary newsreader",
+ installed: false, compat: "green",
+ repo: "sabnzbd/sabnzbd", iconSlug: "sabnzbd", stars: 2600,
+ category: "home",
+ },
+ {
+ id: "homebridge", name: "Homebridge", type: "home",
+ version: "latest", description: "Bring non-native devices into Apple Home via HomeKit.",
+ tagline: "HomeKit support for non-native accessories",
+ installed: false, compat: "green",
+ repo: "homebridge/homebridge", iconSlug: "homebridge", stars: 24500,
+ category: "home",
+ },
+ {
+ id: "adguard-home", name: "AdGuard Home", type: "infrastructure",
+ version: "latest", description: "Network-wide ad and tracker blocking. No cloud dependency.",
+ tagline: "Network-wide software for blocking ads",
+ installed: false, compat: "green",
+ repo: "AdguardTeam/AdGuardHome", iconSlug: "adguard-home", stars: 26800,
+ category: "infrastructure",
+ },
+ {
+ id: "uptime-kuma", name: "Uptime Kuma", type: "monitoring",
+ version: "latest", description: "Self-hosted monitoring tool -- track uptime for services and APIs.",
+ tagline: "Fancy self-hosted monitoring tool",
+ installed: false, compat: "green",
+ repo: "louislam/uptime-kuma", iconSlug: "uptime-kuma", stars: 60300,
+ category: "monitoring",
+ },
+ {
+ id: "nextcloud", name: "Nextcloud", type: "productivity",
+ version: "latest", description: "Files, calendar, contacts and office suite in one open-source platform.",
+ tagline: "The most popular self-hosted collaboration platform",
+ installed: false, compat: "green",
+ repo: "nextcloud/server", iconSlug: "nextcloud", stars: 28100,
+ category: "productivity",
+ },
+];
-/* ------------------------------------------------------------------ */
-/* Mock data with proper categories */
-/* ------------------------------------------------------------------ */
+/* ------------------------------------------------------------------
+ Mock catalog (used when /api/store/catalog is unreachable)
+ ------------------------------------------------------------------ */
const MOCK_APPS: CatalogApp[] = [
// Agent Frameworks
- { id: "smolagents", name: "SmolAgents", type: "agent-framework", version: "1.0.0", description: "HuggingFace code-based agents — well-documented, 26k stars", installed: false, compat: "green" },
- { id: "pocketflow", name: "PocketFlow", type: "agent-framework", version: "1.0.0", description: "Minimal 100-line framework, zero deps, graph-based", installed: false, compat: "green" },
- { id: "openclaw", name: "OpenClaw", type: "agent-framework", version: "1.0.0", description: "Full-featured multi-channel agent framework", installed: true, compat: "green" },
- { id: "langroid", name: "Langroid", type: "agent-framework", version: "1.0.0", description: "Multi-agent message-passing framework", installed: false, compat: "green" },
- { id: "openai-agents-sdk", name: "OpenAI Agents SDK", type: "agent-framework", version: "1.0.0", description: "Provider-agnostic agent SDK from OpenAI", installed: false, compat: "green" },
-
+ { id: "smolagents", name: "SmolAgents", type: "agent-framework", version: "1.0.0", description: "HuggingFace code-based agents -- well-documented, 26k stars", installed: false, compat: "green", stars: 26000 },
+ { id: "pocketflow", name: "PocketFlow", type: "agent-framework", version: "1.0.0", description: "Minimal 100-line framework, zero deps, graph-based", installed: false, compat: "green" },
+ { id: "openclaw", name: "OpenClaw", type: "agent-framework", version: "1.0.0", description: "Full-featured multi-channel agent framework", installed: true, compat: "green" },
+ { id: "langroid", name: "Langroid", type: "agent-framework", version: "1.0.0", description: "Multi-agent message-passing framework", installed: false, compat: "green" },
+ { id: "openai-agents-sdk",name: "OpenAI Agents SDK", type: "agent-framework", version: "1.0.0", description: "Provider-agnostic agent SDK from OpenAI", installed: false, compat: "green" },
// Models
- { id: "qwen3-4b", name: "Qwen3 4B", type: "model", version: "3.0.0", description: "Good balance of speed and capability for most tasks", installed: true, compat: "green" },
- { id: "qwen3-1.7b", name: "Qwen3 1.7B", type: "model", version: "3.0.0", description: "Fast, fits comfortably in 8GB RAM", installed: false, compat: "green" },
- { id: "qwen3-8b", name: "Qwen3 8B", type: "model", version: "3.0.0", description: "Most capable local model for 16GB devices", installed: false, compat: "yellow" },
-
+ { id: "qwen3-4b", name: "Qwen3 4B", type: "model", version: "3.0.0", description: "Good balance of speed and capability for most tasks", installed: true, compat: "green" },
+ { id: "qwen3-1.7b",name: "Qwen3 1.7B",type: "model", version: "3.0.0", description: "Fast, fits comfortably in 8GB RAM", installed: false, compat: "green" },
+ { id: "qwen3-8b", name: "Qwen3 8B", type: "model", version: "3.0.0", description: "Most capable local model for 16GB devices", installed: false, compat: "yellow" },
// MCP Servers
- { id: "mcp-pandoc", name: "MCP Pandoc", type: "mcp", version: "0.1.0", description: "Document format conversion — markdown, docx, pdf, 30+ formats", installed: false, compat: "green" },
- { id: "mcp-server-office", name: "MCP Office Docs", type: "mcp", version: "0.1.0", description: "Read, write, and edit .docx files programmatically", installed: false, compat: "green" },
- { id: "playwright-mcp", name: "Playwright MCP", type: "mcp", version: "1.0.0", description: "Browser automation for agents via Playwright", installed: false, compat: "green" },
- { id: "github-mcp-server", name: "GitHub MCP", type: "mcp", version: "1.0.0", description: "Issues, PRs, repos, search — official GitHub MCP", installed: false, compat: "green" },
- { id: "mcp-memory", name: "MCP Memory", type: "mcp", version: "1.0.0", description: "Knowledge graph memory for persistent context", installed: false, compat: "green" },
+ { id: "mcp-pandoc", name: "MCP Pandoc", type: "mcp", version: "0.1.0", description: "Document format conversion -- markdown, docx, pdf, 30+ formats", installed: false, compat: "green" },
+ { id: "mcp-server-office",name: "MCP Office Docs", type: "mcp", version: "0.1.0", description: "Read, write, and edit .docx files programmatically", installed: false, compat: "green" },
+ { id: "playwright-mcp", name: "Playwright MCP", type: "mcp", version: "1.0.0", description: "Browser automation for agents via Playwright", installed: false, compat: "green" },
+ { id: "github-mcp-server",name: "GitHub MCP", type: "mcp", version: "1.0.0", description: "Issues, PRs, repos, search -- official GitHub MCP", installed: false, compat: "green" },
+ { id: "mcp-memory", name: "MCP Memory", type: "mcp", version: "1.0.0", description: "Knowledge graph memory for persistent context", installed: false, compat: "green" },
// Plugins
- { id: "web-search", name: "Web Search", type: "plugin", version: "0.3.0", description: "Search the web via SearXNG or Perplexica", installed: false, compat: "green" },
- { id: "image-generation-tool", name: "Image Generation", type: "plugin", version: "0.1.0", description: "Generate images via Stable Diffusion", installed: false, compat: "green" },
-
- // Ex-services, now categorised
+ { id: "web-search", name: "Web Search", type: "plugin", version: "0.3.0", description: "Search the web via SearXNG or Perplexica", installed: false, compat: "green" },
+ { id: "image-generation-tool",name: "Image Generation", type: "plugin", version: "0.1.0", description: "Generate images via Stable Diffusion", installed: false, compat: "green" },
+ // Services
{ id: "searxng", name: "SearXNG", type: "service", category: "infrastructure", version: "latest", description: "Privacy-respecting metasearch engine", installed: false, compat: "green" },
- { id: "gitea", name: "Gitea", type: "service", category: "dev-tool", version: "latest", description: "Lightweight self-hosted Git service", installed: false, compat: "green" },
- { id: "n8n", name: "n8n", type: "service", category: "automation", version: "latest", description: "Workflow automation platform", installed: false, compat: "green" },
-
- // Streaming Apps
+ { id: "gitea", name: "Gitea", type: "service", category: "dev-tool", version: "latest", description: "Lightweight self-hosted Git service", installed: false, compat: "green" },
+ { id: "n8n", name: "n8n", type: "service", category: "automation", version: "latest", description: "Workflow automation platform", installed: false, compat: "green", iconSlug: "n8n" },
+ // Streaming apps
{ id: "code-server-kasm", name: "Code Server (Streamed)", type: "streaming-app", version: "latest", description: "VS Code in the browser via KasmVNC", installed: false, compat: "green" },
- { id: "blender", name: "Blender", type: "streaming-app", version: "latest", description: "3D creation suite streamed via KasmVNC", installed: false, compat: "yellow" },
- { id: "libreoffice", name: "LibreOffice", type: "streaming-app", version: "latest", description: "Full office suite streamed via KasmVNC", installed: false, compat: "green" },
-
- // Image Gen
- { id: "comfyui", name: "ComfyUI", type: "image-gen", version: "latest", description: "Node-based Stable Diffusion workflow editor", installed: false, compat: "yellow" },
+ { id: "blender", name: "Blender", type: "streaming-app", version: "latest", description: "3D creation suite streamed via KasmVNC", installed: false, compat: "yellow" },
+ { id: "libreoffice", name: "LibreOffice", type: "streaming-app", version: "latest", description: "Full office suite streamed via KasmVNC", installed: false, compat: "green" },
+ // Image gen
+ {
+ id: "comfyui", name: "ComfyUI", type: "image-gen", version: "latest",
+ description: "Node-based visual pipelines for image, video and audio generation. Runs on your cluster, drives any model you've installed.",
+ tagline: "Node-based Stable Diffusion workflow editor",
+ installed: false, compat: "yellow",
+ iconSlug: "comfyui",
+ cover: "radial-gradient(120% 140% at 12% 18%,#3a2d5e,transparent 55%),radial-gradient(120% 130% at 85% 80%,#1e4d63,transparent 55%),linear-gradient(120deg,#20202a,#14141a)",
+ },
{ id: "fooocus", name: "Fooocus", type: "image-gen", version: "latest", description: "Simple Stable Diffusion with minimal setup", installed: false, compat: "yellow" },
+ // Audio / video / devtools / infra
+ { id: "kokoro-tts", name: "Kokoro TTS", type: "voice", version: "latest", description: "High-quality text-to-speech", installed: false, compat: "green" },
+ { id: "whisper-stt", name: "Whisper STT", type: "voice", version: "latest", description: "OpenAI Whisper speech-to-text", installed: false, compat: "green" },
+ { id: "animatediff", name: "AnimateDiff", type: "video-gen",version: "latest", description: "AI video generation from text and images", installed: false, compat: "yellow" },
+ { id: "corridorkey", name: "CorridorKey", type: "video-gen",version: "latest", description: "AI video generation via ComfyUI workflows", installed: false, compat: "yellow" },
+ { id: "code-server", name: "Code Server", type: "dev-tool", version: "latest", description: "VS Code in the browser -- remote development environment", installed: false, compat: "green" },
+ { id: "jupyter-lab", name: "JupyterLab", type: "dev-tool", version: "latest", description: "Interactive notebooks for data science and experimentation", installed: false, compat: "green" },
+ { id: "tailscale", name: "Tailscale", type: "infrastructure", version: "latest", description: "Zero-config mesh VPN for secure networking between devices", installed: false, compat: "green", iconSlug: "tailscale" },
+ { id: "caddy", name: "Caddy", type: "infrastructure", version: "latest", description: "Automatic HTTPS reverse proxy and web server", installed: false, compat: "green" },
+ ...HOMELAB_APPS,
+];
- // Audio
- { id: "kokoro-tts", name: "Kokoro TTS", type: "voice", version: "latest", description: "High-quality text-to-speech", installed: false, compat: "green" },
- { id: "whisper-stt", name: "Whisper STT", type: "voice", version: "latest", description: "OpenAI Whisper speech-to-text", installed: false, compat: "green" },
-
- // Video
- { id: "animatediff", name: "AnimateDiff", type: "video-gen", version: "latest", description: "AI video generation from text and images", installed: false, compat: "yellow" },
- { id: "corridorkey", name: "CorridorKey", type: "video-gen", version: "latest", description: "AI video generation via ComfyUI workflows", installed: false, compat: "yellow" },
-
- // Dev Tools
- { id: "code-server", name: "Code Server", type: "dev-tool", version: "latest", description: "VS Code in the browser — remote development environment", installed: false, compat: "green" },
- { id: "jupyter-lab", name: "JupyterLab", type: "dev-tool", version: "latest", description: "Interactive notebooks for data science and experimentation", installed: false, compat: "green" },
+/* ------------------------------------------------------------------
+ Community showcase items (static mock -- no backend yet)
+ ------------------------------------------------------------------ */
- // Home & Monitor
- { id: "home-assistant", name: "Home Assistant", type: "home", version: "latest", description: "Open-source home automation platform", installed: false, compat: "green" },
- { id: "uptime-kuma", name: "Uptime Kuma", type: "monitoring", version: "latest", description: "Self-hosted monitoring tool — track uptime for services and APIs", installed: false, compat: "green" },
+interface CommunityItem {
+ id: string;
+ name: string;
+ badge: string;
+ author: string;
+ description: string;
+ installs: number;
+ icon: React.ReactNode;
+ cover: string;
+}
- // Infrastructure
- { id: "tailscale", name: "Tailscale", type: "infrastructure", version: "latest", description: "Zero-config mesh VPN for secure networking between devices", installed: false, compat: "green" },
- { id: "caddy", name: "Caddy", type: "infrastructure", version: "latest", description: "Automatic HTTPS reverse proxy and web server", installed: false, compat: "green" },
+const COMMUNITY_ITEMS: CommunityItem[] = [
+ {
+ id: "matrix-terminal",
+ name: "Matrix Terminal",
+ badge: "Theme",
+ author: "@neo",
+ description: "Phosphor-green terminal theme with a code-rain wallpaper.",
+ installs: 1240,
+ icon: >_,
+ cover: "radial-gradient(120% 120% at 35% 25%,#103a2a,transparent 60%),linear-gradient(140deg,#0c1a14,#08120d)",
+ },
+ {
+ id: "aurora-drift",
+ name: "Aurora Drift",
+ badge: "Live Wallpaper",
+ author: "@ria",
+ description: "Slow-flowing aurora ribbons that adapt to any screen.",
+ installs: 842,
+ icon: ✺,
+ cover: "radial-gradient(120% 120% at 60% 25%,#2a3f7a,transparent 60%),linear-gradient(140deg,#141a2b,#0d1119)",
+ },
+ {
+ id: "habit-garden",
+ name: "Habit Garden",
+ badge: "App",
+ author: "@sol",
+ description: "Grow a plant as you keep streaks. Built with the App Builder.",
+ installs: 3110,
+ icon: ❀,
+ cover: "radial-gradient(120% 120% at 40% 25%,#5a3a1f,transparent 60%),linear-gradient(140deg,#231811,#16100a)",
+ },
+ {
+ id: "standup-bot",
+ name: "Standup Bot",
+ badge: "Agent",
+ author: "@max",
+ description: "Collects daily updates from your agents and posts a digest.",
+ installs: 567,
+ icon: ◆,
+ cover: "radial-gradient(120% 120% at 55% 25%,#4a2a5e,transparent 60%),linear-gradient(140deg,#1c1426,#120c18)",
+ },
];
-/* ------------------------------------------------------------------ */
-/* Helpers */
-/* ------------------------------------------------------------------ */
-
-const TYPE_COLORS: Record = {
- "agent-framework": "bg-blue-500/20 text-blue-400",
- model: "bg-slate-500/20 text-slate-400",
- service: "bg-amber-500/20 text-amber-400",
- plugin: "bg-teal-500/20 text-teal-400",
- mcp: "bg-violet-500/20 text-violet-400",
- "streaming-app": "bg-indigo-500/20 text-indigo-400",
- "image-gen": "bg-pink-500/20 text-pink-400",
- "image-model": "bg-pink-500/20 text-pink-400",
- voice: "bg-orange-500/20 text-orange-400",
- audio: "bg-orange-500/20 text-orange-400",
- "video-gen": "bg-red-500/20 text-red-400",
- "dev-tool": "bg-cyan-500/20 text-cyan-400",
- home: "bg-green-500/20 text-green-400",
- monitoring: "bg-green-500/20 text-green-400",
- infrastructure: "bg-slate-500/20 text-slate-400",
- "ai-app": "bg-fuchsia-500/20 text-fuchsia-400",
- automation: "bg-lime-500/20 text-lime-400",
- productivity: "bg-sky-500/20 text-sky-400",
- "llm-runtime": "bg-purple-500/20 text-purple-400",
- music: "bg-rose-500/20 text-rose-400",
-};
+/* ------------------------------------------------------------------
+ Agent framework showcase for "Build agents with" section
+ ------------------------------------------------------------------ */
-const TYPE_LABELS: Record = {
- "agent-framework": "Framework",
- model: "Model",
- service: "Service",
- plugin: "Plugin",
- mcp: "MCP Server",
- "streaming-app": "Streaming",
- "image-gen": "Image Gen",
- "image-model": "Image Model",
- voice: "Voice",
- audio: "Audio",
- "video-gen": "Video",
- "dev-tool": "Dev Tool",
- home: "Home",
- monitoring: "Monitor",
- infrastructure: "Infra",
- "ai-app": "AI App",
- automation: "Automation",
- productivity: "Productivity",
- "llm-runtime": "LLM Runtime",
- music: "Music",
-};
+interface FrameworkItem {
+ id: string;
+ name: string;
+ sub: string;
+ iconStyle: React.CSSProperties;
+ iconChar: string;
+ installed?: boolean;
+ stars?: number;
+}
-const COMPAT_COLORS: Record = { green: "bg-emerald-400", yellow: "bg-amber-400", red: "bg-red-400" };
-const COMPAT_LABELS: Record = { green: "Compatible", yellow: "Partial", red: "Unsupported" };
-
-const TYPE_ICON_GRADIENTS: Record = {
- "agent-framework": "linear-gradient(135deg, rgba(59,130,246,0.3), rgba(59,130,246,0.1))",
- model: "linear-gradient(135deg, rgba(139,92,246,0.3), rgba(139,92,246,0.1))",
- service: "linear-gradient(135deg, rgba(245,158,11,0.3), rgba(245,158,11,0.1))",
- plugin: "linear-gradient(135deg, rgba(20,184,166,0.3), rgba(20,184,166,0.1))",
- "streaming-app": "linear-gradient(135deg, rgba(99,102,241,0.3), rgba(99,102,241,0.1))",
- "image-gen": "linear-gradient(135deg, rgba(236,72,153,0.3), rgba(236,72,153,0.1))",
- voice: "linear-gradient(135deg, rgba(249,115,22,0.3), rgba(249,115,22,0.1))",
- "dev-tool": "linear-gradient(135deg, rgba(6,182,212,0.3), rgba(6,182,212,0.1))",
- "ai-app": "linear-gradient(135deg, rgba(217,70,239,0.3), rgba(217,70,239,0.1))",
- automation: "linear-gradient(135deg, rgba(132,204,22,0.3), rgba(132,204,22,0.1))",
- productivity: "linear-gradient(135deg, rgba(14,165,233,0.3), rgba(14,165,233,0.1))",
- "llm-runtime": "linear-gradient(135deg, rgba(168,85,247,0.3), rgba(168,85,247,0.1))",
- music: "linear-gradient(135deg, rgba(244,63,94,0.3), rgba(244,63,94,0.1))",
-};
+const FRAMEWORK_ITEMS: FrameworkItem[] = [
+ { id: "openclaw", name: "OpenClaw", sub: "Agent Framework · ACP", iconStyle: { background: "linear-gradient(150deg,#ff7a5c,#ff5b3d)" }, iconChar: "◆", installed: true },
+ { id: "hermes", name: "Hermes", sub: "Agent Framework", iconStyle: { background: "linear-gradient(150deg,#8b5cff,#6a3dff)" }, iconChar: "⬡" },
+ { id: "pocketflow",name: "PocketFlow",sub: "Agent Framework", iconStyle: { background: "linear-gradient(150deg,#41d0a3,#27a982)" }, iconChar: "⟡" },
+ { id: "smolagents",name: "SmolAgents",sub: "Agent Framework", iconStyle: { background: "linear-gradient(150deg,#9aa0ad,#6e7686)" }, iconChar: "⬢", stars: 26000 },
+];
-/* ------------------------------------------------------------------ */
-/* App-specific icons */
-/* */
-/* URLs point at Simple Icons (SPDX CC0, curated brand assets) or */
-/* GitHub org/repo avatars. Every entry is an official logo from */
-/* the project's own canonical source — no third-party redraws. */
-/* */
-/* Loading rules (resolveIconUrl below): */
-/* 1. Exact id match in APP_ICONS */
-/* 2. Derived Simple Icons match for well-known models/services */
-/* 3. Fallback to the Package placeholder icon */
-/* ------------------------------------------------------------------ */
-
-// Simple Icons vendored locally under /static/store-icons/brands/ (white SVG).
-// Missing slugs (e.g. openai, removed upstream) 404 locally and fall back to
-// the Package placeholder via the onError handler on the ![]()
element.
-const si = (slug: string): string => `/static/store-icons/brands/${slug}.svg`;
+/* ------------------------------------------------------------------
+ Icon resolution: dashboard-icons CDN slug takes priority, then
+ existing APP_ICONS map, then derived family fallbacks.
+ ------------------------------------------------------------------ */
-// GitHub org/user avatar — used for projects without a Simple Icons
-// entry. `?size=96` keeps the transfer small; we render at 40px.
+const si = (slug: string): string => `/static/store-icons/brands/${slug}.svg`;
const gh = (owner: string): string => `https://github.com/${owner}.png?size=96`;
const APP_ICONS: Record = {
- // ---- Agent frameworks ----
- // Where the project ships an official logo in its repo we link it
- // directly; otherwise we use the owning org/user's GitHub avatar.
- "smolagents": gh("huggingface"),
- "pocketflow": gh("The-Pocket"),
+ // Agent frameworks
+ "smolagents": gh("huggingface"), "pocketflow": gh("The-Pocket"),
"openclaw": "/static/store-icons/openclaw.jpg",
- "nanoclaw": gh("openclaw"),
- "picoclaw": "https://raw.githubusercontent.com/sipeed/picoclaw/main/assets/logo.webp",
- "zeroclaw": gh("nicholasgasior"),
- "microclaw": gh("nicholasgasior"),
- "ironclaw": gh("nicholasgasior"),
- "nullclaw": gh("nicholasgasior"),
- "shibaclaw": "https://raw.githubusercontent.com/RikyZ90/ShibaClaw/main/assets/shibaclaw_logo.png",
- "moltis": gh("moltis-ai"),
- "hermes": gh("NousResearch"),
- "agent-zero": gh("frdel"),
- "openai-agents-sdk": si("openai"),
- "langroid": gh("langroid"),
-
- // ---- Model providers (Simple Icons / GitHub) ----
- "qwen2.5-0.5b": gh("QwenLM"), "qwen2.5-1.5b": gh("QwenLM"), "qwen2.5-3b": gh("QwenLM"),
- "qwen2.5-7b": gh("QwenLM"), "qwen2.5-14b": gh("QwenLM"), "qwen2.5-32b": gh("QwenLM"),
- "qwen2.5-72b": gh("QwenLM"), "qwen2.5-1.5b-rkllm": gh("QwenLM"), "qwen2.5-3b-rkllm": gh("QwenLM"),
- "qwen2.5-7b-rkllm": gh("QwenLM"), "qwen2.5-14b-rkllm": gh("QwenLM"),
- "qwen2.5-coder-7b": gh("QwenLM"), "qwen2.5-coder-14b": gh("QwenLM"),
- "qwen2.5-vl-7b": gh("QwenLM"), "qwen2-vl-7b": gh("QwenLM"),
- "qwen3-1.7b": gh("QwenLM"), "qwen3-4b": gh("QwenLM"), "qwen3-8b": gh("QwenLM"),
- "qwen3-14b": gh("QwenLM"), "qwen3-30b-a3b": gh("QwenLM"), "qwen3-32b": gh("QwenLM"),
- "qwen3-embedding-0.6b": gh("QwenLM"), "qwen3-reranker-0.6b": gh("QwenLM"),
- "llama-3.1-8b": si("meta"), "llama-3.2-1b": si("meta"), "llama-3.2-3b": si("meta"),
- "llama-3.3-70b": si("meta"), "llama-3-70b": si("meta"),
- "gemma-2-2b": si("googlegemini"), "gemma-2-9b": si("googlegemini"),
- "gemma-3-1b": si("googlegemini"), "gemma-3-4b": si("googlegemini"), "gemma-3-12b": si("googlegemini"),
- "phi-3.5-mini": gh("microsoft"), "phi-4": gh("microsoft"), "phi-4-mini": gh("microsoft"),
- "mistral-7b-v0.3": gh("mistralai"), "mistral-nemo-12b": gh("mistralai"),
- "mixtral-8x7b": gh("mistralai"), "ministral-3b": gh("mistralai"),
- "deepseek-r1-14b": gh("deepseek-ai"), "deepseek-coder-v2-lite": gh("deepseek-ai"),
- "granite-3.1-2b": gh("ibm-granite"), "granite-3.1-8b": gh("ibm-granite"),
- "command-r-35b": gh("cohere"),
- "smollm2": gh("huggingface"), "smollm2-135m": gh("huggingface"), "smollm2-360m": gh("huggingface"),
- "tinyllama-1.1b": gh("jzhang38"),
- "nemotron-mini-4b": gh("NVIDIA"),
- "pelochus-qwen-1.8b-rkllm": gh("pelochus"),
-
- // Vision / multimodal
- "llava-1.6-mistral-7b": gh("haotian-liu"), "llava-phi-3-mini": gh("haotian-liu"),
- "minicpm-v-2.6": gh("OpenBMB"),
- "moondream2": gh("vikhyat"),
- "florence-2-base": gh("microsoft"),
-
- // Embeddings / rerankers
- "bge-large-en-v1.5": gh("FlagOpen"), "bge-small-en-v1.5": gh("FlagOpen"),
- "bge-m3": gh("FlagOpen"), "bge-reranker-v2-m3": gh("FlagOpen"),
- "nomic-embed-text-v1.5": gh("nomic-ai"),
- "mxbai-embed-large": gh("mixedbread-ai"),
- "snowflake-arctic-embed-m": gh("Snowflake-Labs"),
-
- // Speech
- "whisper-tiny": si("openai"), "whisper-base": si("openai"), "whisper-small": si("openai"),
- "whisper-medium": si("openai"), "whisper-large-v3": si("openai"), "whisper-large-v3-turbo": si("openai"),
- "kokoro-tts": gh("hexgrad"),
- "piper-en-lessac": gh("rhasspy"),
- "parakeet-tdt-0.6b": gh("NVIDIA"),
-
- // Image models
- "sd-v1.5-lcm": gh("Stability-AI"),
- "dreamshaper-8-lcm": gh("Lykon"),
- "lcm-dreamshaper-v7": gh("Lykon"),
- "sdxl-turbo": gh("Stability-AI"), "sdxl-lightning": gh("ByteDance"),
- "sd3.5-large-turbo-gguf": gh("Stability-AI"),
- "flux-dev-gguf": gh("black-forest-labs"), "flux-schnell-gguf": gh("black-forest-labs"),
- "flux-schnell-unsloth": gh("black-forest-labs"),
- "pixart-sigma-512": gh("PixArt-alpha"),
- "sdxs-512": gh("IDKiro"),
- "playground-v2.5": gh("playgroundai"),
- "kolors": gh("Kwai-Kolors"),
- "auraflow-v0.3": gh("cloneofsimo"),
- "stable-cascade": gh("Stability-AI"),
- "rmbg-1.4": gh("briaai"),
- "birefnet": gh("ZhengPeng7"),
- "real-esrgan-x4": gh("xinntao"),
- "4x-ultrasharp": gh("xinntao"),
- "gfpgan-v1.4": gh("TencentARC"),
- "codeformer": gh("sczhou"),
- "controlnet-canny": gh("lllyasviel"), "controlnet-depth": gh("lllyasviel"),
- "controlnet-openpose": gh("lllyasviel"), "controlnet-openpose-sdxl": gh("lllyasviel"),
-
- // ---- Services ----
- "comfyui": gh("comfyanonymous"),
- "fooocus": gh("lllyasviel"),
- "stable-diffusion-webui": gh("AUTOMATIC1111"),
- "stable-diffusion-cpp": gh("leejet"),
- "fastsdcpu": gh("rupeshs"),
- "rk-llama-cpp": gh("marty1885"),
- "rk3588-sd-gpu": gh("happyme531"),
- "lcm-dreamshaper-rknn": gh("happyme531"),
- "ltx-video": gh("Lightricks"),
- "wan2gp": gh("alibaba"),
- "musicgpt": gh("gabotechs"),
- "searxng": si("searxng"),
- "gitea": si("gitea"),
- "code-server": gh("coder"),
- "n8n": si("n8n"),
- "home-assistant": si("homeassistant"),
- "uptime-kuma": si("uptimekuma"),
- "filebrowser": gh("filebrowser"),
- "excalidraw": si("excalidraw"),
- "memos": gh("usememos"),
- "linkwarden": gh("linkwarden"),
- "open-webui": gh("open-webui"),
- "dify": gh("langgenius"),
- "perplexica": gh("ItzCrazyKns"),
- "litellm": gh("BerriAI"),
- "stirling-pdf": gh("Stirling-Tools"),
- "paperless-ngx": gh("paperless-ngx"),
- "docling": gh("DS4SD"),
- "libretranslate": gh("LibreTranslate"),
- "mailserver": gh("docker-mailserver"),
- "chatterbox-tts": gh("resemble-ai"),
- "piper-tts": gh("rhasspy"),
- "kokoro-tts-server": gh("remsky"),
- "tailscale": si("tailscale"),
- "ddns": gh("ddclient"),
- "exo": gh("exo-explore"),
-
- // ---- Plugins / MCP ----
- "github-mcp-server": si("github"),
- "git-mcp": si("git"), "mcp-git": si("git"),
- "mcp-filesystem": gh("modelcontextprotocol"),
- "mcp-fetch": gh("modelcontextprotocol"),
+ "openai-agents-sdk": si("openai"), "langroid": gh("langroid"),
+ // Models
+ "qwen3-4b": gh("QwenLM"), "qwen3-1.7b": gh("QwenLM"), "qwen3-8b": gh("QwenLM"),
+ "llama-3.1-8b": si("meta"), "llama-3.2-1b": si("meta"),
+ "gemma-3-4b": si("googlegemini"),
+ // MCP / plugins
+ "github-mcp-server": si("github"), "playwright-mcp": si("playwright"),
"mcp-memory": gh("modelcontextprotocol"),
- "mcp-time": gh("modelcontextprotocol"),
- "mcp-sequential-thinking": gh("modelcontextprotocol"),
- "playwright-mcp": si("playwright"),
- "mcp-server-docker": si("docker"),
- "mcp-server-kubernetes": si("kubernetes"),
- "mongodb-mcp-server": si("mongodb"),
- "mcp-redis": si("redis"),
- "chroma-mcp": gh("chroma-core"),
- "supabase-mcp": si("supabase"),
- "dbhub": si("postgresql"),
- "mcp-toolbox-databases": gh("googleapis"),
- "notion-mcp-server": si("notion"),
- "mcp-obsidian": si("obsidian"),
- "mcp-atlassian": si("atlassian"),
- "google-workspace-mcp": si("google"),
- "slack-mcp-server": si("slack"),
- "whatsapp-mcp": si("whatsapp"),
- "ha-mcp": si("homeassistant"),
- "mcp-email-server": gh("modelcontextprotocol"),
- "aws-mcp": si("amazonaws"),
- "cloudflare-mcp": si("cloudflare"),
- "mcp-grafana": si("grafana"),
- "arxiv-mcp-server": si("arxiv"),
- "firecrawl-mcp": gh("mendableai"),
- "exa-mcp-server": gh("exa-labs"),
- "context7-mcp": gh("upstash"),
- "supergateway": gh("supercorp-ai"),
- "browser-use-mcp": gh("browser-use"),
- "camoufox": gh("daijro"),
- "engram": gh("engramhq"),
- "mcp-pandoc": gh("jgeorgeson"),
- "mcp-server-office": gh("GongRzhe"),
- "mcp-server-spreadsheet": gh("GongRzhe"),
- "excel-mcp-server": gh("haris-musa"),
- "markdownify-mcp": gh("zcaceres"),
- "desktop-commander-mcp": gh("wonderwhy-er"),
- "mcpo": gh("open-webui"),
- "youtube-transcript-mcp": si("youtube"),
- "todoist-mcp-server": si("todoist"),
- "playwriter": si("playwright"),
- "image-generation-tool": gh("comfyanonymous"),
-
- // ---- Streaming apps (legacy MOCK_APPS entries) ----
- "code-server-kasm": gh("coder"),
- "blender": si("blender"),
- "libreoffice": si("libreoffice"),
- "jupyter-lab": si("jupyter"),
- "caddy": gh("caddyserver"),
- "animatediff": gh("guoyww"),
- "corridorkey": gh("comfyanonymous"),
- "whisper-stt": si("openai"),
+ // Services
+ "searxng": si("searxng"), "gitea": si("gitea"), "n8n": si("n8n"),
+ "code-server": gh("coder"), "code-server-kasm": gh("coder"),
+ "blender": si("blender"), "libreoffice": si("libreoffice"),
+ "jupyter-lab": si("jupyter"), "tailscale": si("tailscale"),
+ "caddy": gh("caddyserver"), "animatediff": gh("guoyww"),
+ "comfyui": gh("comfyanonymous"), "fooocus": gh("lllyasviel"),
+ "kokoro-tts": gh("hexgrad"), "whisper-stt": si("openai"),
+ // Homelab -- dashboard-icons CDN is handled via iconSlug on the app object;
+ // listing them here as fallback for when catalog comes from the API without iconSlug.
+ "home-assistant": si("homeassistant"), "uptime-kuma": si("uptimekuma"),
};
-/** Resolve the best icon URL for an app id, falling back through derived matches. */
-function resolveIconUrl(appId: string): string | null {
- if (APP_ICONS[appId]) return APP_ICONS[appId];
- // Derived fallbacks for families we haven't enumerated every member of.
- if (appId.startsWith("qwen")) return gh("QwenLM");
- if (appId.startsWith("llama")) return si("meta");
- if (appId.startsWith("gemma")) return si("googlegemini");
- if (appId.startsWith("phi-")) return gh("microsoft");
- if (appId.startsWith("whisper")) return si("openai");
- if (appId.startsWith("deepseek")) return gh("deepseek-ai");
- if (appId.startsWith("mistral") || appId.startsWith("mixtral")) return gh("mistralai");
- if (appId.startsWith("bge-")) return gh("FlagOpen");
- if (appId.startsWith("controlnet")) return gh("lllyasviel");
- if (appId.startsWith("flux-")) return gh("black-forest-labs");
- if (appId.startsWith("sd-") || appId.startsWith("sdxl") || appId.startsWith("sd3")) return gh("Stability-AI");
+function resolveIconUrl(app: CatalogApp): string | null {
+ if (app.iconSlug) return di(app.iconSlug);
+ if (APP_ICONS[app.id]) return APP_ICONS[app.id] ?? null;
+ // Family fallbacks
+ if (app.id.startsWith("qwen")) return gh("QwenLM");
+ if (app.id.startsWith("llama")) return si("meta");
+ if (app.id.startsWith("gemma")) return si("googlegemini");
+ if (app.id.startsWith("phi-")) return gh("microsoft");
+ if (app.id.startsWith("whisper")) return si("openai");
+ if (app.id.startsWith("deepseek")) return gh("deepseek-ai");
+ if (app.id.startsWith("mistral") || app.id.startsWith("mixtral")) return gh("mistralai");
+ if (app.id.startsWith("flux-")) return gh("black-forest-labs");
+ if (app.id.startsWith("sd-") || app.id.startsWith("sdxl") || app.id.startsWith("sd3")) return gh("Stability-AI");
return null;
}
-/* ------------------------------------------------------------------ */
-/* AppCard */
-/* ------------------------------------------------------------------ */
+function formatStars(n: number): string {
+ if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+ return String(n);
+}
+
+/* ------------------------------------------------------------------
+ AppCard -- used in grid views (non-discover sections)
+ ------------------------------------------------------------------ */
-function AppCard({ app, affected, onInstall, onUninstall, installTargets, runtimeHost, defaultTargetRemote, resolveResponse }: {
+function AppCard({
+ app, affected, onInstall, onUninstall, installTargets, runtimeHost, defaultTargetRemote, resolveResponse,
+}: {
app: CatalogApp;
affected: number;
onInstall: (id: string) => void;
@@ -423,65 +371,30 @@ function AppCard({ app, affected, onInstall, onUninstall, installTargets, runtim
}) {
const [busy, setBusy] = useState(false);
const [iconFailed, setIconFailed] = useState(false);
- const [selectedTarget, setSelectedTarget] = useState(
- defaultTargetRemote ?? "local"
- );
- // "auto" defers variant choice to the resolver — same default the
- // backend uses when the field is absent. Users can override via the
- // dropdown when the manifest exposes >1 variant.
+ const [selectedTarget, setSelectedTarget] = useState(defaultTargetRemote ?? "local");
const [selectedVariant, setSelectedVariant] = useState("auto");
const [error, setError] = useState(null);
- // Live install progress — polled from /api/store/install-progress
- // while busy. null when no install is in-flight. Backend updates
- // bytes_downloaded / bytes_total / state as the install runs.
- interface InstallProgressSnapshot {
- state: string;
- percent: number | null;
- bytes_downloaded: number;
- bytes_total: number;
- detail: string;
- error: string | null;
- }
- const [progress, setProgress] = useState(null);
+ interface ProgressSnap { state: string; percent: number | null; bytes_downloaded: number; bytes_total: number; detail: string; error: string | null; }
+ const [progress, setProgress] = useState(null);
- useEffect(() => {
- if (defaultTargetRemote !== undefined) setSelectedTarget(defaultTargetRemote);
- }, [defaultTargetRemote]);
+ useEffect(() => { if (defaultTargetRemote !== undefined) setSelectedTarget(defaultTargetRemote); }, [defaultTargetRemote]);
- // Poll install progress while a download is running. Stops on
- // terminal states or when busy flips back to false.
useEffect(() => {
- if (!busy) {
- // Hold the last frame for a moment so the user sees "installed" /
- // error before it disappears. The handleAction completion path
- // handles the actual clear.
- return;
- }
+ if (!busy) return;
let cancelled = false;
const poll = async () => {
while (!cancelled) {
try {
- const r = await fetch(`/api/store/install-progress/by-app/${encodeURIComponent(app.id)}`, {
- headers: { Accept: "application/json" },
- });
+ const r = await fetch(`/api/store/install-progress/by-app/${encodeURIComponent(app.id)}`, { headers: { Accept: "application/json" } });
if (r.ok) {
const j = await r.json();
const a = j?.active;
if (a) {
- setProgress({
- state: a.state,
- percent: a.percent ?? null,
- bytes_downloaded: a.bytes_downloaded ?? 0,
- bytes_total: a.bytes_total ?? 0,
- detail: a.detail ?? "",
- error: a.error ?? null,
- });
- if (a.state === "installed" || a.state === "failed" || a.state === "cancelled") {
- break; // terminal — handleAction will set busy=false on response return
- }
+ setProgress({ state: a.state, percent: a.percent ?? null, bytes_downloaded: a.bytes_downloaded ?? 0, bytes_total: a.bytes_total ?? 0, detail: a.detail ?? "", error: a.error ?? null });
+ if (a.state === "installed" || a.state === "failed" || a.state === "cancelled") break;
}
}
- } catch { /* network blip; keep polling */ }
+ } catch { /* network blip */ }
await new Promise((res) => setTimeout(res, 1500));
}
};
@@ -489,190 +402,104 @@ function AppCard({ app, affected, onInstall, onUninstall, installTargets, runtim
return () => { cancelled = true; };
}, [busy, app.id]);
- const iconUrl = resolveIconUrl(app.id);
+ const iconUrl = resolveIconUrl(app);
const variantOptions = app.variants ?? [];
const showVariantPicker = !app.installed && variantOptions.length > 1;
- // Show the target chooser whenever multiple targets exist — used to
- // be gated to LXC apps only, but model installs also route to the
- // selected worker so cluster users want the same pick on every card.
const showTargetPicker = !app.installed && installTargets.length > 1;
const handleAction = async () => {
- setBusy(true);
- setError(null);
- setProgress(null);
+ setBusy(true); setError(null); setProgress(null);
try {
if (app.installed) {
- const res = await fetch("/api/store/uninstall", {
- method: "POST",
- headers: { "Content-Type": "application/json", Accept: "application/json" },
- body: JSON.stringify({ app_id: app.id }),
- });
- if (!res.ok) {
- let msg = `Uninstall failed (${res.status})`;
- try { const err = await res.json(); if (err?.error) msg = String(err.error); } catch { /* ignore */ }
- setError(msg);
- setBusy(false);
- return;
- }
+ const res = await fetch("/api/store/uninstall", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ app_id: app.id }) });
+ if (!res.ok) { let msg = `Uninstall failed (${res.status})`; try { const err = await res.json(); if (err?.error) msg = String(err.error); } catch { /* ignore */ } setError(msg); setBusy(false); return; }
onUninstall(app.id);
} else {
const body: Record = { app_id: app.id, target_remote: selectedTarget };
- if (selectedVariant !== "auto") {
- body.variant_id = selectedVariant;
- }
- const res = await fetch("/api/store/install-v2", {
- method: "POST",
- headers: { "Content-Type": "application/json", Accept: "application/json" },
- body: JSON.stringify(body),
- });
- if (!res.ok) {
- let msg = `Install failed (${res.status})`;
- try { const err = await res.json(); if (err?.error) msg = String(err.error); } catch { /* ignore */ }
- setError(msg);
- setBusy(false);
- return;
- }
+ if (selectedVariant !== "auto") body.variant_id = selectedVariant;
+ const res = await fetch("/api/store/install-v2", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(body) });
+ if (!res.ok) { let msg = `Install failed (${res.status})`; try { const err = await res.json(); if (err?.error) msg = String(err.error); } catch { /* ignore */ } setError(msg); setBusy(false); return; }
onInstall(app.id);
}
- } catch (e) {
- setError(e instanceof Error ? e.message : "Network error");
- }
+ } catch (e) { setError(e instanceof Error ? e.message : "Network error"); }
setBusy(false);
- // Hold the last progress frame for a beat so the user reads
- // "installed" / error before it fades. 1.5 s matches the poll
- // interval, so the bar visibly settles rather than vanishing.
setTimeout(() => setProgress(null), 1500);
};
const visuals = compatVisuals(resolveResponse);
+ const appType = app.category || app.type;
return (
-
-
-
-
-
- {iconUrl && !iconFailed ? (
- 
setIconFailed(true)}
- loading="lazy"
- />
- ) : (
-
-
-
+ {/* Cover strip */}
+
- {app.name}
- {app.installed &&
- v{app.version}
-
+
+ {appType}
+
+
+ {/* Meta */}
+
+ (null);
+
+ const iconUrl = resolveIconUrl(app);
+
+ const handleGet = async () => {
+ if (app.installed) return;
+ setBusy(true); setError(null);
+ try {
+ // Read the current install target at click time so it tracks the device
+ // selection, rather than a value captured at mount.
+ const target = installTargets[0]?.name ?? "local";
+ const res = await fetch("/api/store/install-v2", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ app_id: app.id, target_remote: target }) });
+ if (!res.ok) { let msg = `Install failed (${res.status})`; try { const err = await res.json(); if (err?.error) msg = String(err.error); } catch { /* ignore */ } setError(msg); setBusy(false); return; }
+ onInstall(app.id);
+ } catch (e) { setError(e instanceof Error ? e.message : "Network error"); }
+ setBusy(false);
+ };
+
+ const handleOpen = () => {
+ // Future: launch the app window
+ };
+
+ return (
+ ([]);
const [search, setSearch] = useState("");
- const [activeCategory, setActiveCategory] = useState("all");
+ const [activeNav, setActiveNav] = useState("discover");
const [loading, setLoading] = useState(true);
const [latest, setLatest] = useState>({});
const [agentList, setAgentList] = useState([]);
- const [installTargets, setInstallTargets] = useState([
- { name: "local", label: "This controller", type: "local" },
- ]);
+ const [installTargets, setInstallTargets] = useState([{ name: "local", label: "This controller", type: "local" }]);
const [runtimeHosts, setRuntimeHosts] = useState>({});
const [selectedDevices, setSelectedDevices] = useState([]);
const [selectedBackends, setSelectedBackends] = useState([]);
const [compatMap, setCompatMap] = useState>(new Map());
- // User identity for per-user filter persistence. Use an "anon" fallback
- // so single-user setups still work; profile defaults to "default".
- const userId = (typeof window !== "undefined"
- ? window.localStorage.getItem("taos.user.id") || "anon"
- : "anon");
- const profileId = (typeof window !== "undefined"
- ? window.localStorage.getItem("taos.profile.id") || "default"
- : "default");
+
+ const userId = typeof window !== "undefined" ? window.localStorage.getItem("taos.user.id") || "anon" : "anon";
+ const profileId = typeof window !== "undefined" ? window.localStorage.getItem("taos.profile.id") || "default" : "default";
const refreshInstalled = useCallback(() => {
fetch("/api/store/installed-v2", { headers: { Accept: "application/json" } })
.then((r) => r.ok ? r.json() : null)
.then((data) => {
const hosts: Record = {};
- for (const entry of (data?.installed ?? []) as InstalledEntry[]) {
- hosts[entry.app_id] = entry.runtime_host ?? null;
- }
+ for (const entry of (data?.installed ?? []) as InstalledEntry[]) hosts[entry.app_id] = entry.runtime_host ?? null;
setRuntimeHosts(hosts);
})
.catch(() => {});
@@ -739,9 +904,7 @@ export function StoreApp({ windowId: _windowId }: { windowId: string }) {
const fetchCatalog = useCallback(async () => {
try {
- const res = await fetch("/api/store/catalog", {
- headers: { Accept: "application/json" },
- });
+ const res = await fetch("/api/store/catalog", { headers: { Accept: "application/json" } });
const ct = res.headers.get("content-type") ?? "";
if (res.ok && ct.includes("application/json")) {
const data = await res.json();
@@ -758,8 +921,16 @@ export function StoreApp({ windowId: _windowId }: { windowId: string }) {
install_method: a.install_method ? String(a.install_method) : undefined,
hardware_tiers: (a.hardware_tiers as Record) ?? undefined,
variants: (a.variants as CatalogApp["variants"]) ?? undefined,
+ repo: a.repo ? String(a.repo) : undefined,
+ iconSlug: a.iconSlug ? String(a.iconSlug) : undefined,
+ stars: typeof a.stars === "number" ? a.stars : undefined,
+ tagline: a.tagline ? String(a.tagline) : undefined,
+ cover: a.cover ? String(a.cover) : undefined,
}));
- setApps(normalized);
+ // Merge homelab apps: only add those not already in the catalog
+ const catalogIds = new Set(normalized.map((a) => a.id));
+ const extra = HOMELAB_APPS.filter((a) => !catalogIds.has(a.id));
+ setApps([...normalized, ...extra]);
setLoading(false);
return true;
}
@@ -777,56 +948,31 @@ export function StoreApp({ windowId: _windowId }: { windowId: string }) {
return () => { cancelled = true; };
}, [fetchCatalog]);
- // Resolve compatibility for every model card via /api/store/resolve.
- // Runs after the catalog loads. Batches of 8 to avoid overwhelming the
- // controller; Promise.allSettled so a single failure doesn't kill the batch.
useEffect(() => {
- const modelIds = apps
- .filter((a) => a.type === "model")
- .map((a) => a.id);
-
+ const modelIds = apps.filter((a) => a.type === "model").map((a) => a.id);
if (modelIds.length === 0) return;
-
let cancelled = false;
-
const run = async () => {
const next = new Map();
for (let i = 0; i < modelIds.length; i += 8) {
if (cancelled) return;
const batch = modelIds.slice(i, i + 8);
- const results = await Promise.allSettled(
- batch.map((id) => resolveModel(id, "auto")),
- );
+ const results = await Promise.allSettled(batch.map((id) => resolveModel(id, "auto")));
results.forEach((r, idx) => {
const id = batch[idx];
- if (id && r.status === "fulfilled" && r.value && "compat" in r.value) {
- next.set(id, r.value);
- }
+ if (id && r.status === "fulfilled" && r.value && "compat" in r.value) next.set(id, r.value);
});
if (!cancelled) setCompatMap(new Map(next));
}
};
-
run();
return () => { cancelled = true; };
}, [apps]);
- useEffect(() => {
- const qs = new URLSearchParams(window.location.hash.split("?")[1] || "");
- const cat = qs.get("category");
- if (cat) setActiveCategory(cat);
- }, []);
-
useEffect(() => {
fetchLatestFrameworks().then(setLatest).catch(() => {});
- fetch("/api/agents")
- .then((r) => r.ok ? r.json() : [])
- .then((j) => setAgentList(Array.isArray(j) ? j : (j?.agents ?? [])))
- .catch(() => {});
- fetch("/api/cluster/install-targets", { headers: { Accept: "application/json" } })
- .then((r) => r.ok ? r.json() : null)
- .then((data) => { if (Array.isArray(data)) setInstallTargets(data); })
- .catch(() => {});
+ fetch("/api/agents").then((r) => r.ok ? r.json() : []).then((j) => setAgentList(Array.isArray(j) ? j : (j?.agents ?? []))).catch(() => {});
+ fetch("/api/cluster/install-targets", { headers: { Accept: "application/json" } }).then((r) => r.ok ? r.json() : null).then((data) => { if (Array.isArray(data)) setInstallTargets(data); }).catch(() => {});
refreshInstalled();
}, [refreshInstalled]);
@@ -835,53 +981,61 @@ export function StoreApp({ windowId: _windowId }: { windowId: string }) {
if (hydrated.current) return;
if (installTargets.length === 0 || apps.length === 0) return;
const validDevices = installTargets.map((t) => t.name);
- const validBackends = Array.from(
- new Set(
- apps.flatMap((a) =>
- (a.variants ?? []).flatMap((v) => v.backend ?? []).concat(
- a.install_method ? [a.install_method] : []
- )
- )
- )
- );
+ const validBackends = Array.from(new Set(apps.flatMap((a) => (a.variants ?? []).flatMap((v) => v.backend ?? []).concat(a.install_method ? [a.install_method] : []))));
const persisted = loadFilter(userId, profileId, validDevices, validBackends);
setSelectedDevices(persisted.devices);
setSelectedBackends(persisted.backends);
hydrated.current = true;
}, [installTargets, apps, userId, profileId]);
- useEffect(() => {
- saveFilter(userId, profileId, {
- devices: selectedDevices,
- backends: selectedBackends,
- });
- }, [selectedDevices, selectedBackends, userId, profileId]);
+ useEffect(() => { saveFilter(userId, profileId, { devices: selectedDevices, backends: selectedBackends }); }, [selectedDevices, selectedBackends, userId, profileId]);
- const activeCat = CATEGORIES.find((c) => c.id === activeCategory);
+ const handleInstall = useCallback((id: string) => {
+ setApps((prev) => prev.map((a) => a.id === id ? { ...a, installed: true } : a));
+ refreshInstalled();
+ emitAppEvent(APP_INSTALLED, id);
+ }, [refreshInstalled]);
- const categoryFiltered = apps.filter((app) => {
- if (activeCategory !== "all" && activeCat) {
- if (!activeCat.types.includes(appGroup(app))) return false;
- }
- if (search) {
- const q = search.toLowerCase();
- return (
- app.name.toLowerCase().includes(q) ||
- app.description.toLowerCase().includes(q)
- );
- }
- return true;
- });
+ const handleUninstall = useCallback((id: string) => {
+ setApps((prev) => prev.map((a) => a.id === id ? { ...a, installed: false } : a));
+ refreshInstalled();
+ }, [refreshInstalled]);
- const selectedDeviceObjs = installTargets.filter((t) =>
- selectedDevices.includes(t.name)
- );
- const tierFilterResult = filterCatalog(categoryFiltered, selectedDeviceObjs, selectedBackends);
+ // --- Filtering for non-discover views ---
+ const NAV_TYPE_MAP: Record = {
+ discover: [],
+ apps: ["streaming-app", "ai-app", "productivity", "home", "monitoring", "automation", "image-gen", "voice", "video-gen", "plugin"],
+ agents: ["agent-framework"],
+ models: ["model", "llm-runtime"],
+ services: ["service", "infrastructure"],
+ mcp: ["mcp"],
+ devtools: ["dev-tool"],
+ community: [],
+ installed: [],
+ updates: [],
+ };
+
+ const searchFiltered = useMemo(() => {
+ if (!search) return apps;
+ const q = search.toLowerCase();
+ return apps.filter((a) => a.name.toLowerCase().includes(q) || a.description.toLowerCase().includes(q));
+ }, [apps, search]);
+
+ const navFiltered = useMemo(() => {
+ if (activeNav === "discover" || activeNav === "community") return searchFiltered;
+ if (activeNav === "installed") return searchFiltered.filter((a) => a.installed);
+ // Updates lists only installed apps that actually have a newer version
+ // available, not every installed app. No update-check feed exists yet, so
+ // this is empty until one lands (see the "up to date" empty state below).
+ if (activeNav === "updates") return searchFiltered.filter((a) => a.installed && a.update_available === true);
+ const types = NAV_TYPE_MAP[activeNav] ?? [];
+ if (types.length === 0) return searchFiltered;
+ return searchFiltered.filter((a) => types.includes(a.type) || types.includes(a.category ?? ""));
+ }, [activeNav, searchFiltered]);
+
+ const selectedDeviceObjs = installTargets.filter((t) => selectedDevices.includes(t.name));
+ const tierFilterResult = filterCatalog(navFiltered, selectedDeviceObjs, selectedBackends);
- // Apply resolver compat as a second pass: any model the resolver classifies
- // as "red" moves from compatible → incompatible, regardless of tier match.
- // Models not yet classified (compatMap has no entry) stay compatible — the
- // incompatibility signal must be explicit, not a default.
const filtered: CatalogApp[] = [];
const incompatible: CatalogApp[] = [...tierFilterResult.incompatible];
for (const app of tierFilterResult.compatible) {
@@ -892,242 +1046,200 @@ export function StoreApp({ windowId: _windowId }: { windowId: string }) {
}
}
- // Backends shown in the BackendPillBar are the union of variants[].backend
- // across manifests in the *current category* where any selected device's
- // tier_id is supported. Two reasons this is category-scoped instead of
- // catalog-wide:
- // 1. On the Models view, runtime backends (rkllama, ollama, llama.cpp)
- // are meaningful filters; on the Agent Frameworks view they aren't.
- // 2. install_method (docker, lxc, npm, pip) was leaking into the
- // backend pills via the no-variants fallback below — these are
- // deploy mechanisms, not runtime backends, and they don't belong
- // in this filter at all. Dropping the fallback closes that gap.
const availableBackends = useMemo(() => {
if (selectedDevices.length === 0) return [];
- const memoSelectedDevices = installTargets.filter((t) =>
- selectedDevices.includes(t.name)
- );
- const tiers = new Set(
- memoSelectedDevices.map((d) => d.tier_id).filter(Boolean) as string[]
- );
- const sourceApps = activeCategory === "all" || !activeCat
- ? apps
- : apps.filter((a) => activeCat.types.includes(appGroup(a)));
+ const selDevObjs = installTargets.filter((t) => selectedDevices.includes(t.name));
+ const tiers = new Set(selDevObjs.map((d) => d.tier_id).filter(Boolean) as string[]);
+ const types = NAV_TYPE_MAP[activeNav] ?? [];
+ const sourceApps = types.length === 0 ? apps : apps.filter((a) => types.includes(a.type) || types.includes(a.category ?? ""));
const out = new Set();
for (const app of sourceApps) {
if (!app.hardware_tiers) continue;
- const tierMatch = [...tiers].some(
- (t) =>
- app.hardware_tiers![t] !== undefined &&
- app.hardware_tiers![t] !== "unsupported"
- );
+ const tierMatch = [...tiers].some((t) => app.hardware_tiers![t] !== undefined && app.hardware_tiers![t] !== "unsupported");
if (!tierMatch) continue;
- for (const v of app.variants ?? []) {
- for (const b of v.backend ?? []) out.add(b);
- }
+ for (const v of app.variants ?? []) for (const b of v.backend ?? []) out.add(b);
}
return Array.from(out).sort();
- }, [selectedDevices, installTargets, apps, activeCategory, activeCat]);
+ }, [selectedDevices, installTargets, apps, activeNav]);
useEffect(() => {
- if (availableBackends.length === 0) {
- // Bar is hidden; clear any stale backend filter so it doesn't
- // silently apply behind invisible UI.
- if (selectedBackends.length > 0) setSelectedBackends([]);
- return;
- }
+ if (availableBackends.length === 0) { if (selectedBackends.length > 0) setSelectedBackends([]); return; }
const availSet = new Set(availableBackends);
const dropped = selectedBackends.filter((b) => !availSet.has(b));
- if (dropped.length > 0) {
- setSelectedBackends((prev) => prev.filter((b) => availSet.has(b)));
- // Surface a toast — for now use a simple console warning since this
- // codebase's toast helper is not yet wired into StoreApp. Adding a
- // toast call here is a follow-up.
- console.info(
- `[store-filter] auto-deselected backend(s): ${dropped.join(", ")}`
- );
- }
+ if (dropped.length > 0) setSelectedBackends((prev) => prev.filter((b) => availSet.has(b)));
}, [availableBackends, selectedBackends]);
- const handleInstall = useCallback((id: string) => {
- setApps((prev) => prev.map((a) => (a.id === id ? { ...a, installed: true } : a)));
- refreshInstalled();
- emitAppEvent(APP_INSTALLED, id);
- }, [refreshInstalled]);
+ // Hardware profile from first install target
+ const primaryTarget = installTargets[0];
+ const profileLabel = primaryTarget?.friendly_name ?? primaryTarget?.label ?? "This device";
+ const profileSub = primaryTarget?.tier_id ? primaryTarget.tier_id.replace(/-/g, " ") : "Connect a device";
- const handleUninstall = useCallback((id: string) => {
- setApps((prev) => prev.map((a) => (a.id === id ? { ...a, installed: false } : a)));
- refreshInstalled();
- }, [refreshInstalled]);
-
- // Count per category
- const counts: Record = {};
- for (const cat of CATEGORIES) {
- if (cat.id === "all") { counts[cat.id] = apps.length; continue; }
- counts[cat.id] = apps.filter((a) => cat.types.includes(appGroup(a))).length;
- }
-
- const isMobile = typeof window !== "undefined" && window.innerWidth < 640;
+ // When the user is searching, show the results grid even on the curated
+ // Discover/Community views (which otherwise ignore the search box).
+ const searching = search.trim().length > 0;
+ const showGrid = searching || (activeNav !== "discover" && activeNav !== "community");
return (
-
+
-
- {TYPE_LABELS[appGroup(app)] ?? TYPE_LABELS[app.type] ?? appGroup(app)}
-
-
-
-
- {error && (
-
+ {/* Footer */}
+
+ {iconUrl && !iconFailed
+ ? setIconFailed(true)} loading="lazy" />
+ :
-
-
+
-
-
-
+
+ {app.name}
+ {app.installed &&
+ v{app.version}
{app.description}
-
- {error}
-
- )}
+ {app.description}
+
+ {app.stars ? (
+
+
+
+ {error &&
+
+ );
+}
+
+/* ------------------------------------------------------------------
+ RichCard -- hero-row cards with cover + logo + stars
+ ------------------------------------------------------------------ */
+
+function RichCard({
+ app, onInstall, installTargets,
+}: {
+ app: CatalogApp;
+ onInstall: (id: string) => void;
+ installTargets: InstallTarget[];
+}) {
+ const [busy, setBusy] = useState(false);
+ const [iconFailed, setIconFailed] = useState(false);
+ const [error, setError] = useState{error}
}
{progress && (
{progress.state.replace(/_/g, " ")}
-
- {progress.percent !== null
- ? `${progress.percent.toFixed(0)}%`
- : progress.bytes_downloaded > 0
- ? `${(progress.bytes_downloaded / (1024 * 1024)).toFixed(1)} MB`
- : ""}
-
+ {progress.percent !== null ? `${progress.percent.toFixed(0)}%` : progress.bytes_downloaded > 0 ? `${(progress.bytes_downloaded / (1024 * 1024)).toFixed(1)} MB` : ""}
-
-
+
)}
{showTargetPicker && (
+
- {progress.detail && (
-
- {progress.detail}
-
- )}
+ {progress.detail && {progress.detail}}
-
-
)}
{showVariantPicker && (
-
-
)}
@@ -682,56 +509,394 @@ function AppCard({ app, affected, onInstall, onUninstall, installTargets, runtim
{runtimeHost === "127.0.0.1" ? "on controller" : `on ${runtimeHost}`}
)}
-
-
-
+
+
+ {/* Cover */}
+
+ );
+}
+
+/* ------------------------------------------------------------------
+ SubscriptionRow -- compact 2-col list for "Replace your subs"
+ ------------------------------------------------------------------ */
+
+function SubscriptionRow({
+ app, onInstall, installTargets,
+}: {
+ app: CatalogApp;
+ onInstall: (id: string) => void;
+ installTargets: InstallTarget[];
+}) {
+ const [busy, setBusy] = useState(false);
+ const [iconFailed, setIconFailed] = useState(false);
+ const iconUrl = resolveIconUrl(app);
+
+ const handleGet = async () => {
+ if (app.installed) return;
+ setBusy(true);
+ try {
+ const res = await fetch("/api/store/install-v2", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ app_id: app.id, target_remote: installTargets[0]?.name ?? "local" }) });
+ if (res.ok) onInstall(app.id);
+ } catch { /* ignore */ }
+ setBusy(false);
+ };
+
+ return (
+
+
+ {app.category || app.type}
+
+
+ {/* Meta */}
+
+
+
+
+
+ {iconUrl && !iconFailed
+ ? setIconFailed(true)} loading="lazy" />
+ :
+
+
+ {app.name}
+ {app.tagline ?? (app.category || app.type)}
+ {app.description}
+ {error &&{error}
}
+
+ {app.installed
+ ?
+
+
+ );
+}
+
+/* ------------------------------------------------------------------
+ CommunityCard
+ ------------------------------------------------------------------ */
+
+function CommunityCard({ item }: { item: CommunityItem }) {
+ return (
+
+ {iconUrl && !iconFailed
+ ? setIconFailed(true)} loading="lazy" />
+ :
+
+
+ {app.installed
+ ? {app.name}
+
+ {app.tagline ?? (app.category || app.type)}
+ {app.stars ? ` · ★ ${formatStars(app.stars)}` : ""}
+
+
+
+
+ );
+}
+
+/* ------------------------------------------------------------------
+ HeroFeatured
+ ------------------------------------------------------------------ */
+
+function HeroFeatured({ app, onInstall, installTargets }: { app: CatalogApp; onInstall: (id: string) => void; installTargets: InstallTarget[] }) {
+ const [busy, setBusy] = useState(false);
+ const [iconFailed, setIconFailed] = useState(false);
+ const iconUrl = resolveIconUrl(app);
+
+ const handleGet = async () => {
+ if (app.installed) return;
+ setBusy(true);
+ try {
+ const res = await fetch("/api/store/install-v2", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ app_id: app.id, target_remote: installTargets[0]?.name ?? "local" }) });
+ if (res.ok) onInstall(app.id);
+ } catch { /* ignore */ }
+ setBusy(false);
+ };
+
+ return (
+
+
+
+
+
+ {item.icon}
+
+
+
+ {item.name}
+ {item.badge} · by {item.author}
+ {item.description}
+
+
+
+
+ {/* Scrim */}
+
+
);
}
-/* ------------------------------------------------------------------ */
-/* StoreApp */
-/* ------------------------------------------------------------------ */
+/* ------------------------------------------------------------------
+ DiscoverView -- the main landing layout
+ ------------------------------------------------------------------ */
+
+function DiscoverView({
+ apps, onInstall, installTargets,
+}: {
+ apps: CatalogApp[];
+ onInstall: (id: string) => void;
+ installTargets: InstallTarget[];
+}) {
+ // Hero: first image-gen app with a cover, or comfyui
+ const hero = apps.find((a) => a.id === "comfyui") ?? apps.find((a) => a.cover) ?? apps[0];
+
+ // Popular: homelab apps with stars, top 4 by stars
+ const popular = [...apps]
+ .filter((a) => a.stars !== undefined && a.stars > 0)
+ .sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0))
+ .slice(0, 6);
+
+ // Subscriptions: curated homelab list
+ const subsIds = ["sonarr", "radarr", "qbittorrent", "sabnzbd", "homebridge", "adguard-home", "uptime-kuma", "nextcloud"];
+ const subscriptions = subsIds.map((id) => apps.find((a) => a.id === id)).filter(Boolean) as CatalogApp[];
+
+ // Frameworks
+ const frameworkApps = apps.filter((a) => a.type === "agent-framework" || a.category === "agent-framework");
+
+ const SectionHeader = ({ title, action }: { title: string; action?: string }) => (
+
+
+
+ Featured · Editor's Choice
+
+ {app.name}
+{app.description}
+
+
+
+ {iconUrl && !iconFailed
+ ? setIconFailed(true)} loading="lazy" />
+ :
+
+
+
+
+ );
+
+ return (
+ {title}
+ {action && } +
+ {/* Hero */}
+ {hero &&
+
+ )}
+
+ {/* Replace your subscriptions */}
+ {subscriptions.length > 0 && (
+
+
+ )}
+
+ {/* From the community */}
+
+
+
+ {/* Build agents with */}
+ {(frameworkApps.length > 0 || FRAMEWORK_ITEMS.length > 0) && (
+
+
+ )}
+
+ );
+}
+
+/* ------------------------------------------------------------------
+ CommunityView -- the community section
+ ------------------------------------------------------------------ */
+
+function CommunityView() {
+ return (
+
+ {popular.map((app) => (
+
+
+ {subscriptions.map((app) => (
+
+
+ {COMMUNITY_ITEMS.map((item) => (
+
+
+ {FRAMEWORK_ITEMS.map((fw) => {
+ const catalogApp = apps.find((a) => a.id === fw.id);
+ const isInstalled = catalogApp?.installed ?? fw.installed ?? false;
+ return (
+
+
+
+ );
+ })}
+
+ {fw.iconChar}
+
+
+
+ {isInstalled
+ ? {fw.name}
+
+ {fw.sub}{fw.stars ? ` · ★ ${formatStars(fw.stars)}` : ""}
+
+
+
+ );
+}
+
+/* ------------------------------------------------------------------
+ StoreApp
+ ------------------------------------------------------------------ */
export function StoreApp({ windowId: _windowId }: { windowId: string }) {
const [apps, setApps] = useState
+
+ From the community
+Themes, wallpapers, apps and agents built by taOS users.
+
+ {COMMUNITY_ITEMS.map((item) => (
+
+
+
+ Share your creation
+ Build an app or agent with the App Builder and submit it to the community store.
+
- {/* Sidebar / Mobile pill row */}
- {isMobile ? (
-
- {CATEGORIES.map((cat) => (
-
- ))}
-
- ) : (
-
-
- )}
-
- {/* Main content */}
-
-
-
-
-
-
- {/* Header */}
-
-
-
-
-
- {filtered.length} apps
- {activeCat?.label ?? "All Apps"}
-{activeCat?.description}
-
-
+ {/* Sidebar */}
+