@knpkv/herdr-connect 0.3.1 → 0.4.1

package/src/styles.css

@@ -1,6 +1,11 @@
 @import "@knpkv/rly/styles.css";
 
 @layer connect {
+  html.connect-terminal-document-lock,
+  body.connect-terminal-document-lock {
+    overflow: hidden !important;
+  }
+
   html,
   body.connect-body,
   #fleet-connect-root {
@@ -120,23 +125,35 @@
   }
 
   .connect-filter-row {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
     gap: var(--rly-space-8);
-    justify-content: space-between;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     margin-block-end: var(--rly-space-20);
   }
 
+  .connect-filter-set {
+    display: grid;
+    gap: var(--rly-space-4);
+    min-inline-size: 0;
+  }
+
+  .connect-filter-label {
+    color: var(--rly-color-text-3);
+    font-size: var(--rly-type-meta-size);
+    padding-inline: var(--rly-space-4);
+  }
+
   .connect-group-filter,
   .connect-status-filter {
     background: var(--rly-color-surface-2);
     border: 1px solid var(--rly-color-border-1);
     border-radius: var(--rly-radius-control);
     display: flex;
+    flex-wrap: wrap;
     gap: 2px;
-    overflow-x: auto;
+    max-inline-size: 100%;
+    min-inline-size: 0;
     padding: 2px;
-    scrollbar-width: none;
   }
 
   .connect-group-filter button,
@@ -149,8 +166,11 @@
     font: inherit;
     font-size: var(--rly-type-meta-size);
     flex: 0 0 auto;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
     padding: var(--rly-space-6) var(--rly-space-8);
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .connect-group-filter button[aria-pressed="true"],
@@ -160,6 +180,12 @@
     color: var(--rly-color-text-1);
   }
 
+  .connect-group-filter button:focus-visible,
+  .connect-status-filter button:focus-visible {
+    outline: 2px solid var(--rly-color-focus);
+    outline-offset: 1px;
+  }
+
   .connect-agent-tree {
     display: grid;
     gap: var(--rly-space-28);
@@ -317,7 +343,7 @@
     border: 0;
     border-radius: 0;
     display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr);
     min-block-size: 0;
     min-inline-size: 0;
     overflow: hidden;
@@ -340,10 +366,99 @@
     min-inline-size: 0;
   }
 
+  .connect-agent-identity {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  .connect-agent-work-link {
+    color: inherit;
+    min-inline-size: 0;
+    text-decoration: none;
+  }
+
+  .connect-agent-work-link:hover,
+  .connect-agent-work-link:focus-visible {
+    color: var(--rly-color-agent);
+    text-decoration: underline;
+    text-decoration-thickness: 0.12em;
+    text-underline-offset: 0.16em;
+  }
+
+  .connect-agent-identity[data-work-goal-state="missing"] small,
+  .connect-agent-identity[data-work-goal-state="ambiguous"] small,
+  .connect-agent-identity[data-work-goal-state="unavailable"] small {
+    color: var(--rly-color-text-3);
+  }
+
   .terminal-bar small {
     color: var(--rly-color-text-3);
   }
 
+  .terminal-key-rail {
+    border-block-end: 1px solid var(--rly-color-border-1);
+    display: grid;
+    gap: var(--rly-space-8);
+    min-inline-size: 0;
+    padding: var(--rly-space-8) var(--rly-space-12);
+  }
+
+  .terminal-key-scroll {
+    align-items: center;
+    display: flex;
+    gap: var(--rly-space-8);
+    min-inline-size: 0;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .terminal-key-group {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--rly-space-4);
+  }
+
+  .terminal-key {
+    align-items: center;
+    background: var(--rly-color-surface-2);
+    border: 1px solid var(--rly-color-border-2);
+    border-radius: var(--rly-radius-control);
+    color: var(--rly-color-text-1);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    justify-content: center;
+    min-block-size: 2.25rem;
+    min-inline-size: 2.25rem;
+    padding: var(--rly-space-6) var(--rly-space-10);
+    touch-action: manipulation;
+    white-space: nowrap;
+  }
+
+  .terminal-key:hover,
+  .terminal-key[aria-pressed="true"] {
+    background: var(--rly-color-surface-3);
+    border-color: var(--rly-color-agent);
+  }
+
+  .terminal-key:focus-visible {
+    border-color: var(--rly-color-focus);
+    outline: 2px solid var(--rly-color-focus);
+    outline-offset: 2px;
+  }
+
+  .terminal-key:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  .terminal-key-error {
+    color: var(--rly-color-critical-ink);
+    display: block;
+    min-block-size: 1lh;
+    overflow-wrap: anywhere;
+  }
+
   .terminal-bar strong,
   .terminal-bar small {
     overflow: hidden;
@@ -455,16 +570,13 @@
     }
 
     .connect-filter-row {
-      flex-wrap: nowrap;
-      justify-content: flex-start;
+      grid-template-columns: minmax(0, 1fr);
       margin-block-end: var(--rly-space-8);
-      overflow-x: auto;
-      scrollbar-width: none;
     }
 
     .connect-group-filter,
     .connect-status-filter {
-      flex: 0 0 auto;
+      inline-size: 100%;
     }
 
     .connect-group-filter button,
@@ -517,6 +629,21 @@
     .ghostty-terminal {
       padding: var(--rly-space-8);
     }
+
+    .terminal-key-rail {
+      gap: var(--rly-space-4);
+      padding: var(--rly-space-6) var(--rly-space-8);
+    }
+
+    .terminal-key-scroll {
+      gap: var(--rly-space-4);
+    }
+
+    .terminal-key {
+      min-block-size: 2rem;
+      min-inline-size: 2rem;
+      padding-inline: var(--rly-space-8);
+    }
   }
 
   @media (prefers-reduced-motion: reduce) {