+
+ );
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Soulseek/defaultLayout.ts b/src/apps/officer-web/Screens/Dashboard/Soulseek/defaultLayout.ts
new file mode 100644
index 00000000..b82856a7
--- /dev/null
+++ b/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 },
+ ],
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Soulseek/index.tsx b/src/apps/officer-web/Screens/Dashboard/Soulseek/index.tsx
new file mode 100644
index 00000000..b6db6bc2
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/Soulseek/index.tsx
@@ -0,0 +1 @@
+export * from './SoulseekScreen';
diff --git a/src/apps/officer-web/Screens/Dashboard/index.tsx b/src/apps/officer-web/Screens/Dashboard/index.tsx
index 17d8198e..3fba9919 100644
--- a/src/apps/officer-web/Screens/Dashboard/index.tsx
+++ b/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';
diff --git a/src/apps/officer-web/state/usePageTitle.ts b/src/apps/officer-web/state/usePageTitle.ts
index ed659c3f..31ca3248 100644
--- a/src/apps/officer-web/state/usePageTitle.ts
+++ b/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' },
diff --git a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
index 0c65c211..dc020e5d 100644
--- a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
+++ b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx
@@ -11,6 +11,7 @@ import { appRegistryMetas as previewMetas } from '../apps/Preview';
import { appRegistryMetas as widgetMetas } from '../apps/Widgets';
import { appRegistryMetas as desktopMetas } from '../apps/Desktop';
import { appRegistryMetas as musicMetas } from '../apps/Music';
+import { appRegistryMetas as soulseekMetas } from '../apps/Soulseek';
import { appRegistryMetas as monitorMetas } from '../apps/SystemMonitor';
import { useAppRegistry } from './useAppRegistry';
import { useUserApps } from 'state/useUserApps';
@@ -18,7 +19,7 @@ import { createUserAppPanel } from '../apps/UserApp/UserAppPanel';
import { createUserAppHeader } from '../apps/UserApp/UserAppHeader';
import { resolveIcon } from '../utils/resolve-icon';
-const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...dashboardMetas, ...projectMetas, ...chatHistoryMetas, ...previewMetas, ...widgetMetas, ...desktopMetas, ...musicMetas, ...monitorMetas];
+const apps = [...fileBrowserMetas, ...terminalMetas, ...codeEditorMetas, ...chatMetas, ...fileViewerMetas, ...dashboardMetas, ...projectMetas, ...chatHistoryMetas, ...previewMetas, ...widgetMetas, ...desktopMetas, ...musicMetas, ...soulseekMetas, ...monitorMetas];
export const AppRegistry = () => {
const { registerApp } = useAppRegistry(apps);
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/SoulseekSearch.tsx b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekSearch.tsx
new file mode 100644
index 00000000..46e2d83c
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekSearch.tsx
@@ -0,0 +1,206 @@
+import { useState } from 'react';
+import { useClient } from 'hooks/useClient';
+import { usePanelChannel } from 'hooks/usePanelChannel';
+import { toast } from 'sonner';
+import { Search, Download, Lock, Loader2 } from 'lucide-react';
+import {
+ SLSKD_REFRESH_CHANNEL,
+ basename,
+ extOf,
+ formatSize,
+ type ResultRow,
+ type SlskdResponse,
+ type SlskdSearch,
+} from './shared';
+
+// Left panel of the /soulseek workspace — search slskd and enqueue downloads. A search is a create →
+// poll-until-complete → fetch-responses cycle (slskd resolves in ~1-2s). Responses arrive grouped by
+// peer and can be huge (hundreds of users, tens of thousands of files), so we flatten, rank by
+// availability, and cap the render. Queuing a download bumps the refresh channel so the transfers
+// panel (right) reflects it immediately.
+
+const MAX_ROWS = 200;
+const POLL_MS = 600;
+const POLL_TIMEOUT_MS = 20_000;
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const rowKey = (row: ResultRow) => `${row.username}::${row.filename}`;
+
+export const SoulseekSearch = () => {
+ const client = useClient();
+ const [, bumpRefresh] = usePanelChannel
+
+ );
+};
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/SoulseekTransfers.tsx b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekTransfers.tsx
new file mode 100644
index 00000000..209d337e
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/SoulseekTransfers.tsx
@@ -0,0 +1,177 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useClient } from 'hooks/useClient';
+import { usePanelChannel } from 'hooks/usePanelChannel';
+import { RefreshCw, X, Radio } from 'lucide-react';
+import {
+ SLSKD_REFRESH_CHANNEL,
+ basename,
+ formatSize,
+ formatSpeed,
+ transferPhase,
+ type SlskdApplication,
+ type SlskdDownloadUser,
+ type SlskdTransfer,
+ type TransferPhase,
+} from './shared';
+
+// Right panel of the /soulseek workspace — the connection status strip plus the live download queue.
+// Downloads are polled from slskd (GET /transfers/downloads, nested user → directories → files),
+// flattened, and ordered active-first. Enqueuing from the search panel bumps the refresh channel so
+// the list updates without waiting for the next poll tick.
+
+const POLL_MS = 1500;
+
+type Row = SlskdTransfer & { phase: TransferPhase };
+
+const PHASE_ORDER: Record
+
+
+
+
+
+
+
+ {error &&
+ 
+
+
+
+
+ Soulseek
+Search the Soulseek network
+Search failed: {error}
} + {meta && ( ++ {meta.total.toLocaleString()} files from {meta.users.toLocaleString()} users + {meta.total > rows.length && ` — showing the top ${rows.length}`} +
+ )} +
+ {rows.length > 0 && (
+
+
+ {rows.map((row) => {
+ const key = rowKey(row);
+ const isQueued = queued.has(key);
+ return (
+
+ )}
+
+ {!searching && !error && meta && rows.length === 0 && (
+
+
+ );
+ })}
+
+
+
+
+ {row.isLocked &&
+
+ {row.username}
+ · {formatSize(row.size)}
+ {row.extension && · {row.extension}}
+ {row.bitRate ? · {row.bitRate} kbps : null}
+ {row.hasFreeUploadSlot ? (
+ · free slot
+ ) : (
+ · queue {row.queueLength}
+ )}
+
+ No results.
+ )} + {!meta && !searching && !error && ( +Search for something to get started.
+ )} +
+
+ );
+};
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/index.ts b/src/workspaces/officerdev/src/apps/Soulseek/index.ts
new file mode 100644
index 00000000..f45a7ea3
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/index.ts
@@ -0,0 +1,11 @@
+import type { AppRegistryMeta } from '../../AppRegistry';
+import { Search, ArrowDownToLine } from 'lucide-react';
+import { SoulseekSearch } from './SoulseekSearch';
+import { SoulseekTransfers } from './SoulseekTransfers';
+
+export { SoulseekSearch, SoulseekTransfers };
+
+export const appRegistryMetas: AppRegistryMeta[] = [
+ { key: 'soulseek-search', name: 'Search', icon: Search, component: SoulseekSearch, availableOnPanel: false },
+ { key: 'soulseek-transfers', name: 'Transfers', icon: ArrowDownToLine, component: SoulseekTransfers, availableOnPanel: false },
+];
diff --git a/src/workspaces/officerdev/src/apps/Soulseek/shared.ts b/src/workspaces/officerdev/src/apps/Soulseek/shared.ts
new file mode 100644
index 00000000..4091c83e
--- /dev/null
+++ b/src/workspaces/officerdev/src/apps/Soulseek/shared.ts
@@ -0,0 +1,92 @@
+// Shared types/helpers for the /soulseek workspace panels (SoulseekSearch + SoulseekTransfers), which
+// talk to slskd through the /api/slskd auth proxy and coordinate over a single panel channel.
+
+// Bumped (to a fresh nonce) whenever a download is enqueued from the search panel, so the transfers
+// panel refetches immediately instead of waiting for its next poll tick.
+export const SLSKD_REFRESH_CHANNEL = 'soulseek:refresh';
+
+export type SlskdApplication = {
+ version?: { current?: string; full?: string; latest?: string; isUpdateAvailable?: boolean };
+ server?: { state?: string; address?: string; isConnected?: boolean };
+};
+
+export type SlskdSearch = {
+ id: string;
+ isComplete: boolean;
+ state: string;
+ fileCount: number;
+ responseCount: number;
+};
+
+export type SlskdFile = {
+ filename: string;
+ size: number;
+ extension?: string;
+ isLocked?: boolean;
+ bitRate?: number;
+ length?: number;
+};
+
+export type SlskdResponse = {
+ username: string;
+ fileCount: number;
+ files: SlskdFile[];
+ hasFreeUploadSlot: boolean;
+ queueLength: number;
+ uploadSpeed: number;
+};
+
+// One flat, rankable search result (a single file from a single peer).
+export type ResultRow = {
+ username: string;
+ filename: string;
+ size: number;
+ extension: string;
+ isLocked: boolean;
+ bitRate?: number;
+ hasFreeUploadSlot: boolean;
+ queueLength: number;
+ uploadSpeed: number;
+};
+
+// A download transfer. GET /transfers/downloads nests these as user → directories → files.
+export type SlskdTransfer = {
+ id: string;
+ username: string;
+ direction: string;
+ filename: string;
+ size: number;
+ state: string;
+ bytesTransferred: number;
+ averageSpeed: number;
+ percentComplete: number;
+ placeInQueue?: number;
+};
+export type SlskdDownloadDirectory = { directory: string; fileCount: number; files: SlskdTransfer[] };
+export type SlskdDownloadUser = { username: string; directories: SlskdDownloadDirectory[] };
+
+export const basename = (path: string) => path.split(/[\\/]/).pop() ?? path;
+
+export const formatSize = (bytes: number) => {
+ if (!bytes) return '0 B';
+ const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+ return `${(bytes / 1024 ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+};
+
+export const formatSpeed = (bytesPerSec: number) => (bytesPerSec > 0 ? `${formatSize(bytesPerSec)}/s` : '');
+
+export const extOf = (file: SlskdFile) =>
+ (file.extension?.trim() || basename(file.filename).split('.').pop() || '').toLowerCase();
+
+// slskd serialises TransferStates as a compound flag string ("Completed, Succeeded", "Queued, Remotely",
+// "InProgress", "Requested", …). Collapse it to the one bucket we render.
+export type TransferPhase = 'downloading' | 'queued' | 'done' | 'failed';
+export const transferPhase = (state: string): TransferPhase => {
+ const s = state.toLowerCase();
+ if (s.includes('inprogress') || s.includes('initializing')) return 'downloading';
+ if (s.includes('succeeded')) return 'done';
+ if (s.includes('errored') || s.includes('cancelled') || s.includes('rejected') || s.includes('timedout') || s.includes('aborted'))
+ return 'failed';
+ return 'queued'; // Requested / Queued / anything not yet resolved
+};
+
+
+
+
+
+
+ Downloads {rows.length > 0 && `(${rows.length})`}
+
+
+
+ {rows.length === 0 ? (
+
+ No downloads yet. Search and queue a file to see it here.
+ ) : ( +
+ {rows.map((row) => {
+ const style = phaseStyle[row.phase];
+ const pct =
+ row.phase === 'done' ? 100 : Math.max(0, Math.min(100, Math.round(row.percentComplete)));
+ const speed = row.phase === 'downloading' ? formatSpeed(row.averageSpeed) : '';
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+ {basename(row.filename)}
+
+
+
+
+
+
+ {row.username}
+ · {style.label}
+ {row.size > 0 && · {formatSize(row.size)}}
+ {speed && · {speed}}
+ {row.phase === 'queued' && row.placeInQueue ? · #{row.placeInQueue} in queue : null}
+
+