@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/frontend/src/lib/mermaid_helpers.test.ts

@@ -0,0 +1,65 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolveMermaidTheme, isMermaidLanguage, clampZoom, MIN_ZOOM, MAX_ZOOM } from './mermaid_helpers.ts';
+
+describe('resolveMermaidTheme', () => {
+  it('returns "base" for light theme', () => {
+    assert.equal(resolveMermaidTheme('light'), 'base');
+  });
+
+  it('returns "base" for dark theme', () => {
+    assert.equal(resolveMermaidTheme('dark'), 'base');
+  });
+
+  it('returns "base" when data-theme is null', () => {
+    assert.equal(resolveMermaidTheme(null), 'base');
+  });
+
+  it('returns "base" for unknown theme values', () => {
+    assert.equal(resolveMermaidTheme('contrast'), 'base');
+  });
+});
+
+describe('isMermaidLanguage', () => {
+  it('returns true for "mermaid"', () => {
+    assert.equal(isMermaidLanguage('mermaid'), true);
+  });
+
+  it('returns false for other languages', () => {
+    assert.equal(isMermaidLanguage('javascript'), false);
+    assert.equal(isMermaidLanguage('python'), false);
+    assert.equal(isMermaidLanguage(''), false);
+  });
+
+  it('is case-sensitive', () => {
+    assert.equal(isMermaidLanguage('Mermaid'), false);
+    assert.equal(isMermaidLanguage('MERMAID'), false);
+  });
+});
+
+describe('clampZoom', () => {
+  it('applies positive delta', () => {
+    assert.equal(clampZoom(1, 0.15), 1.15);
+  });
+
+  it('applies negative delta', () => {
+    const result = clampZoom(1, -0.15);
+    assert.ok(Math.abs(result - 0.85) < 0.001);
+  });
+
+  it('clamps at MAX_ZOOM', () => {
+    assert.equal(clampZoom(MAX_ZOOM, 1), MAX_ZOOM);
+  });
+
+  it('clamps at MIN_ZOOM', () => {
+    assert.equal(clampZoom(MIN_ZOOM, -1), MIN_ZOOM);
+  });
+
+  it('does not go below MIN_ZOOM from large negative delta', () => {
+    assert.equal(clampZoom(0.5, -10), MIN_ZOOM);
+  });
+
+  it('does not exceed MAX_ZOOM from large positive delta', () => {
+    assert.equal(clampZoom(4, 10), MAX_ZOOM);
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/lib/mermaid_helpers.ts

@@ -0,0 +1,110 @@
+/**
+ * mermaid_helpers — pure utility functions for mermaid diagram rendering.
+ *
+ * Extracts testable logic from the MermaidBlock component:
+ * theme resolution, zoom clamping, and language detection.
+ */
+
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 5;
+
+/**
+ * Resolves the mermaid theme name from the data-theme attribute value.
+ * Uses 'base' theme so we can fully control colors via themeVariables.
+ */
+export const resolveMermaidTheme = (_dataTheme: string | null): 'base' => {
+  return 'base';
+};
+
+/**
+ * Reads the current CSS custom properties from the document and returns
+ * mermaid themeVariables that align diagrams with the design system.
+ */
+export const getDesignSystemThemeVariables = (): Record<string, string> => {
+  const s = getComputedStyle(document.documentElement);
+  const v = (name: string) => s.getPropertyValue(name).trim();
+
+  const bg = v('--bg-primary') || '#0c0c0e';
+  const bgAlt = v('--bg-secondary') || '#18191c';
+  const bgRaised = v('--bg-tertiary') || '#222326';
+  const border = v('--border-color') || '#2e2f33';
+  const text = v('--text-primary') || '#f0f0f0';
+  const textSecondary = v('--text-secondary') || '#9a9ba0';
+  const accent = v('--accent') || '#b5e853';
+  const error = v('--error-color') || '#f06060';
+
+  // Use text-secondary for lines/borders so they're visible against dark backgrounds
+  const lineStroke = textSecondary;
+  // Use a slightly lighter border for node outlines
+  const nodeBorderColor = textSecondary;
+
+  return {
+    // General
+    background: bg,
+    primaryColor: bgRaised,
+    primaryBorderColor: nodeBorderColor,
+    primaryTextColor: text,
+    secondaryColor: bgAlt,
+    secondaryBorderColor: nodeBorderColor,
+    secondaryTextColor: text,
+    tertiaryColor: bgRaised,
+    tertiaryBorderColor: nodeBorderColor,
+    tertiaryTextColor: text,
+
+    // Lines & labels
+    lineColor: lineStroke,
+    textColor: text,
+    mainBkg: bgRaised,
+    nodeBorder: nodeBorderColor,
+    clusterBkg: bgAlt,
+    clusterBorder: nodeBorderColor,
+    titleColor: text,
+
+    // Edge labels
+    edgeLabelBackground: bgRaised,
+
+    // Fonts
+    fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
+    fontSize: '13px',
+
+    // Flowchart-specific
+    nodeTextColor: text,
+
+    // Accents for special states
+    errorBkgColor: error,
+    errorTextColor: text,
+
+    // Sequence diagrams
+    actorBkg: bgRaised,
+    actorBorder: nodeBorderColor,
+    actorTextColor: text,
+    actorLineColor: lineStroke,
+    signalColor: text,
+    signalTextColor: text,
+    labelBoxBkgColor: bgAlt,
+    labelBoxBorderColor: nodeBorderColor,
+    labelTextColor: text,
+    loopTextColor: textSecondary,
+    noteBkgColor: bgAlt,
+    noteBorderColor: nodeBorderColor,
+    noteTextColor: text,
+    activationBkgColor: bgRaised,
+    activationBorderColor: accent,
+  };
+};
+
+/**
+ * Returns true if a code block language identifier indicates a mermaid block.
+ */
+export const isMermaidLanguage = (language: string): boolean => {
+  return language === 'mermaid';
+};
+
+/**
+ * Clamps a zoom level after applying a delta, keeping it within bounds.
+ */
+export const clampZoom = (current: number, delta: number): number => {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, current + delta));
+};
+
+export { MIN_ZOOM, MAX_ZOOM };

package/templates/assistkick-product-system/packages/frontend/src/lib/message_queue.ts

@@ -0,0 +1,66 @@
+/**
+ * MessageQueue — pure logic for managing a queue of user messages.
+ *
+ * Messages are enqueued while Claude is still responding to the current one.
+ * When the current CLI invocation completes, all queued messages are drained,
+ * merged into a single prompt, and sent as the next invocation.
+ *
+ * This class is framework-agnostic — the Zustand store wraps it for React.
+ */
+
+export interface QueuedMessage {
+  id: string;
+  text: string;
+  createdAt: number;
+}
+
+export class MessageQueue {
+  private queue: QueuedMessage[] = [];
+  private idCounter = 0;
+
+  private nextId = (): string => {
+    return `q_${++this.idCounter}_${Date.now()}`;
+  };
+
+  getQueue = (): readonly QueuedMessage[] => {
+    return this.queue;
+  };
+
+  getLength = (): number => {
+    return this.queue.length;
+  };
+
+  enqueue = (text: string): QueuedMessage => {
+    const msg: QueuedMessage = {
+      id: this.nextId(),
+      text,
+      createdAt: Date.now(),
+    };
+    this.queue = [...this.queue, msg];
+    return msg;
+  };
+
+  remove = (id: string): boolean => {
+    const len = this.queue.length;
+    this.queue = this.queue.filter((m) => m.id !== id);
+    return this.queue.length < len;
+  };
+
+  clear = (): void => {
+    this.queue = [];
+  };
+
+  drainAll = (): QueuedMessage[] => {
+    const messages = this.queue;
+    this.queue = [];
+    return messages;
+  };
+
+  /**
+   * Merge all queued message texts into a single prompt string.
+   * Uses double newline as separator.
+   */
+  static mergeTexts = (messages: QueuedMessage[]): string => {
+    return messages.map((m) => m.text).join('\n\n');
+  };
+}

package/templates/assistkick-product-system/packages/frontend/src/lib/tool_use_summary.test.ts

@@ -0,0 +1,124 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { summarizeToolUse, toolIcon } from './tool_use_summary.ts';
+
+describe('summarizeToolUse', () => {
+  it('summarizes Read with file path', () => {
+    assert.equal(
+      summarizeToolUse('Read', { file_path: 'src/auth.ts' }),
+      'Read src/auth.ts',
+    );
+  });
+
+  it('summarizes Read without file path', () => {
+    assert.equal(summarizeToolUse('Read', {}), 'Read file');
+  });
+
+  it('summarizes Write with file path', () => {
+    assert.equal(
+      summarizeToolUse('Write', { file_path: 'src/index.ts' }),
+      'Write src/index.ts',
+    );
+  });
+
+  it('summarizes Edit with file path', () => {
+    assert.equal(
+      summarizeToolUse('Edit', { file_path: 'src/main.ts' }),
+      'Edit src/main.ts',
+    );
+  });
+
+  it('summarizes Bash with command', () => {
+    assert.equal(
+      summarizeToolUse('Bash', { command: 'npm test' }),
+      'Bash: npm test',
+    );
+  });
+
+  it('truncates long Bash commands', () => {
+    const longCmd = 'a'.repeat(200);
+    const result = summarizeToolUse('Bash', { command: longCmd });
+    assert.ok(result.length <= 121); // 120 + ellipsis char
+    assert.ok(result.endsWith('…'));
+  });
+
+  it('summarizes Grep with pattern and path', () => {
+    assert.equal(
+      summarizeToolUse('Grep', { pattern: 'TODO', path: 'src/' }),
+      'Grep "TODO" in src/',
+    );
+  });
+
+  it('summarizes Grep with pattern only', () => {
+    assert.equal(
+      summarizeToolUse('Grep', { pattern: 'import' }),
+      'Grep "import"',
+    );
+  });
+
+  it('summarizes Glob with pattern', () => {
+    assert.equal(
+      summarizeToolUse('Glob', { pattern: '**/*.ts' }),
+      'Glob **/*.ts',
+    );
+  });
+
+  it('summarizes Glob with pattern and path', () => {
+    assert.equal(
+      summarizeToolUse('Glob', { pattern: '*.tsx', path: 'src/components' }),
+      'Glob *.tsx in src/components',
+    );
+  });
+
+  it('summarizes Agent with description', () => {
+    assert.equal(
+      summarizeToolUse('Agent', { description: 'Explore codebase' }),
+      'Agent: Explore codebase',
+    );
+  });
+
+  it('summarizes Agent without description', () => {
+    assert.equal(summarizeToolUse('Agent', {}), 'Agent');
+  });
+
+  it('summarizes TodoWrite', () => {
+    assert.equal(summarizeToolUse('TodoWrite', {}), 'Update task list');
+  });
+
+  it('summarizes WebSearch with query', () => {
+    assert.equal(
+      summarizeToolUse('WebSearch', { query: 'react 19 features' }),
+      'Search: react 19 features',
+    );
+  });
+
+  it('summarizes WebFetch with url', () => {
+    assert.equal(
+      summarizeToolUse('WebFetch', { url: 'https://example.com' }),
+      'Fetch: https://example.com',
+    );
+  });
+
+  it('returns tool name for unknown tools', () => {
+    assert.equal(summarizeToolUse('CustomTool', { foo: 'bar' }), 'CustomTool');
+  });
+});
+
+describe('toolIcon', () => {
+  it('returns correct icons for known tools', () => {
+    assert.equal(toolIcon('Read'), '📖');
+    assert.equal(toolIcon('Write'), '📝');
+    assert.equal(toolIcon('Edit'), '✏️');
+    assert.equal(toolIcon('Bash'), '🔧');
+    assert.equal(toolIcon('Grep'), '🔍');
+    assert.equal(toolIcon('Glob'), '📂');
+    assert.equal(toolIcon('Agent'), '🤖');
+    assert.equal(toolIcon('TodoWrite'), '📋');
+    assert.equal(toolIcon('WebSearch'), '🌐');
+    assert.equal(toolIcon('WebFetch'), '🌐');
+  });
+
+  it('returns default icon for unknown tools', () => {
+    assert.equal(toolIcon('SomeTool'), '⚙️');
+  });
+});

package/templates/assistkick-product-system/packages/frontend/src/lib/tool_use_summary.ts

@@ -0,0 +1,112 @@
+/**
+ * tool_use_summary — generates brief human-readable summaries for Claude tool
+ * invocations. Used by ToolUseCard to display a collapsed one-line description
+ * of what the tool is doing (e.g. "Read src/auth.ts", "Bash: npm test").
+ */
+
+/** Maximum length for summary text before truncation. */
+const MAX_SUMMARY_LEN = 120;
+
+const truncate = (text: string, max: number): string =>
+  text.length > max ? `${text.slice(0, max)}…` : text;
+
+/**
+ * Generate a brief summary string from a tool_use block's name and input.
+ * Returns a one-line description suitable for display in a collapsed card.
+ */
+export const summarizeToolUse = (
+  name: string,
+  input: Record<string, unknown>,
+): string => {
+  switch (name) {
+    case 'Read': {
+      const path = input.file_path as string | undefined;
+      return path ? `Read ${path}` : 'Read file';
+    }
+
+    case 'Write': {
+      const path = input.file_path as string | undefined;
+      return path ? `Write ${path}` : 'Write file';
+    }
+
+    case 'Edit': {
+      const path = input.file_path as string | undefined;
+      return path ? `Edit ${path}` : 'Edit file';
+    }
+
+    case 'Bash': {
+      const cmd = input.command as string | undefined;
+      return cmd ? truncate(`Bash: ${cmd}`, MAX_SUMMARY_LEN) : 'Bash';
+    }
+
+    case 'Grep': {
+      const pattern = input.pattern as string | undefined;
+      const path = input.path as string | undefined;
+      const parts = ['Grep'];
+      if (pattern) parts.push(`"${pattern}"`);
+      if (path) parts.push(`in ${path}`);
+      return truncate(parts.join(' '), MAX_SUMMARY_LEN);
+    }
+
+    case 'Glob': {
+      const pattern = input.pattern as string | undefined;
+      const path = input.path as string | undefined;
+      const parts = ['Glob'];
+      if (pattern) parts.push(pattern);
+      if (path) parts.push(`in ${path}`);
+      return truncate(parts.join(' '), MAX_SUMMARY_LEN);
+    }
+
+    case 'Agent': {
+      const desc = input.description as string | undefined;
+      return desc ? truncate(`Agent: ${desc}`, MAX_SUMMARY_LEN) : 'Agent';
+    }
+
+    case 'TodoWrite': {
+      return 'Update task list';
+    }
+
+    case 'WebSearch': {
+      const query = input.query as string | undefined;
+      return query ? truncate(`Search: ${query}`, MAX_SUMMARY_LEN) : 'Web search';
+    }
+
+    case 'WebFetch': {
+      const url = input.url as string | undefined;
+      return url ? truncate(`Fetch: ${url}`, MAX_SUMMARY_LEN) : 'Web fetch';
+    }
+
+    default:
+      return name;
+  }
+};
+
+/**
+ * Return a short label for the tool type, used for the card icon area.
+ */
+export const toolIcon = (name: string): string => {
+  switch (name) {
+    case 'Read':
+      return '📖';
+    case 'Write':
+      return '📝';
+    case 'Edit':
+      return '✏️';
+    case 'Bash':
+      return '🔧';
+    case 'Grep':
+      return '🔍';
+    case 'Glob':
+      return '📂';
+    case 'Agent':
+      return '🤖';
+    case 'TodoWrite':
+      return '📋';
+    case 'WebSearch':
+      return '🌐';
+    case 'WebFetch':
+      return '🌐';
+    default:
+      return '⚙️';
+  }
+};

package/templates/assistkick-product-system/packages/frontend/src/routes/AgentsRoute.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { AgentsView } from '../components/AgentsView';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function AgentsRoute() {
+  useDocumentTitle('Agents');
   return <AgentsView />;
 }

package/templates/assistkick-product-system/packages/frontend/src/routes/ChatRoute.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ChatView } from '../components/ChatView';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+
+export function ChatRoute() {
+  useDocumentTitle('Chat');
+  return <ChatView visible={true} />;
+}

package/templates/assistkick-product-system/packages/frontend/src/routes/CoherenceRoute.tsx

@@ -3,8 +3,10 @@ import { CoherenceView } from '../components/CoherenceView';
 import { useGraphStore } from '../stores/useGraphStore';
 import { useProjectStore } from '../stores/useProjectStore';
 import { useSidePanelStore } from '../stores/useSidePanelStore';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function CoherenceRoute() {
+  useDocumentTitle('Coherence');
   const graphData = useGraphStore((s) => s.graphData);
   const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
   const openSidePanel = useSidePanelStore((s) => s.open);

package/templates/assistkick-product-system/packages/frontend/src/routes/DashboardLayout.tsx

@@ -3,10 +3,8 @@ import { Outlet } from 'react-router-dom';
 import { Toolbar } from '../components/Toolbar';
 import { SidePanel } from '../components/SidePanel';
 import { QaIssueSheet } from '../components/QaIssueSheet';
-import { GitRepoModal } from '../components/GitRepoModal';
 import { useSidePanelStore } from '../stores/useSidePanelStore';
 import { useQaSheetStore } from '../stores/useQaSheetStore';
-import { useGitModalStore } from '../stores/useGitModalStore';
 import { useGraphUIStore } from '../stores/useGraphUIStore';
 import { useProjects } from '../hooks/useProjects';
 import { useGraph } from '../hooks/useGraph';
@@ -19,7 +17,6 @@ export function DashboardLayout() {
 
   const closeSidePanel = useSidePanelStore((s) => s.close);
   const closeQaSheet = useQaSheetStore((s) => s.close);
-  const gitModalProject = useGitModalStore((s) => s.project);
   const setSettingsOpen = useGraphUIStore((s) => s.setSettingsOpen);
 
   // Global keyboard handler
@@ -47,7 +44,6 @@ export function DashboardLayout() {
           <QaIssueSheet />
         </div>
 
-        {gitModalProject && <GitRepoModal />}
       </div>
     </ToastProvider>
   );

package/templates/assistkick-product-system/packages/frontend/src/routes/DesignSystemRoute.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { DesignSystemView } from '../components/DesignSystemView';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function DesignSystemRoute() {
+  useDocumentTitle('Design System');
   return <DesignSystemView visible={true} />;
 }

package/templates/assistkick-product-system/packages/frontend/src/routes/FilesRoute.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { FilesView } from '../components/FilesView';
 import { useProjectStore } from '../stores/useProjectStore';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function FilesRoute() {
+  useDocumentTitle('Files');
   const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
 
   return (

package/templates/assistkick-product-system/packages/frontend/src/routes/GraphRoute.tsx

@@ -6,8 +6,10 @@ import { GraphSettings } from '../components/GraphSettings';
 import { useGraphStore } from '../stores/useGraphStore';
 import { useGraphUIStore } from '../stores/useGraphUIStore';
 import { useSidePanelStore } from '../stores/useSidePanelStore';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function GraphRoute() {
+  useDocumentTitle('Graph');
   const graphData = useGraphStore((s) => s.graphData);
   const graphError = useGraphStore((s) => s.error);
   const openSidePanel = useSidePanelStore((s) => s.open);

package/templates/assistkick-product-system/packages/frontend/src/routes/KanbanRoute.tsx

@@ -4,8 +4,10 @@ import { useGraphStore } from '../stores/useGraphStore';
 import { useProjectStore } from '../stores/useProjectStore';
 import { useSidePanelStore } from '../stores/useSidePanelStore';
 import { useQaSheetStore } from '../stores/useQaSheetStore';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function KanbanRoute() {
+  useDocumentTitle('Kanban');
   const graphData = useGraphStore((s) => s.graphData);
   const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
   const openSidePanel = useSidePanelStore((s) => s.open);

package/templates/assistkick-product-system/packages/frontend/src/routes/TerminalRoute.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { TerminalView } from '../components/TerminalView';
 import { useProjectStore } from '../stores/useProjectStore';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function TerminalRoute() {
+  useDocumentTitle('Terminal');
   const projects = useProjectStore((s) => s.projects);
 
   return <TerminalView visible={true} projects={projects} />;

package/templates/assistkick-product-system/packages/frontend/src/routes/UsersRoute.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { UsersView } from '../components/UsersView';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function UsersRoute() {
+  useDocumentTitle('Users');
   return <UsersView visible={true} />;
 }

package/templates/assistkick-product-system/packages/frontend/src/routes/VideographyRoute.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { VideographyView } from '../components/VideographyView';
 import { useProjectStore } from '../stores/useProjectStore';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function VideographyRoute() {
+  useDocumentTitle('Videography');
   const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
 
   return (

package/templates/assistkick-product-system/packages/frontend/src/routes/WorkflowsRoute.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { WorkflowsView } from '../components/WorkflowsView';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function WorkflowsRoute() {
+  useDocumentTitle('Workflows');
   return <WorkflowsView />;
 }

package/templates/assistkick-product-system/packages/frontend/src/routes/accept_invitation.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { AcceptInvitationPage } from '../pages/accept_invitation_page';
 import { useAuth } from '../hooks/useAuth';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function AcceptInvitationRoute() {
+  useDocumentTitle('Accept Invitation');
   const { user, loading } = useAuth();
   const navigate = useNavigate();
 

package/templates/assistkick-product-system/packages/frontend/src/routes/forgot_password.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import { Navigate } from 'react-router-dom';
 import { ForgotPasswordPage } from '../pages/forgot_password_page';
 import { useAuth } from '../hooks/useAuth';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function ForgotPasswordRoute() {
+  useDocumentTitle('Forgot Password');
   const { user, loading } = useAuth();
 
   if (loading) return null;

package/templates/assistkick-product-system/packages/frontend/src/routes/login.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { LoginPage } from '../components/LoginPage';
 import { useAuth } from '../hooks/useAuth';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function LoginRoute() {
+  useDocumentTitle('Login');
   const { user, loading } = useAuth();
   const navigate = useNavigate();
 

package/templates/assistkick-product-system/packages/frontend/src/routes/register.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { RegisterPage } from '../pages/register_page';
 import { useAuth } from '../hooks/useAuth';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function RegisterRoute() {
+  useDocumentTitle('Register');
   const { user, loading } = useAuth();
   const navigate = useNavigate();