diff --git a/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx b/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
index bf60bd70..01b92e60 100644
--- a/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
+++ b/src/workspaces/officerdev/src/apps/ChatHistory/DirPickerModal.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Folder, ChevronRight, Loader2, FolderPlus, Check } from 'lucide-react';
+import { Folder, ChevronRight, Loader2, FolderPlus, Check, Eye, EyeOff } from 'lucide-react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { useFilesAPI, type DirEntry } from '../../hooks/useFilesAPI';
 
@@ -17,6 +17,10 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
   const [path, setPath] = useState('/'); // root-relative, always starts with '/'
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
+  // Off by default. The server does not filter these — `readdir` returns everything — so a home
+  // directory opened straight onto `.cache`, `.local`, `.npm` and thirty more before anything you
+  // recognise. They are still reachable, just not in the way by default.
+  const [showHidden, setShowHidden] = useState(false);
 
   const { data, isLoading, refetch } = useQuery({
     queryKey: ['dir-picker', path],
@@ -25,9 +29,11 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
   });
 
   const rootDir = data?.rootDir ?? '';
-  const dirs = ((data?.entries ?? []) as DirEntry[])
+  const allDirs = ((data?.entries ?? []) as DirEntry[])
     .filter((e) => e.type === 'directory')
     .sort((a, b) => a.name.localeCompare(b.name));
+  const hiddenCount = allDirs.filter((d) => d.name.startsWith('.')).length;
+  const dirs = showHidden ? allDirs : allDirs.filter((d) => !d.name.startsWith('.'));
   const absCurrent = path === '/' ? rootDir : `${rootDir}${path}`;
 
   const segments = path.split('/').filter(Boolean);
@@ -72,7 +78,13 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
               <Loader2 className="h-5 w-5 animate-spin" />
             </div>
           ) : dirs.length === 0 ? (
-            <div className="flex h-full items-center justify-center text-sm opacity-40">No subfolders here</div>
+            // Say when the folder isn't actually empty, just filtered — "No subfolders here" over a
+            // directory holding thirty dot-folders is a lie the toggle below can't help you spot.
+            <div className="flex h-full items-center justify-center px-4 text-center text-sm opacity-40">
+              {hiddenCount > 0
+                ? `No visible subfolders — ${hiddenCount} hidden ${hiddenCount === 1 ? 'one is' : 'ones are'} filtered out`
+                : 'No subfolders here'}
+            </div>
           ) : (
             dirs.map((d) => (
               <button
@@ -80,8 +92,10 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
                 onClick={() => enter(d.name)}
                 className="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm hover:bg-accent cursor-pointer"
               >
-                <Folder className="h-4 w-4 shrink-0 text-duck-teal/70" />
-                <span className="truncate">{d.name}</span>
+                <Folder
+                  className={`h-4 w-4 shrink-0 text-duck-teal/70 ${d.name.startsWith('.') ? 'opacity-50' : ''}`}
+                />
+                <span className={`truncate ${d.name.startsWith('.') ? 'opacity-60' : ''}`}>{d.name}</span>
               </button>
             ))
           )}
@@ -110,12 +124,24 @@ export const DirPickerModal = ({ open, onClose, onSelect }: DirPickerModalProps)
               </button>
             </div>
           ) : (
-            <button
-              onClick={() => setCreating(true)}
-              className="flex items-center gap-1.5 self-start text-xs opacity-60 hover:opacity-100 cursor-pointer"
-            >
-              <FolderPlus className="h-3.5 w-3.5" /> New folder
-            </button>
+            <div className="flex items-center justify-between gap-2">
+              <button
+                onClick={() => setCreating(true)}
+                className="flex items-center gap-1.5 text-xs opacity-60 hover:opacity-100 cursor-pointer"
+              >
+                <FolderPlus className="h-3.5 w-3.5" /> New folder
+              </button>
+              {/* Shown even at zero, so the control's state is always legible: a folder with nothing
+                  hidden and one with everything hidden must not look identical. */}
+              <button
+                onClick={() => setShowHidden((prev) => !prev)}
+                title={showHidden ? 'Hide dot-directories' : 'Show dot-directories'}
+                className="flex items-center gap-1.5 text-xs opacity-60 hover:opacity-100 cursor-pointer"
+              >
+                {showHidden ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                {showHidden ? 'Hide hidden' : `Show hidden${hiddenCount > 0 ? ` (${hiddenCount})` : ''}`}
+              </button>
+            </div>
           )}
           <div className="flex items-center gap-2">
             <span className="min-w-0 flex-1 truncate text-xs opacity-60" title={absCurrent}>