slskd: /soulseek search + downloads on the Workspace/Panel framework

Two panels (search + transfers) via WorkspaceView, coordinating over the
soulseek:refresh channel. Adds the page-title rule and documents the
route conventions in CLAUDE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/App.tsx

@@ -41,6 +41,7 @@ export function App() {
             <Route path="/plans" element={<Dashboard.Plans />} />
             <Route path="/files" element={<Dashboard.FilesScreen />} />
             <Route path="/music" element={<Dashboard.MusicScreen />} />
+            <Route path="/soulseek" element={<Dashboard.SoulseekScreen />} />
             <Route path="/system-monitor" element={<Dashboard.SystemMonitorScreen />} />
             <Route path="/activity" element={<Dashboard.ActivityScreen />} />
 

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -5,8 +5,10 @@ import type { LucideIcon } from 'lucide-react';
 export type DockItem = {
   label: string;
   to: string;
-  icon: LucideIcon;
   color: string;
+  // Either a lucide glyph (rendered white on the coloured tile) or an image asset (e.g. an app favicon).
+  icon?: LucideIcon;
+  image?: string;
 };
 
 type DockProps = {
@@ -99,7 +101,11 @@ export const Dock = ({ items, className, boundaryRef }: DockProps) => {
                 boxShadow: active ? `0 0 12px ${item.color}40` : 'none',
               }}
             >
-              <item.icon className="h-5 w-5 md:h-6 md:w-6 text-white" />
+              {item.image ? (
+                <img src={item.image} alt="" className="h-7 w-7 md:h-8 md:w-8 object-contain" />
+              ) : (
+                item.icon && <item.icon className="h-5 w-5 md:h-6 md:w-6 text-white" />
+              )}
             </div>
             {active && (
               <div className="absolute -bottom-1.5 w-1.5 h-1.5 rounded-full" style={{ background: item.color }} />
@@ -136,6 +142,7 @@ export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Email', to: '/email', icon: Mail, color: '#ef4444' },
   { label: 'Chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
   { label: 'Music', to: '/music', icon: Music, color: '#22c55e' },
+  { label: 'Soulseek', to: '/soulseek', image: '/slskd.png', color: '#ffffff' },
   { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
   { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
   { label: 'Jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },

src/apps/officer-web/Screens/Dashboard/Layout/Header/Header.tsx

@@ -118,7 +118,11 @@ export function Header({ dockItems }: HeaderProps) {
                         boxShadow: active ? `0 0 12px ${item.color}40` : 'none',
                       }}
                     >
-                      <item.icon className="h-4 w-4 text-white" />
+                      {item.image ? (
+                        <img src={item.image} alt="" className="h-5 w-5 object-contain" />
+                      ) : (
+                        item.icon && <item.icon className="h-4 w-4 text-white" />
+                      )}
                     </div>
                     <span className={`text-sm ${active ? 'text-white font-medium' : 'text-white/80'}`}>
                       {item.label}

src/apps/officer-web/Screens/Dashboard/Soulseek/SoulseekScreen.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useMemo } from 'react';
+import type { LayoutNode } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+// /soulseek uses the Workspace/Panel system (like /chat and /music): two panels — the search browser
+// (soulseek-search) and the download queue (soulseek-transfers) — coordinating via the 'soulseek:refresh'
+// panel channel. Both talk to slskd through the /api/slskd auth proxy.
+
+const ALLOWED_APP_TYPES = new Set<string | null>(['soulseek-search', 'soulseek-transfers', null]);
+
+function normalizeLayout(node: LayoutNode): LayoutNode {
+  if (node.type === 'panel') {
+    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'soulseek-search' };
+  }
+  const children = node.children.map((c) => {
+    const fixed = normalizeLayout(c.node);
+    return fixed === c.node ? c : { ...c, node: fixed };
+  });
+  const changed = children.some((c, i) => c !== node.children[i]);
+  return changed ? { ...node, children } : node;
+}
+
+export const SoulseekScreen = () => {
+  const rawWorkspace = useDashboardState<LayoutNode>('screens/soulseek', defaultLayout);
+
+  const workspace = useMemo(() => {
+    const fixed = normalizeLayout(rawWorkspace.value);
+    if (fixed === rawWorkspace.value) return rawWorkspace;
+    return { ...rawWorkspace, value: fixed };
+  }, [rawWorkspace]);
+
+  useEffect(() => {
+    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
+      rawWorkspace.setValue(workspace.value);
+    }
+  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceView workspace={workspace} locked />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Soulseek/defaultLayout.ts

@@ -0,0 +1,11 @@
+import type { LayoutNode } from 'officerdev';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'soulseek-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'soulseek-search', appType: 'soulseek-search' }, size: 55 },
+    { node: { type: 'panel', id: 'soulseek-transfers', appType: 'soulseek-transfers' }, size: 45 },
+  ],
+};

src/apps/officer-web/Screens/Dashboard/Soulseek/index.tsx

@@ -0,0 +1 @@
+export * from './SoulseekScreen';

src/apps/officer-web/Screens/Dashboard/index.tsx

@@ -11,6 +11,7 @@ export * from './Tasks';
 
 export * from './Files';
 export * from './Music';
+export * from './Soulseek';
 export * from './SystemMonitor';
 export * from './Activity';
 export * from './CodeEditor';

src/apps/officer-web/state/usePageTitle.ts

@@ -16,6 +16,7 @@ const RULES: TitleRule[] = [
   { match: (p) => p.startsWith('/email'), title: 'Email' },
   { match: (p) => p.startsWith('/files'), title: 'Files' },
   { match: (p) => p.startsWith('/music'), title: 'Music' },
+  { match: (p) => p.startsWith('/soulseek'), title: 'Soulseek' },
   { match: (p) => p.startsWith('/system-monitor'), title: 'System Monitor' },
   { match: (p) => p.startsWith('/code-editor'), title: 'Code Editor' },
   { match: (p) => p.startsWith('/projects'), title: 'Projects' },