feat: URL deep linking — share a direct link to any team, agent, or tab

[mukul975]

Summary

Add URL-based deep linking so users can share a direct link to a specific tab, team, or agent view. Currently every page load resets to Overview — this makes it impossible to bookmark or share a specific view.

Example URLs

http://localhost:3001/#/teams/my-research-team
http://localhost:3001/#/inboxes/my-research-team/researcher-3
http://localhost:3001/#/analytics
http://localhost:3001/#/history
http://localhost:3001/#/communication?filter=completion

Proposed Implementation

Using hash routing (no server config changes needed — the server already serves index.html for all routes):

npm install react-router-dom

src/main.jsx

import { HashRouter } from 'react-router-dom';

createRoot(document.getElementById('root')).render(
  <HashRouter>
    <App />
  </HashRouter>
);

src/App.jsx — replace tab state with routes

import { Routes, Route, useNavigate, useParams } from 'react-router-dom';

// Tab navigation
const navigate = useNavigate();
const handleTabChange = (tabId) => navigate(`/${tabId}`);

// Active tab derived from route
const location = useLocation();
const activeTab = location.pathname.slice(1) || 'overview';

Deep link into a specific team

// Route: /#/teams/:teamName
function TeamsTab() {
  const { teamName } = useParams();
  // Auto-scroll/expand the matching TeamCard on mount
  useEffect(() => {
    if (teamName) {
      document.getElementById(`team-${teamName}`)?.scrollIntoView({ behavior: 'smooth' });
    }
  }, [teamName]);
}

Share button

Add a copy-link button next to each TeamCard header that copies window.location.origin + '#/teams/' + encodeURIComponent(team.name) to clipboard.

Acceptance Criteria

• Hash router installed and wired up (no <BrowserRouter> — no server changes needed)
• All 6 tabs (overview, teams, communication, analytics, history, inboxes) have stable URL paths
• Browser back/forward buttons work correctly between tabs
• /#/inboxes/:teamName/:agentName jumps to and expands that specific agent
• /#/communication?filter=completion applies the filter on load
• Share/copy-link button on each TeamCard
• Tab state survives page refresh
• No breaking changes to existing component APIs

Why Hash Routing

Hash routing (#/...) works without any server configuration changes. The existing server.js catch-all route already handles this. React Router v6 <HashRouter> is the right choice.

Complexity

Low — This is a well-understood refactor. The main App.jsx tab state is a single useState that gets replaced by useLocation. Estimated effort: 2–4 hours for an experienced React developer.

References

• React Router v6 HashRouter: https://reactrouter.com/en/main/router-components/hash-router
• URL search params in React Router: https://reactrouter.com/en/main/hooks/use-search-params