Add design folder and README

design/collection_window.md

@@ -0,0 +1,45 @@
+# Collection Window Feature
+
+**Purpose**: Provide an overview list or tree of objects within a namespace or category (e.g., "All Pods", "ns/payments").
+
+**Size**: Default 540 × 480 px.
+
+**Header**:
+- Title (e.g., "pods · ns/payments") with status summary badges (✓ N / ⚠ N / ✗ N).
+- Filter input (auto‑focused on open) using `IBM Plex Mono` at 12 px.
+- Keyboard hint (`↑↓ ⌥L/S/D/Y`).
+- Buttons to toggle **List** vs **Tree** view.
+
+**List Mode**:
+- Row shows shape glyph, name, relation tag (muted), health metric, type badge, view shortcuts (⌥L/S/D/Y), status dot.
+- Selected row: `background: accentDim; border-left: 2px solid accent`.
+- Hover row: `background: rgba(255,255,255,.04)`.
+- Sorting: degraded/failed first, then pending, then ready; alphabetical within groups.
+
+**Tree Mode**:
+- Hierarchical view similar to k9s "xray".
+- Workloads expand to show their pods; pods expand to show ConfigMaps, Secrets, PVCs.
+- Services/Ingresses expand to show targets.
+- Relation tags: `pod`, `configMap`, `secret`, `volume`, `selects`, `routes`, `used by`.
+- Indentation `20 px × depth` with L‑shaped connector border.
+- Filtering retains matching nodes **and** all ancestors so hierarchy stays readable.
+
+**Interaction**:
+- Typing filters instantly (no mode switch).
+- `↑/↓` moves selection highlight.
+- `⌥L/S/D/Y` opens the respective view for the selected row (same shortcuts as Spotlight).
+- `Enter` opens the default view for the selected row.
+- `Escape` blurs the filter input.
+- Mouse‑over the collection window and start typing focuses the filter input.
+- Resizing follows the same rules as other Detail Windows (sibling windows resize proportionally).
+
+**State** (`CollectionState` interface in design docs):
+```typescript
+interface CollectionState {
+  [wid: string]: {
+    search: string;
+    view: 'list' | 'tree';
+    sel: number; // selected row index
+  }
+}
+```