add /calendar and /contacts screens over the caldav json door

two workspace screens backed by one app folder: the collection list on the
left, the selected calendar's agenda or address book on the right. both read
the officer-caldav sidecar through the /api/caldav auth proxy, which holds no
DAV credentials of its own.

the selected collection is a DAV path with slashes in it, so it lives in
?collection= on the same route rather than as a path segment — still in the
URL, still bookmarkable, no selection channel. an absent or unknown value
resolves to the first collection inside the panels instead of redirecting,
because until the list has loaded there is no canonical URL to redirect to.

the agenda is a grouped list, not a month grid: the sidecar returns RRULE
unexpanded, so a grid would have to invent occurrences the server never
claimed existed. a repeating event gets a badge instead.

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

src/apps/officer-web/App.tsx

@@ -39,6 +39,8 @@ export function App() {
             <Route path="/chat/:sessionId" element={<Dashboard.SessionListPage />} />
             <Route path="/plans" element={<Dashboard.Plans />} />
             <Route path="/files" element={<Dashboard.FilesScreen />} />
+            <Route path="/calendar" element={<Dashboard.CalendarScreen />} />
+            <Route path="/contacts" element={<Dashboard.ContactsScreen />} />
             <Route path="/music" element={<Dashboard.MusicScreen />} />
             <Route path="/soulseek" element={<Dashboard.SoulseekScreen />} />
             <Route path="/headscale" element={<Dashboard.HeadscaleScreen />} />

src/apps/officer-web/Screens/Dashboard/Calendar/CalendarScreen.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useMemo } from 'react';
+import type { LayoutNode } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+// /calendar uses the Workspace/Panel system (like /transmission): the calendar list on the left, the
+// selected calendar's agenda on the right. Both panels read the officer-caldav sidecar through the
+// /api/caldav auth proxy, which holds no DAV credentials of its own.
+//
+// There is no :param route pair here and so no <Navigate> guard: a collection id is a DAV path with
+// slashes in it, so the selection lives in ?collection= on this same route. An absent or unknown value
+// resolves to the first collection inside the panels rather than by redirecting, because until the
+// collection list has loaded there is no canonical URL to redirect to.
+
+const ALLOWED_APP_TYPES = new Set<string | null>(['calendar-nav', 'calendar-view', null]);
+
+function normalizeLayout(node: LayoutNode): LayoutNode {
+  if (node.type === 'panel') {
+    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'calendar-view' };
+  }
+  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 CalendarScreen = () => {
+  const rawWorkspace = useDashboardState<LayoutNode>('screens/calendar', 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/Calendar/defaultLayout.ts

@@ -0,0 +1,11 @@
+import type { LayoutNode } from 'officerdev';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'calendar-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'calendar-nav', appType: 'calendar-nav' }, size: 22 },
+    { node: { type: 'panel', id: 'calendar-view', appType: 'calendar-view' }, size: 78 },
+  ],
+};

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

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

src/apps/officer-web/Screens/Dashboard/Contacts/ContactsScreen.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useMemo } from 'react';
+import type { LayoutNode } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+// /contacts — the CardDAV half of the same sidecar as /calendar; see CalendarScreen for why the selected
+// collection is a query param rather than a route segment.
+
+const ALLOWED_APP_TYPES = new Set<string | null>(['contacts-nav', 'contacts-view', null]);
+
+function normalizeLayout(node: LayoutNode): LayoutNode {
+  if (node.type === 'panel') {
+    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'contacts-view' };
+  }
+  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 ContactsScreen = () => {
+  const rawWorkspace = useDashboardState<LayoutNode>('screens/contacts', 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/Contacts/defaultLayout.ts

@@ -0,0 +1,11 @@
+import type { LayoutNode } from 'officerdev';
+
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'contacts-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'contacts-nav', appType: 'contacts-nav' }, size: 22 },
+    { node: { type: 'panel', id: 'contacts-view', appType: 'contacts-view' }, size: 78 },
+  ],
+};

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

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

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

@@ -139,12 +139,16 @@ import {
   Bitcoin,
   Receipt,
   Images,
+  CalendarDays,
+  Contact,
 } from 'lucide-react';
 
 export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Home', to: '/', icon: Home, color: '#f59e0b' },
   { label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
   { label: 'Email', to: '/email', icon: Mail, color: '#ef4444' },
+  { label: 'Calendar', to: '/calendar', icon: CalendarDays, color: '#3b82f6' },
+  { label: 'Contacts', to: '/contacts', icon: Contact, color: '#0ea5e9' },
   { label: 'Chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
   { label: 'Music', to: '/music', icon: Music, color: '#22c55e' },
   { label: 'Photos', to: '/photos', icon: Images, color: '#10b981' },

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

@@ -10,6 +10,8 @@ export * from './TaskLogs';
 export * from './Tasks';
 
 export * from './Files';
+export * from './Calendar';
+export * from './Contacts';
 export * from './Music';
 export * from './Soulseek';
 export * from './Headscale';

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

@@ -14,6 +14,8 @@ const RULES: TitleRule[] = [
   { match: (p) => p.startsWith('/chat'), title: 'Chat' },
   { match: (p) => p.startsWith('/email'), title: 'Email' },
   { match: (p) => p.startsWith('/files'), title: 'Files' },
+  { match: (p) => p.startsWith('/calendar'), title: 'Calendar' },
+  { match: (p) => p.startsWith('/contacts'), title: 'Contacts' },
   { match: (p) => p.startsWith('/music'), title: 'Music' },
   { match: (p) => p.startsWith('/photos'), title: 'Photos' },
   { match: (p) => p.startsWith('/soulseek'), title: 'Soulseek' },