the card shows which directory it is

a commander's card gave its name and its cost and nothing to connect it to
`commanders/<n>/` on disk. the owner is the only person who will ever look
at that directory, and finding out which one a card was meant opening it
and reading a path out of a tool call.

#40 beside the title, monospaced and muted, with the full path on hover.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043

src/workspaces/officerdev/src/apps/CommandHQ/CommandHqGrid.tsx

@@ -72,6 +72,16 @@ const Card = ({ commander, to, selected, onDeleted }: CardProps) => {
       <div className="flex items-center gap-2 pr-6">
         <StatusDot watcherRunning={commander.watcherRunning === true} watcherArmed={commander.watcherArmed} />
         <span className="truncate text-sm font-medium">{commander.title}</span>
+        {/* Its directory name, which is its id. Nobody but the owner needs it, and the owner wants to know
+            which `commanders/<n>/` they are looking at without opening the thing to find out. */}
+        {commander.dirName && (
+          <span
+            className="shrink-0 font-mono text-[11px] text-muted-foreground"
+            title={`commanders/${commander.dirName}`}
+          >
+            #{commander.dirName}
+          </span>
+        )}
       </div>
       <div className="flex items-center justify-between text-xs text-muted-foreground">
         <span>

src/workspaces/officerdev/src/apps/CommandHQ/types.ts

@@ -33,6 +33,8 @@ export type CommandHqCategoryFilter = number | 'none' | undefined;
 export type CommandHqCommander = {
   id: string;
   title: string;
+  /** Its directory under `commanders/`, which is also its id — shown on the card beside the title. */
+  dirName?: string | null;
   cwd: string;
   createdAt: string;
   updatedAt: string;