@abot-ai/runtime 1.5.0 → 1.7.0

package/dist/src/web-ui/app/styles/46-system-host.css

@@ -8,38 +8,14 @@
   background: var(--panel);
 }
 
-.system-host-summary {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-height: 60px;
-  padding: 12px 16px;
-  list-style: none;
-  cursor: pointer;
-  font-size: var(--font-size-sm);
-}
-
-.system-host-summary::-webkit-details-marker { display: none; }
-.system-host-summary-title { flex-shrink: 0; color: var(--text); }
-.system-host-summary .system-host-status { margin: 0; padding: 0; border: 0; }
-.system-host-summary-name {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.system-host-summary-action { margin-left: auto; color: var(--accent); white-space: nowrap; }
-.system-host-summary-action > span { display: inline-block; transition: transform 150ms ease; }
-.system-host-compact[open] .system-host-summary-action > span { transform: rotate(180deg); }
-.system-host-summary:hover { background: var(--control-bg); }
-.system-host-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
-.system-host-management-body {
-  max-height: min(520px, 60dvh);
-  padding: 0 16px;
-  overflow-y: auto;
-  border-top: 1px solid var(--line);
-}
+.system-host-permission-details { grid-column: 1 / -1; min-width: 0; }
+.system-host-permission-details > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; color: var(--muted); cursor: pointer; font-size: var(--font-size-xs); }
+.system-host-permission-details > summary:hover { color: var(--text); }
+.system-host-permission-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+.system-host-permission-details > summary::after { content: "⌄"; margin-left: auto; }
+.system-host-permission-details[open] > summary::after { transform: rotate(180deg); }
+.system-host-summary-permissions { color: var(--muted); font-size: var(--font-size-xs); }
+.system-host-permission-details .system-host-permissions { margin-top: 6px; max-height: min(420px, 45dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
 
 .home-computer-access:focus-visible {
   outline: 2px solid var(--accent);
@@ -53,32 +29,23 @@
   line-height: 1.6;
 }
 
-.system-host-heading,
-.system-host-actions {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.system-host-heading h2 {
-  margin: 0 0 6px;
-  font-size: var(--font-size-2xl);
-  font-weight: 400;
-}
-
-.system-host-heading p,
-.system-host-note {
-  color: var(--config-muted, var(--muted));
-}
-
-.system-host-heading p {
-  margin: 0;
-}
-
-.system-host-heading button {
-  flex-shrink: 0;
-}
+.system-host-permissions { margin-block: 20px; border-block: 1px solid var(--line); padding-block: 16px; }
+.system-host-permission-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.system-host-permission-heading h3 { margin: 0; font-size: var(--font-size-base); font-weight: 500; }
+.system-host-permission-heading h4 { margin: 0; font-size: var(--font-size-sm); font-weight: 500; }
+.system-host-permission-route { margin-block: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
+.system-host-permission-row > strong { flex: 1 1 160px; font-weight: 400; }
+.system-host-permission-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 12px; border-top: 1px solid var(--line); }
+.system-host-permission-row > div { flex: 1 1 240px; }
+.system-host-permission-row p { margin: 2px 0 0; color: var(--muted); }
+.system-host-permission-row button { flex-shrink: 0; }
+.system-host-permission-state { color: var(--muted); }
+.system-host-permission-state[data-granted="true"] { color: var(--success, #79d7a7); }
+.system-host-permission-path { display: block; padding: 10px; border-radius: 6px; background: var(--control-bg); overflow-wrap: anywhere; user-select: text; }
+.system-host-native-permissions { margin-top: 16px; }
+.system-host-native-permissions pre { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
+
+.system-host-note { color: var(--config-muted, var(--muted)); }
 
 .system-host-panel button {
   min-height: 32px;
@@ -113,50 +80,23 @@
   color: var(--danger);
 }
 
-.system-host-panel button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.system-host-status {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding-block: 12px;
-  border-block: 1px solid var(--line);
-}
-
-.system-host-status-dot {
-  flex: 0 0 8px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--danger, #e27575);
-}
-
-.system-host-status[data-tone="ready"] .system-host-status-dot {
-  background: var(--success, #79d7a7);
-}
-
-.system-host-identity {
-  display: grid;
-  gap: 6px;
-  margin-block: 20px;
-}
-
-.system-host-identity > div {
-  display: grid;
-  grid-template-columns: 140px minmax(0, 1fr);
-  gap: 16px;
+.system-host-panel button[data-system-host-revoke]:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--danger);
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
-.system-host-identity dt {
-  color: var(--config-muted, var(--muted));
+.system-host-panel button[data-system-host-revoke]:focus-visible {
+  background: transparent;
+  outline-color: var(--danger);
+  outline-offset: 3px;
 }
 
-.system-host-identity dd {
-  margin: 0;
-  overflow-wrap: anywhere;
+.system-host-panel button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
 }
 
 .system-host-download {
@@ -167,6 +107,34 @@
   overflow-wrap: anywhere;
 }
 
+.system-host-card { padding: 14px 18px; line-height: 1.5; }
+.system-host-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
+.system-host-card-heading h2 { margin: 0; font-size: var(--font-size-base); font-weight: 600; line-height: 1.4; }
+.system-host-card-status { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--amber); font-size: var(--font-size-xs); }
+.system-host-card-status[data-tone="ready"] { color: var(--accent); }
+.system-host-card-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.system-host-card-description { margin: 0; max-width: 640px; color: var(--muted); }
+.system-host-card-action { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
+.system-host-panel .system-host-card-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: var(--bg); font-size: var(--font-size-sm); font-weight: 500; text-decoration: none; }
+.system-host-store-icon { flex-shrink: 0; margin-inline-end: 8px; }
+.system-host-panel .system-host-card-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); filter: brightness(1.08); }
+.system-host-panel .system-host-card-secondary { min-height: 32px; padding: 5px 2px; border: 0; background: transparent; color: var(--muted); font-size: var(--font-size-sm); text-decoration: none; }
+.system-host-panel .system-host-card-secondary:hover:not(:disabled) { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
+.system-host-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.system-host-card-hint { margin: 8px 0 0; color: var(--muted); font-size: var(--font-size-xs); }
+.system-host-card-message { margin: 8px 0 0; color: var(--accent); font-size: var(--font-size-xs); }
+.system-host-card-computer { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: var(--font-size-xs); }
+.system-host-card-computer > span { overflow-wrap: anywhere; min-width: 0; }
+.system-host-card-computer [data-system-host-revoke] { min-height: 32px; padding: 0; border: 0; font-size: inherit; }
+.system-host-card-access-note { margin: 8px 0 0; color: var(--muted); font-size: var(--font-size-xs); }
+.system-host-card-ready { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 44px; padding: 6px 16px; }
+.system-host-card-ready-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; }
+.system-host-card-ready .system-host-card-computer { display: contents; }
+.system-host-card-ready .system-host-card-computer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.system-host-card-ready [data-system-host-revoke] { white-space: nowrap; }
+.system-host-card-other { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
+.system-host-card-other .system-host-actions { margin-top: 8px; }
+
 .system-host-restart {
   border: 1px solid var(--line);
   border-radius: 6px;
@@ -176,6 +144,8 @@
 }
 
 .system-host-actions {
+  display: flex;
+  gap: 12px;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin-top: 20px;
@@ -224,14 +194,15 @@
   display: none;
 }
 
+@media (max-width: 620px) {
+  .system-host-card.system-host-card-ready { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 14px; }
+  .system-host-card-ready-title { grid-column: 1; grid-row: 1; white-space: normal; }
+  .system-host-card-ready .system-host-card-computer > span { grid-column: 1; grid-row: 2; }
+  .system-host-card-ready [data-system-host-revoke] { grid-column: 2; grid-row: 1 / span 2; }
+}
+
 @media (max-width: 520px) {
-  .system-host-summary { flex-wrap: wrap; gap: 6px 12px; }
-  .system-host-summary-name { display: none; }
-  .system-host-heading {
-    flex-direction: column;
-  }
-  .system-host-identity > div {
-    grid-template-columns: 110px minmax(0, 1fr);
-    gap: 10px;
-  }
+  .system-host-card { padding: 12px 14px; }
+  .system-host-card-heading { align-items: flex-start; }
+  .system-host-card-action { gap: 12px; }
 }

package/dist/src/web-ui/app/styles/47-config-controls.css

@@ -135,6 +135,7 @@
   border-top: 1px solid var(--config-line);
 }
 
+.model-plugin-permissions > summary,
 .config-calibration-section-title {
   display: flex;
   align-items: center;
@@ -147,27 +148,38 @@
   cursor: pointer;
 }
 
+.model-plugin-permissions > summary:focus-visible,
+.config-calibration-section-title:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.model-plugin-permissions > summary::-webkit-details-marker,
 .config-calibration-section-title::-webkit-details-marker {
   display: none;
 }
 
+.model-plugin-permissions > summary::before,
 .config-calibration-section-title::before {
   content: "";
   width: 6px;
   height: 6px;
   flex: none;
-  border-right: 1px solid var(--config-muted);
+  border-inline-end: 1px solid var(--config-muted);
   border-bottom: 1px solid var(--config-muted);
   transform: rotate(-45deg);
 }
 
+.model-plugin-permissions[open] > summary::before,
 .config-calibration-section[open] > .config-calibration-section-title::before {
   transform: rotate(45deg);
 }
 
+.model-plugin-summary-count,
 .config-calibration-section-title small {
   margin-inline-start: auto;
   color: var(--config-muted);
+  font-size: var(--font-size-xs);
   font-weight: 400;
 }
 

package/dist/src/web-ui/app/styles/48-notifications.css

@@ -1,11 +1,14 @@
 .notifications-content {
+  --config-line: var(--line);
+  --config-copy: var(--text);
+  --config-muted: var(--muted);
   min-width: 0;
-  padding: 20px;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: var(--panel);
   color: var(--text);
 }
+.notifications-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .notifications-toolbar,
 .notification-toolbar-actions,
 .notification-filters,
@@ -13,7 +16,7 @@
 .notification-item-actions { display: flex; align-items: center; gap: 12px; }
 .notifications-toolbar { justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
 .notification-filters { gap: 4px; }
-.notifications-content button,
+.notifications-content button:not(.config-category-tab),
 .notification-item-actions a {
   min-height: 32px;
   padding: 5px 8px;
@@ -26,13 +29,18 @@
   text-decoration: none;
   box-shadow: none;
 }
-.notifications-content button:hover:not(:disabled),
+.notifications-content button:not(.config-category-tab):hover:not(:disabled),
 .notification-item-actions a:hover { background: var(--control-bg); color: var(--text); }
 .notifications-workspace-panel :is(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .notification-filters button[aria-pressed="true"] { background: var(--control-bg); color: var(--text); }
 .notification-feedback { color: var(--muted); font-size: var(--font-size-sm); line-height: 1.6; }
 .notification-feedback:empty { display: none; }
 .notification-feedback.is-error { color: var(--danger); }
+.notification-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 36px 20px; text-align: center; }
+.notification-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); }
+.notification-empty-icon svg { width: 26px; height: 26px; }
+.notification-empty-state h3 { margin: 0; color: var(--text-strong); font-size: var(--font-size-xl); font-weight: 500; line-height: 1.4; }
+.notification-empty-state p { max-width: 38ch; margin: 8px 0 0; color: var(--muted); font-size: var(--font-size-sm); line-height: 1.6; }
 .notification-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
 .notification-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 6px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
 .notification-item.is-unread { border-inline-start: 3px solid var(--accent); padding-inline-start: 12px; background: color-mix(in srgb, var(--accent) 3%, var(--panel)); }
@@ -64,9 +72,7 @@
 .notification-item-actions a { border-color: var(--line); color: var(--text); }
 .notification-load-more { display: block; margin: 22px auto; }
 .notification-load-more[hidden] { display: none; }
-.notification-settings { margin-top: 8px; }
-.notification-settings summary { padding: 10px 8px; cursor: pointer; color: var(--muted); font-size: var(--font-size-sm); }
-.notification-settings-body { padding: 0 8px 8px; }
+.notification-settings-body { padding: 0; }
 .notification-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 5px 0; font-size: var(--font-size-sm); cursor: pointer; }
 .notification-setting strong { font-weight: 500; }
 .notification-setting small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.4; }
@@ -79,10 +85,10 @@
 .notification-rail-count { position: absolute; top: 3px; left: 24px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--accent-strong); color: var(--bg); font-size: 10px; line-height: 16px; text-align: center; }
 .notification-rail-count[hidden] { display: none; }
 @media (max-width: 980px) {
-  .notifications-content { padding: 22px; }
+  .notifications-content .config-category-panel { padding: 22px; }
 }
 @media (max-width: 760px) {
-  .notifications-content { padding: 20px; }
+  .notifications-content .config-category-panel { padding: 20px; }
   .notification-item { grid-template-columns: 28px minmax(0, 1fr); gap: 6px 9px; padding: 10px; }
   .notification-item.is-unread { padding-inline-start: 8px; }
   .notification-kind-icon { width: 28px; height: 28px; }