@lincyaw/dsh 0.1.0 → 0.2.0-rc.0

package/src/client/frame.css

@@ -7,23 +7,23 @@ body,
 .pmw-frame {
   position: relative;
   display: grid;
-  grid-template-rows: minmax(0, 1fr) auto auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   grid-template-areas:
-    'activity panels'
-    'status status'
-    'bottom bottom';
-  grid-template-columns: 48px minmax(0, 1fr);
+    'appbar'
+    'panels'
+    'bottom';
+  grid-template-columns: minmax(0, 1fr);
   height: 100%;
   overflow: hidden;
-  background: var(--pm-color-bg);
+  background: var(--pm-color-chrome);
   color: var(--pm-color-ink);
 }
 
 .pmw-frame__skip {
   position: absolute;
   z-index: 30;
-  top: 4px;
-  left: 4px;
+  top: var(--pm-space-1);
+  left: var(--pm-space-1);
   padding: var(--pm-space-2) var(--pm-space-3);
   border-radius: var(--pm-radius-control);
   background: var(--pm-color-surface);
@@ -35,97 +35,180 @@ body,
   transform: none;
 }
 
-.pmw-activity {
-  grid-area: activity;
+/* The app bar across the top: the brand, where the author is, and the commands of the whole workbench. */
+
+.pmw-appbar {
+  grid-area: appbar;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: var(--pm-space-1);
-  padding: var(--pm-space-2) 0;
-  border-right: 1px solid var(--pm-color-line);
-  background: var(--pm-color-sunk);
+  gap: var(--pm-space-px);
+  min-width: 0;
+  height: var(--pm-appbar-height);
+  padding: 0 var(--pm-space-2) 0 var(--pm-space-3);
+  border-bottom: var(--pm-size-hairline) solid var(--pm-color-line);
+  background: var(--pm-color-chrome);
+  font-size: var(--pm-text-sm);
 }
 
-.pmw-activity__logo {
+.pmw-appbar__brand {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-2);
+  margin-right: var(--pm-space-3);
+  font-size: var(--pm-text-md);
+}
+
+.pmw-appbar__places {
   display: flex;
-  margin-bottom: var(--pm-space-2);
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.pmw-activity__end {
+.pmw-appbar__places > li {
   display: flex;
-  flex-direction: column;
-  gap: var(--pm-space-1);
-  margin-top: auto;
+  align-items: center;
+  min-width: 0;
+}
+
+.pmw-appbar__places > li + li::before {
+  flex: none;
+  margin: 0 var(--pm-space-px);
+  color: var(--pm-color-line-strong);
+  content: '/';
 }
 
-.pmw-activity__button {
+.pmw-appbar__place,
+.pmw-appbar__button {
+  box-sizing: border-box;
   position: relative;
-  display: grid;
-  place-items: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--pm-radius-control);
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--pm-space-1);
+  height: var(--pm-size-tool);
+  min-width: var(--pm-size-tool);
+  margin: 0;
+  padding: 0 var(--pm-space-2);
+  border: var(--pm-size-hairline) solid transparent;
+  border-radius: var(--pm-radius-tool);
   background: none;
   color: var(--pm-color-muted);
+  font: inherit;
+  white-space: nowrap;
   cursor: pointer;
 }
 
-.pmw-activity__count {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  min-width: 14px;
-  padding: 0 3px;
-  border-radius: var(--pm-radius-pill);
-  background: var(--pm-color-accent);
-  color: var(--pm-color-on-accent);
-  font-size: 10px;
-  line-height: 14px;
+.pmw-appbar__place {
+  flex: 0 1 auto;
+}
+
+.pmw-appbar__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.pmw-activity__button:hover {
-  background: color-mix(in srgb, var(--pm-color-ink) 6%, transparent);
+.pmw-appbar__place[aria-current] {
   color: var(--pm-color-ink);
+  font-weight: 600;
 }
 
-.pmw-activity__button[aria-pressed='true'] {
-  background: var(--pm-color-surface);
-  box-shadow: inset 2px 0 0 var(--pm-color-accent);
+span.pmw-appbar__place {
+  cursor: default;
+}
+
+.pmw-appbar__place:is(button):hover,
+.pmw-appbar__button:hover {
+  background: var(--pm-color-hover);
+  color: var(--pm-color-ink);
+}
+
+.pmw-appbar__button[aria-pressed='true'] {
+  border-color: var(--pm-color-accent-line);
+  background: var(--pm-color-selected);
   color: var(--pm-color-accent);
 }
 
-.pmw-activity__button:focus-visible {
-  outline: 2px solid var(--pm-color-accent);
-  outline-offset: 1px;
+.pmw-appbar__place:focus-visible,
+.pmw-appbar__button:focus-visible {
+  outline: var(--pm-size-stroke) solid var(--pm-color-accent);
+  outline-offset: var(--pm-size-hairline);
+}
+
+.pmw-appbar__divider {
+  flex: none;
+  width: var(--pm-size-hairline);
+  height: var(--pm-size-divider);
+  margin: 0 var(--pm-space-1);
+  background: var(--pm-color-line);
+}
+
+.pmw-appbar__approvals {
+  display: inline-flex;
+  flex: none;
+  margin-right: var(--pm-space-1);
+}
+
+.pmw-appbar__approvals:empty {
+  display: none;
+}
+
+.pmw-appbar__more {
+  display: inline-flex;
+  color: var(--pm-color-muted);
+}
+
+.pmw-appbar .pm-ui-icon {
+  width: var(--pm-size-icon);
+  height: var(--pm-size-icon);
+}
+
+.pmw-appbar__brand > .pmw-logo {
+  width: var(--pm-size-logo);
+  height: var(--pm-size-logo);
+}
+
+.pmw-appbar__more > .pm-ui-icon-button {
+  width: var(--pm-size-tool);
+  height: var(--pm-size-tool);
+  border-radius: var(--pm-radius-tool);
+}
+
+.pmw-appbar__busy {
+  position: absolute;
+  top: var(--pm-space-1);
+  right: var(--pm-space-1);
+  width: var(--pm-size-dot);
+  height: var(--pm-size-dot);
+  border-radius: 50%;
+  background: var(--pm-color-accent);
+  animation: pmw-pulse var(--pm-duration-pulse) ease-in-out infinite;
+}
+
+@keyframes pmw-pulse {
+  50% { opacity: 0.3; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pmw-appbar__busy { animation: none; }
 }
 
-.pmw-frame__side,
 .pmw-frame__sidebar {
   grid-area: side;
   min-width: 0;
   min-height: 0;
-  overflow: auto;
-  border-right: 1px solid var(--pm-color-line);
-  background: var(--pm-color-bg);
-}
-
-.pmw-frame__sidebar {
   overflow: hidden;
-  background: var(--dsw-specific-sidebar-fill, var(--pm-color-sunk));
+  background: var(--pm-color-chrome);
 }
 
-.pmw-frame__side:not([data-shown]),
-.pmw-frame__side[data-content='sessions'],
 .pmw-frame__sidebar:not([data-shown]) {
   display: none;
 }
 
-.pmw-frame__side-files[hidden] {
-  display: none;
-}
-
 .pmw-frame__centre {
   grid-area: centre;
   min-width: 0;
@@ -154,44 +237,29 @@ body,
   overflow: visible;
 }
 
-.pmw-frame__dock {
-  grid-area: dock;
+.pmw-frame__conversation {
+  grid-area: conversation;
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  border-left: 1px solid var(--pm-color-line);
-  background: var(--dsw-alias-bg-base, var(--pm-color-bg));
+  background: var(--pm-color-chrome);
 }
 
-.pmw-frame__dock > * {
+.pmw-frame__conversation > * {
   flex: 1;
   min-height: 0;
 }
 
-.pmw-frame__dock[hidden] { display: none; }
+.pmw-frame__conversation[hidden] { display: none; }
 .pmw-chat-actions { display: flex; align-items: center; gap: var(--pm-space-1); }
+.pmw-chat-actions__title { margin-right: var(--pm-space-2); color: var(--pm-color-muted); font-size: var(--pm-text-xs); font-weight: 600; letter-spacing: var(--pm-tracking-label); white-space: nowrap; }
 .pmw-history { display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--pm-color-ink); }
-.pmw-history__header { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-2); padding: var(--pm-space-2) var(--pm-space-3); border-bottom: 1px solid var(--pm-color-line); }
+.pmw-history__header { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-2); padding: var(--pm-space-2) var(--pm-space-3); border-bottom: var(--pm-size-hairline) solid var(--pm-color-line); }
 .pmw-history__header h2 { margin: 0; font-size: var(--pm-text-sm); font-weight: 600; }
 .pmw-history__browser { flex: 1; min-height: 0; overflow: hidden; }
 
-.pmw-frame__status {
-  grid-area: status;
-  display: flex;
-  align-items: center;
-  gap: var(--pm-space-4);
-  min-height: var(--pm-statusbar-height);
-  padding: 0 var(--pm-space-3);
-  overflow: hidden;
-  border-top: 1px solid var(--pm-color-line);
-  background: var(--pm-color-sunk);
-  color: var(--pm-color-muted);
-  font-family: var(--pm-font-mono);
-  font-size: var(--pm-text-xs);
-}
-
 .pmw-frame__bottom {
   grid-area: bottom;
   min-width: 0;
@@ -215,50 +283,46 @@ body,
 .pmw-frame__panels { grid-area: panels; min-width: 0; min-height: 0; }
 .pmw-frame__side-panel { display: grid; }
 .pmw-frame__side-panel > * { grid-area: 1 / 1; }
-.pmw-frame__side, .pmw-frame__sidebar, .pmw-frame__centre, .pmw-frame__dock, .pmw-frame__rightbar { height: 100%; }
-.pmw-frame__handle { width: 8px; z-index: 11; background: var(--pm-color-line); }
-.pmw-frame__handle:hover, .pmw-frame__handle:focus-visible { background: var(--pm-color-accent); }
-
-.pmw-frame[data-narrow] {
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto minmax(0, 1fr) auto auto;
-  grid-template-areas:
-    'activity'
-    'panels'
-    'status'
-    'bottom';
+.pmw-frame__sidebar, .pmw-frame__centre, .pmw-frame__conversation, .pmw-frame__rightbar { height: 100%; }
+/* A hairline between columns, with a wider area to grab. */
+.pmw-frame__handle { position: relative; width: var(--pm-size-hairline); z-index: 11; background: var(--pm-color-line); }
+.pmw-frame__handle::after { position: absolute; inset: 0 calc(-1 * var(--pm-space-1)); content: ''; }
+.pmw-frame__handle:hover, .pmw-frame__handle:focus-visible, .pmw-frame__handle[data-separator='active'] { background: var(--pm-color-accent); box-shadow: 0 0 0 var(--pm-size-hairline) var(--pm-color-accent); }
+
+.pmw-frame[data-narrow] .pmw-appbar__brand > .pmw-brand-name,
+.pmw-frame[data-narrow] .pmw-appbar__label,
+.pmw-frame[data-narrow] .pmw-appbar__places > li + li::before {
+  display: none;
 }
 
-.pmw-frame[data-narrow] .pmw-activity {
-  flex-direction: row;
-  justify-content: space-between;
-  padding: var(--pm-space-1) var(--pm-space-2);
-  overflow-x: auto;
-  border-right: 0;
-  border-bottom: 1px solid var(--pm-color-line);
+.pmw-frame[data-narrow] .pmw-appbar__brand {
+  margin-right: var(--pm-space-1);
 }
 
-.pmw-frame[data-narrow] .pmw-activity__logo {
-  margin: 0 var(--pm-space-1) 0 0;
+.pmw-frame[data-narrow] .pmw-appbar__place[aria-current] {
+  background: var(--pm-color-selected);
+  color: var(--pm-color-accent);
 }
 
-.pmw-frame[data-narrow] .pmw-activity__end {
-  flex-direction: row;
-  margin: 0;
+.pmw-frame[data-narrow] .pmw-appbar__place,
+.pmw-frame[data-narrow] .pmw-appbar__button {
+  min-width: var(--pm-size-touch);
+  height: var(--pm-size-touch);
+  justify-content: center;
 }
 
-.pmw-frame[data-narrow] .pmw-activity__button[aria-pressed='true'] {
-  box-shadow: inset 0 -2px 0 var(--pm-color-accent);
+.pmw-frame[data-narrow] .pmw-appbar {
+  height: var(--pm-appbar-height-touch);
 }
 
 .pmw-frame[data-narrow] .pmw-frame__sidebar,
-.pmw-frame[data-narrow] .pmw-frame__dock,
+.pmw-frame[data-narrow] .pmw-frame__conversation,
 .pmw-frame[data-narrow] .pmw-frame__rightbar {
   grid-area: centre;
   border: 0;
 }
 
-.pmw-frame[data-narrow] .pmw-frame__dock:not([data-shown]) {
+.pmw-frame[data-narrow] .pmw-frame__conversation:not([data-shown]) {
   display: none;
 }
 
@@ -270,10 +334,6 @@ body,
   pointer-events: auto;
 }
 
-.pmw-frame[data-narrow] .pmw-frame__status {
-  gap: var(--pm-space-2);
-}
-
 .pmw-logo {
   flex: none;
   display: block;
@@ -322,24 +382,124 @@ body,
 }
 
 .pmw-fallback__doc {
-  display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
   height: 100%;
 }
 
+.pmw-fallback__doc[hidden] { display: none; }
+
 .pmw-fallback__tab {
   height: 100%;
   overflow: hidden;
 }
 
 .pmw-frame[data-narrow] .pmw-frame__panels { display: block !important; }
-.pmw-frame[data-narrow] .pmw-frame__panels > [data-panel] { width: 100%; height: 100%; }
+/* react-resizable-panels writes `height: auto` on each panel; on a narrow screen each one fills the page. */
+.pmw-frame[data-narrow] .pmw-frame__panels > [data-panel] { width: 100%; height: 100% !important; }
 .pmw-frame__panels > [hidden] { display: none !important; }
 .pmw-frame[data-narrow] .pmw-frame__sidebar[data-shown] { height: 100%; }
 
-.pmw-frame__rightbar-overlay { position: absolute; top: 0; bottom: var(--pm-statusbar-height); height: auto; z-index: 13; pointer-events: none; }
+.pmw-frame__rightbar-overlay { position: absolute; top: 0; bottom: 0; height: auto; z-index: 13; pointer-events: none; }
 .pmw-frame__rightbar-track { height: 100%; width: 100%; }
 .pmw-frame__rightbar-overlay [data-sidebar-right-session]:has([data-pmw-source-route]) { opacity: 0; }
 .pmw-frame__rightbar-overlay [data-sidebar-right-session]:not([data-sidebar-right-open]) [data-dockkit-host='dock'] { transition: none; }
 .pmw-frame__document { height: 100%; min-width: 0; min-height: 0; }
 .pmw-frame__document[hidden] { display: none; }
+
+/*
+ * Presmium opens one workspace: the conversation does not offer to choose another or another agent preset, and the
+ * chat history lists the sessions without the workspace row above them. Matched by slot names and row keys, not by
+ * Harness's generated class names.
+ */
+[data-slot='conversation.hero.agentPreset'],
+:has(> [data-slot='conversation.hero.agentPreset']) > button,
+[data-slot='sidebar.workspaces'] [data-row-key^='workspace:'],
+[data-slot='sidebar.workspaces'] :has(> [data-slot^='sidebar.workspaces.directory']) {
+  display: none !important;
+}
+
+/* Runtime diagnostics use shared controls; the shell owns their placement only. */
+.pmw-runtime-feedback { flex: none; padding: var(--pm-space-2) var(--pm-space-3); }
+.pmw-runtime-feedback details { max-block-size: 40dvh; overflow: auto; overflow-wrap: anywhere; }
+.pmw-runtime-feedback__actions { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); margin-block-start: var(--pm-space-2); }
+.pmw-runtime-feedback p { margin: 0; }
+.pmw-runtime-feedback ul { margin-block: var(--pm-space-2); padding-inline-start: var(--pm-space-4); }
+.pmw-runtime-fallback { display: grid; align-content: center; min-height: 100dvh; padding: var(--pm-space-4); }
+
+/* The AI assistant without a usable model: the notice in the composer's place, and a failed turn in the author's terms. */
+.pmw-assistant-setup {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--pm-space-2) var(--pm-space-3);
+  margin: 0 var(--pm-space-4) var(--pm-space-4);
+  padding: var(--pm-space-4);
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-card);
+  background: var(--pm-color-surface);
+  color: var(--pm-color-ink);
+  box-shadow: var(--pm-shadow);
+}
+
+.pmw-assistant-setup__icon {
+  display: inline-flex;
+  color: var(--pm-color-accent);
+}
+
+.pmw-assistant-setup__copy,
+.pmw-turn-failure__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  min-width: 0;
+}
+
+.pmw-assistant-setup__copy p,
+.pmw-turn-failure__copy p {
+  margin: 0;
+  line-height: var(--pm-leading-ui);
+}
+
+.pmw-assistant-setup__title,
+.pmw-turn-failure__title {
+  font-weight: var(--pm-weight-semibold);
+}
+
+.pmw-assistant-setup__actions {
+  display: flex;
+  grid-column: 1 / -1;
+  justify-content: flex-end;
+}
+
+.pmw-turn-failure {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--pm-space-2);
+  padding: var(--pm-space-3);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-warn-soft);
+  color: var(--pm-color-ink);
+  font-size: var(--pm-text-sm);
+}
+
+.pmw-turn-failure__mark {
+  display: inline-flex;
+  color: var(--pm-color-warn);
+}
+
+.pmw-turn-failure__actions {
+  display: flex;
+  margin-top: var(--pm-space-1);
+}
+
+.pmw-turn-failure__details {
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-turn-failure__details summary {
+  cursor: pointer;
+}
+
+.pmw-turn-failure__details p {
+  margin-top: var(--pm-space-1);
+  overflow-wrap: anywhere;
+}