Add speaker management frontend page by skywinder · Pull Request #48 · mycelia-tech/mycelia

skywinder · 2026-01-27T21:47:41Z

Create SpeakersPage.tsx with enrollment dialog and timeline selection
Add backend proxy route for diarization service at /api/diarization/*
Add navigation link in Layout.tsx
Register /speakers route in router.tsx

Features:

List enrolled speakers with profile cards
Enroll new speakers by uploading audio files
Select diarization segments from timeline as samples
View speaker details with stats
Delete speakers

https://claude.ai/code/session_01QkQdYmZstodpuXPoZZoiKN

- Create SpeakersPage.tsx with enrollment dialog and timeline selection - Add backend proxy route for diarization service at /api/diarization/* - Add navigation link in Layout.tsx - Register /speakers route in router.tsx Features: - List enrolled speakers with profile cards - Enroll new speakers by uploading audio files - Select diarization segments from timeline as samples - View speaker details with stats - Delete speakers https://claude.ai/code/session_01QkQdYmZstodpuXPoZZoiKN

Copilot

Pull request overview

This pull request adds a comprehensive speaker management interface to enable voice identification through speaker enrollment. The feature allows users to create speaker profiles by uploading audio samples or selecting segments from existing diarization data.

Changes:

Added SpeakersPage with enrollment dialog supporting file uploads and timeline-based segment selection
Created backend proxy route /api/diarization/* to forward requests to the diarization microservice with authentication
Added navigation link for the Speakers page in the application layout

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 18 comments.

Show a summary per file

File	Description
frontend/src/router.tsx	Registered the `/speakers` route pointing to SpeakersPage component
frontend/src/pages/SpeakersPage.tsx	New page component for managing speaker profiles with enrollment, deletion, and timeline selection features
frontend/src/components/Layout.tsx	Added "Speakers" navigation link with Users icon in the sidebar
backend/routes.ts	Registered wildcard route for diarization service proxy and imported enrollment handler (not yet used)
backend/app/routes/api.diarization.ts	Implemented proxy handler for diarization service requests with authentication and error handling

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-27T21:56:11Z

backend/app/routes/api.diarization.ts

+        // For multipart requests, we need to reconstruct the form data
+        // This is tricky with Express - we'll pass through the raw request
+        // Actually, since Express parses the body, we need to handle this differently
+
+        // For file uploads, we need to handle this specially
+        // The frontend should send directly to the diarization service for file uploads
+        // Or we need to use a middleware like multer
+
+        // For now, let's handle JSON requests and simple form data
+        res.status(400).json({
+          error: "File upload proxy not yet implemented. Please use direct upload to diarization service."
+        });


The multipart/form-data handling returns an error stating the feature is not implemented. However, there's a separate apiDiarizationEnrollHandler function below (lines 117-172) that implements this functionality but is never registered. This creates a confusing situation where enrollment via file upload will always fail with an unhelpful error message. Either implement multipart handling here or register and use the dedicated enrollment handler.

Suggested change

// For multipart requests, we need to reconstruct the form data

// This is tricky with Express - we'll pass through the raw request

// Actually, since Express parses the body, we need to handle this differently

// For file uploads, we need to handle this specially

// The frontend should send directly to the diarization service for file uploads

// Or we need to use a middleware like multer

// For now, let's handle JSON requests and simple form data

res.status(400).json({

error: "File upload proxy not yet implemented. Please use direct upload to diarization service."

});

// Delegate multipart/form-data (file upload) handling to the dedicated

// enrollment handler, which is implemented below in this file.

// This avoids returning a misleading "not implemented" error while

// reusing the existing logic for enrollment via file upload.

await apiDiarizationEnrollHandler(req, res);

Copilot · 2026-01-27T21:56:11Z

backend/app/routes/api.diarization.ts

+    if (error instanceof Error && error.message === "Unauthorized") {
+      return;
+    }
+


Same issue as line 90-92: the "Unauthorized" error check will never match because authenticateOr401 throws a Response object, not an Error. This check can be removed as the error handler middleware will properly handle authentication failures.

Suggested change

if (error instanceof Error && error.message === "Unauthorized") {

return;

}

Copilot · 2026-01-27T21:56:11Z

frontend/src/pages/SpeakersPage.tsx

+      });
+      setDiarizationSegments(docs);
+    } catch (err) {
+      console.error("Failed to load segments:", err);


Error handling for loading diarization segments is incomplete. When the segment loading fails, the error is only logged to the console but not displayed to the user. Consider adding error state and showing an error message in the UI so users understand why segments aren't loading.

Suggested change

console.error("Failed to load segments:", err);

console.error("Failed to load segments:", err);

throw err;

Copilot · 2026-01-27T21:56:12Z

frontend/src/pages/SpeakersPage.tsx

+      await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {
+        method: "DELETE",
+        headers: await apiClient.getAuthHeaders(),
+      });


The DELETE request doesn't check the response status. If the server returns a non-OK status (e.g., 404, 500), the code will still proceed to reload speakers and close the dialog without notifying the user of the failure. Consider checking response.ok similar to how it's done in the enrollment handler.

Suggested change

await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {

method: "DELETE",

headers: await apiClient.getAuthHeaders(),

});

const response = await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {

method: "DELETE",

headers: await apiClient.getAuthHeaders(),

});

if (!response.ok) {

let errorMessage = `Failed to delete speaker: ${response.status} ${response.statusText}`;

try {

const bodyText = await response.text();

if (bodyText) {

errorMessage += ` - ${bodyText}`;

}

} catch {

// Ignore errors while reading the response body

}

throw new Error(errorMessage);

}

Copilot · 2026-01-27T21:56:12Z

frontend/src/pages/SpeakersPage.tsx

+  const [detailSheetOpen, setDetailSheetOpen] = useState(false);
+
+  // Timeline selection state for enrollment
+  const [timelineSelectionMode, setTimelineSelectionMode] = useState(false);


The timelineSelectionMode state variable is declared but never used. The component has timeline selection functionality but doesn't appear to use this state variable. Consider removing it or implementing the intended functionality that uses it.

Suggested change

const [timelineSelectionMode, setTimelineSelectionMode] = useState(false);

Copilot · 2026-01-27T21:56:14Z

frontend/src/pages/SpeakersPage.tsx

+      const speakerId = `user_${userId}_${enrollName.toLowerCase().replace(/\s+/g, "_")}`;
+      const formData = new FormData();
+      formData.append("speaker_id", speakerId);


The speaker ID is generated client-side using a hardcoded user ID and transformed speaker name. This creates potential issues: (1) Multiple speakers with the same name would have ID collisions, (2) The naming convention is exposed and could be manipulated. Consider having the backend generate speaker IDs to ensure uniqueness and proper user isolation.

Suggested change

const speakerId = `user_${userId}_${enrollName.toLowerCase().replace(/\s+/g, "_")}`;

const formData = new FormData();

formData.append("speaker_id", speakerId);

const formData = new FormData();

Copilot · 2026-01-27T21:56:14Z

frontend/src/pages/SpeakersPage.tsx

+      await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {
+        method: "DELETE",
+        headers: await apiClient.getAuthHeaders(),
+      });
+      await loadSpeakers();
+      setDeleteConfirmSpeaker(null);
+    } catch (err) {
+      console.error("Delete failed:", err);


The error handling for the delete operation is incomplete. When the delete request fails, the error is logged but not shown to the user, and setDeleteConfirmSpeaker(null) is called regardless of success or failure. Users won't know if the deletion failed. Consider adding error state and displaying it to the user, and only close the confirmation dialog on successful deletion.

Suggested change

await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {

method: "DELETE",

headers: await apiClient.getAuthHeaders(),

});

await loadSpeakers();

setDeleteConfirmSpeaker(null);

} catch (err) {

console.error("Delete failed:", err);

const response = await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {

method: "DELETE",

headers: await apiClient.getAuthHeaders(),

});

if (!response.ok) {

throw new Error(`Failed to delete speaker (status ${response.status})`);

}

await loadSpeakers();

setDeleteConfirmSpeaker(null);

} catch (err) {

console.error("Delete failed:", err);

alert("Failed to delete speaker. Please try again.");

Copilot · 2026-01-27T21:56:14Z

backend/routes.ts

 import { wellKnownOauthAuthorizationServerHandler } from "@/routes/[.]well-known.oauth-authorization-server.ts";
 import { wellKnownOauthProtectedResourceHandler } from "@/routes/[.]well-known.oauth-protected-resource.ts";
 import { apiChatHandler } from "@/routes/api.chat.ts";
+import { apiDiarizationProxyHandler, apiDiarizationEnrollHandler } from "@/routes/api.diarization.ts";


The apiDiarizationEnrollHandler is imported but never registered as a route in the Express app. This handler appears to be specifically designed to handle multipart file uploads for speaker enrollment, but it's not being used. Either this export should be removed, or a route should be registered for it (e.g., app.post("/api/diarization/enroll/batch", asyncHandler(apiDiarizationEnrollHandler))).

Suggested change

import { apiDiarizationProxyHandler, apiDiarizationEnrollHandler } from "@/routes/api.diarization.ts";

import { apiDiarizationProxyHandler } from "@/routes/api.diarization.ts";

Copilot · 2026-01-27T21:56:14Z

frontend/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { Link, Navigate, Outlet, useLocation } from "react-router-dom";
-import { Clock, Home, Package, Settings, MessageSquare, Activity, Mic } from "lucide-react";
+import { Clock, Home, Package, Settings, MessageSquare, Activity, Mic, Users } from "lucide-react";


Unused import Home.

Suggested change

import { Clock, Home, Package, Settings, MessageSquare, Activity, Mic, Users } from "lucide-react";

import { Clock, Package, Settings, MessageSquare, Activity, Mic, Users } from "lucide-react";

Copilot · 2026-01-27T21:56:15Z

frontend/src/pages/SpeakersPage.tsx

+          <Button variant="outline" onClick={loadSpeakers} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />


This use of variable 'loading' always evaluates to false.

Suggested change

<Button variant="outline" onClick={loadSpeakers} disabled={loading}>

<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />

<Button variant="outline" onClick={loadSpeakers}>

<RefreshCw className="h-4 w-4 mr-2" />

Copilot AI mentioned this pull request Jan 27, 2026

Standardize import paths to use @/ alias in api.diarization.ts #49

Draft

skywinder requested a review from Copilot January 27, 2026 21:49

Copilot started reviewing on behalf of skywinder January 27, 2026 21:49 View session

Copilot AI reviewed Jan 27, 2026

View reviewed changes

skywinder marked this pull request as draft January 29, 2026 19:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Add speaker management frontend page#48

Add speaker management frontend page#48
skywinder wants to merge 1 commit intodevfrom
claude/explore-diarization-0Jg1a

skywinder commented Jan 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	if (error instanceof Error && error.message === "Unauthorized") {
	return;
	}

	console.error("Failed to load segments:", err);
	console.error("Failed to load segments:", err);
	throw err;

-      await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {
-        method: "DELETE",
-        headers: await apiClient.getAuthHeaders(),
-      });
+      const response = await fetch(`${apiClient.baseURL}${DIARIZATION_SERVICE_URL}/speakers/${speaker.id}`, {
+        method: "DELETE",
+        headers: await apiClient.getAuthHeaders(),
+      });
+      if (!response.ok) {
+        let errorMessage = `Failed to delete speaker: ${response.status} ${response.statusText}`;
+        try {
+          const bodyText = await response.text();
+          if (bodyText) {
+            errorMessage += ` - ${bodyText}`;
+          }
+        } catch {
+          // Ignore errors while reading the response body
+        }
+        throw new Error(errorMessage);
+      }

	import { apiDiarizationProxyHandler, apiDiarizationEnrollHandler } from "@/routes/api.diarization.ts";
	import { apiDiarizationProxyHandler } from "@/routes/api.diarization.ts";

	import { Clock, Home, Package, Settings, MessageSquare, Activity, Mic, Users } from "lucide-react";
	import { Clock, Package, Settings, MessageSquare, Activity, Mic, Users } from "lucide-react";

		<Button variant="outline" onClick={loadSpeakers} disabled={loading}>
		<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />

Comments

Conversation

skywinder commented Jan 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants