- {/* Stacked bar */}
-
- {segments.map((seg, i) =>
- seg.bytes > 0 ? (
-
seg.filter && onFilter(seg.filter)}
- />
- ) : null
- )}
-
-
- {/* Legend */}
-
- {segments.map((seg, i) =>
- seg.bytes > 0 ? (
-
- ) : null
- )}
-
-
- );
-}
-
// ── Filter Toggle - Segmented Control ─────────────────────────────────────────
interface FilterToggleProps {
@@ -700,6 +630,42 @@ export default function ResourcesView() {
setVolumeFilter(filter);
};
+ const treemapFilterToResourceFilter = (filter: 'managed' | 'unmanaged' | 'reclaimable'): ResourceFilter => {
+ if (filter === 'managed') return 'managed';
+ if (filter === 'unmanaged') return 'unmanaged';
+ return 'unmanaged';
+ };
+
+ const totalReclaimableBytes = (usage?.reclaimableImages ?? 0)
+ + (usage?.reclaimableContainers ?? 0)
+ + (usage?.reclaimableVolumes ?? 0);
+
+ const handleReviewAndPrune = () => {
+ setConfirmPrune({ target: 'images', scope: 'all' });
+ };
+
+ const volumeLandings = useMemo(() => {
+ const largest: TabLandingEntry[] = [...volumes]
+ .sort((a, b) => b.Size - a.Size)
+ .slice(0, 5)
+ .map(vol => ({
+ key: vol.Name,
+ primary: vol.Name,
+ secondary: vol.Size > 0 ? formatBytes(vol.Size) : '-',
+ }));
+ const now = Date.now();
+ const recent: TabLandingEntry[] = volumes
+ .filter(v => !!v.CreatedAt && now - new Date(v.CreatedAt).getTime() <= RECENT_WINDOW_MS)
+ .sort((a, b) => new Date(b.CreatedAt ?? 0).getTime() - new Date(a.CreatedAt ?? 0).getTime())
+ .slice(0, 5)
+ .map(vol => ({
+ key: vol.Name,
+ primary: vol.Name,
+ secondary: vol.CreatedAt ? ageLabel(new Date(vol.CreatedAt).getTime()) : '-',
+ }));
+ return { largest, recent };
+ }, [volumes]);
+
return (
@@ -708,7 +674,7 @@ export default function ResourcesView() {
Resources Hub
{activeNode?.type === 'remote' && (
-
- {activeNode.name}
+
· {activeNode.name}
)}
{trivy.available && isPaid && (
+ 
+## Reclaim hero
+
+When there is reclaimable disk space (unused images, stopped containers, or dangling volumes), an amber banner leads the view with the total amount you can free and a breakdown of what contributes to it. Click **Review & prune** to jump straight into a confirmation dialog scoped to every reclaimable resource at once.
+
+The hero stays hidden when there is nothing to reclaim, keeping the view focused on the rest of your inventory.
+
## Docker disk footprint
-The stacked bar at the top visualizes how your Docker disk usage is distributed:
+Below the hero, a three-tile treemap shows how your Docker disk usage is distributed:
| Segment | Meaning |
|---------|---------|
-| **Sencho Managed** (green) | Images used by stacks in your `COMPOSE_DIR` |
-| **External Projects** (orange) | Images used by Docker projects outside Sencho |
-| **Reclaimable** (gray) | Unused images and dangling layers safe to delete |
+| **Sencho Managed** (green) | Images and volumes used by stacks in your `COMPOSE_DIR` |
+| **External** (amber) | Images and volumes used by Docker projects outside Sencho |
+| **Reclaimable** (neutral) | Unused images, stopped containers, and dangling volumes safe to delete |
-Click any segment to automatically filter the tabs below to that category.
+Tile area is proportional to bytes. Click any tile to filter the tabs below to that category.
## Quick Clean panel
@@ -55,6 +61,8 @@ Click the trash icon on any row to delete an individual image. Sencho will warn
Lists all Docker volumes. Columns: name, driver, mount point, size, and managed status.
+When any volumes are present, a two-card landing strip above the table highlights the **Largest 5** volumes by size and **Recently changed** volumes from the last 24 hours. This makes it easy to spot growing volumes or newly created data at a glance.
+
**Filter buttons:** `All` / `Managed` / `External`