hermes-krates-connector/design/krate.md

Krate Feature

Purpose: Named group of windows for a single Kubernetes object (or a collection) placed on the canvas.

Visual Container:

• Dashed border frame around all its windows: border: 1px dashed rgba(color, .3); border-radius: 18px; background: rgba(color, .04).
• Frame auto‑fits to the bounding box of its windows plus 30 px padding.
• Header bar above the frame shows object name, status badge, window count, a drag handle, and a close (×) button.

Layout of Windows:

• Tiled in a 2‑column grid.
• Column 0 offset dx:0, column 1 offset dx:412.
• Row height 416 px.
• When a window is resized, sibling windows resize proportionally within the same column/row.
• Windows never overlap – on drag release the krate checks other krate bounding boxes and nudges to avoid overlap (gentle snap).

Interactions:

• Drag header → move entire krate.
• Double‑click header → toggle collapse/expand.
• Minimize button (—) → collapse to overview card (230 px wide) showing name, view‑letter badges, status dot, window count, namespace.
• Double‑click collapsed card → re‑expand and fly camera to the krate.
• Non‑overlapping placement: on mouse release after a drag, the krate adjusts position to avoid overlapping other krates.
• Camera fly‑to after summon: animates to centre the krate at zoom: 0.92.

State (Krate interface in design docs):

interface Krate {
  id: string;
  objId: string | null;        // null for collection krates
  collScope?: { kind: 'namespace' | 'category', value: string };
  label: string;
  status: string;
  color: string;               // derived from namespace palette
  wx: number; wy: number;      // world position
  minimized: boolean;
  windows: Window[];
  seq: number;                 // for generating window IDs
}