put the open capability in the url

/tasks, /skills and /processes are one component, so one route pair each and the
rows become links. drops the auto-select-items[0] effect: the bare route is the
list with nothing open, which is a real state. editing and the just-created flag
move to ?edit=1 / ?new=1 — a link row cannot reset them on the way out, and
deriving them means navigating to another item clears them for free.

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

src/apps/officer-web/App.tsx

@@ -85,8 +85,11 @@ export function App() {
 
             <Route path="/code-editor" element={<Dashboard.CodeEditor />} />
             <Route path="/skills" element={<Dashboard.Skills />} />
+            <Route path="/skills/:dirName" element={<Dashboard.Skills />} />
             <Route path="/tasks" element={<Dashboard.Tasks />} />
+            <Route path="/tasks/:dirName" element={<Dashboard.Tasks />} />
             <Route path="/processes" element={<Dashboard.Processes />} />
+            <Route path="/processes/:dirName" element={<Dashboard.Processes />} />
             <Route path="/task-logs" element={<Dashboard.TaskLogs />} />
             <Route path="/jobs" element={<Dashboard.JobsPage />} />
             <Route path="/jobs/:id" element={<Dashboard.JobsPage />} />

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

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -27,9 +28,10 @@ type CapabilityListProps = {
   kind: string;
   endpoint: string;
   queryKey: string;
+  /** Route root for this capability — `/tasks`, `/skills`, `/processes`. Rows link to `<basePath>/<dirName>`. */
+  basePath: string;
   selected: string | null;
-  onSelect: (dirName: string) => void;
-  onCreate?: (dirName: string) => void;
+  onCreate: (dirName: string) => void;
   search?: string;
   showCreate?: boolean;
   onShowCreateChange?: (value: boolean) => void;
@@ -39,6 +41,8 @@ type CapabilityPageProps = {
   kind: string;
   endpoint: string;
   queryKey: string;
+  /** Route root — given explicitly rather than reused from `endpoint`, which only happens to match. */
+  basePath: string;
 };
 
 type CapabilityChatProps = {
@@ -318,8 +322,8 @@ export const CapabilityList = ({
   kind,
   endpoint,
   queryKey,
+  basePath,
   selected,
-  onSelect,
   onCreate,
   search: externalSearch,
   showCreate,
@@ -348,7 +352,7 @@ export const CapabilityList = ({
       await qc.invalidateQueries({ queryKey: [queryKey] });
       setCreating(false);
       setNewName('');
-      (onCreate ?? onSelect)(res.dirName);
+      onCreate(res.dirName);
     } catch {
       toast.error(`Failed to create ${kind}`);
     }
@@ -429,10 +433,10 @@ export const CapabilityList = ({
       )}
       <div className="overflow-y-auto flex-1">
         {filtered.map((item) => (
-          <button
+          <Link
             key={item.dirName}
-            onClick={() => onSelect(item.dirName)}
-            className={`w-full text-left px-4 py-3 border-b border-duck-dark/5 cursor-pointer transition-colors ${
+            to={`${basePath}/${encodeURIComponent(item.dirName)}`}
+            className={`block w-full text-left px-4 py-3 border-b border-duck-dark/5 cursor-pointer transition-colors ${
               selected === item.dirName ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
             }`}
           >
@@ -440,7 +444,7 @@ export const CapabilityList = ({
               <span className="text-sm font-medium text-duck-dark truncate">{item.name}</span>
             </div>
             {item.description && <p className="text-xs text-duck-dark/50 mt-1 line-clamp-2">{item.description}</p>}
-          </button>
+          </Link>
         ))}
         {items.length === 0 && (
           <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No {kind.toLowerCase()}s found</p>
@@ -453,25 +457,26 @@ export const CapabilityList = ({
   );
 };
 
-export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps) => {
+/**
+ * Backs /tasks, /skills and /processes. Which capability is open is `<basePath>/:dirName` — a route pair
+ * with no redirect guard, because the bare route (the list with nothing open) is a real state and an
+ * unknown dirName gets the empty detail pane rather than a rewritten address.
+ *
+ * The two per-item modes ride along as search params instead of local state: a row is a <Link> now, so it
+ * cannot imperatively reset the panes it changes, and deriving them means navigating to another item drops
+ * them for free — no reset effect racing the navigation. `edit` also makes the editor pane linkable.
+ */
+export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: CapabilityPageProps) => {
   const client = useClient();
   const qc = useQueryClient();
-  const [selected, setSelected] = useState<string | null>(null);
-  const [editing, setEditing] = useState(false);
-  const [isNew, setIsNew] = useState(false);
+  const navigate = useNavigate();
+  const selected = useParams<{ dirName: string }>().dirName ?? null;
+  const [params, setParams] = useSearchParams();
+  const editing = params.get('edit') === '1';
+  const isNew = params.get('new') === '1';
   const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const [showDetail, setShowDetail] = useState(false);
 
-  const { data: items = [] } = useQuery<CapabilitySummary[]>({
-    queryKey: [queryKey],
-    queryFn: () => client.get<CapabilitySummary[]>(endpoint),
-  });
-
-  useEffect(() => {
-    if (items.length > 0 && !selected) {
-      setSelected(items[0]!.dirName);
-    }
-  }, [items, selected]);
+  const setEditing = (on: boolean) => setParams(on ? { edit: '1' } : {}, { replace: true });
 
   const { data: detail } = useQuery<CapabilityDetail>({
     queryKey: [queryKey, selected],
@@ -479,28 +484,15 @@ export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps
     enabled: !!selected,
   });
 
-  const selectItem = (dirName: string) => {
-    setSelected(dirName);
-    setShowDetail(true);
-    setIsNew(false);
-    setEditing(false);
-  };
-
-  const handleCreate = (dirName: string) => {
-    setSelected(dirName);
-    setShowDetail(true);
-    setIsNew(true);
-    setEditing(true);
-  };
+  // A brand-new capability is empty, so it opens straight into the chat that fills it in.
+  const handleCreate = (dirName: string) => navigate(`${basePath}/${encodeURIComponent(dirName)}?edit=1&new=1`);
 
   const handleDelete = async () => {
     if (!selected) return;
     try {
       await client.delete(`${endpoint}/${selected}`);
       setDeleteConfirm(false);
-      setEditing(false);
-      setSelected(null);
-      setShowDetail(false);
+      navigate(basePath, { replace: true });
       await qc.invalidateQueries({ queryKey: [queryKey] });
     } catch {
       toast.error(`Failed to delete ${kind}`);
@@ -512,35 +504,32 @@ export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps
       <div className="flex h-full p-2 md:p-4 gap-2 md:gap-4">
         {/* Left panel — list */}
         <Card
-          className={`md:w-72 shrink-0 overflow-hidden flex flex-col ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
+          className={`md:w-72 shrink-0 overflow-hidden flex flex-col ${selected ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
         >
           <CapabilityList
             kind={kind}
             endpoint={endpoint}
             queryKey={queryKey}
+            basePath={basePath}
             selected={selected}
-            onSelect={selectItem}
             onCreate={handleCreate}
           />
         </Card>
 
-        {/* Right panel — detail + chat */}
-        <div className={`flex-1 flex flex-col gap-4 min-h-0 ${showDetail ? 'flex' : 'hidden md:flex'}`}>
+        {/* Right panel — detail + chat. On mobile the two panes swap on `selected`; going back is the bare route. */}
+        <div className={`flex-1 flex flex-col gap-4 min-h-0 ${selected ? 'flex' : 'hidden md:flex'}`}>
           <Card className={`flex-1 overflow-hidden flex flex-col min-h-0 ${editing ? 'hidden md:flex' : ''}`}>
             <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 bg-background/60 flex items-center gap-2">
-              <button
-                onClick={() => setShowDetail(false)}
-                className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
-              >
+              <Link to={basePath} className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer">
                 <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
-              </button>
+              </Link>
               <span className="text-sm font-medium text-duck-dark/70 flex-1">
                 {detail?.name ?? `Select a ${kind.toLowerCase()}`}
               </span>
               {detail && (
                 <>
                   <button
-                    onClick={() => setEditing((e) => !e)}
+                    onClick={() => setEditing(!editing)}
                     className={`p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
                   >
                     <Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50'}`} />

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

@@ -1,3 +1,5 @@
 import { CapabilityPage } from '../CapabilityPage';
 
-export const Processes = () => <CapabilityPage kind="Process" endpoint="/processes" queryKey="processes" />;
+export const Processes = () => (
+  <CapabilityPage kind="Process" endpoint="/processes" queryKey="processes" basePath="/processes" />
+);

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

@@ -1,3 +1,3 @@
 import { CapabilityPage } from '../CapabilityPage';
 
-export const Skills = () => <CapabilityPage kind="Skill" endpoint="/skills" queryKey="skills" />;
+export const Skills = () => <CapabilityPage kind="Skill" endpoint="/skills" queryKey="skills" basePath="/skills" />;

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

@@ -1,3 +1,3 @@
 import { CapabilityPage } from '../CapabilityPage';
 
-export const Tasks = () => <CapabilityPage kind="Task" endpoint="/tasks" queryKey="tasks" />;
+export const Tasks = () => <CapabilityPage kind="Task" endpoint="/tasks" queryKey="tasks" basePath="/tasks" />;