@fonlan/dsh-quick-commands 0.1.0

package/src/client/quick-commands.css

@@ -0,0 +1,580 @@
+/* @fonlan/dsh-quick-commands client styles.
+   Uses theme CSS variables (--dsw-alias-*); falls back to neutral literals.
+   Constraint: this deployment's theme defines only these text tokens —
+   label-primary, label-secondary, label-tertiary, label-dimmed. READABLE
+   description copy uses label-secondary / label-tertiary (never label-dimmed,
+   which is intentionally near-invisible and reserved for disabled states). */
+
+/* ── header button (icon-only, left of Session log pill) ─────────────────── */
+.qc-head-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.qc-head-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 18px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  cursor: pointer;
+  padding: 0;
+}
+.qc-head-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}
+.qc-head-btn:disabled {
+  color: var(--dsw-alias-label-dimmed, #666);
+  cursor: not-allowed;
+}
+.qc-head-btn svg {
+  flex: none;
+}
+
+/* ── command menu popover (anchored under the button) ────────────────────── */
+.qc-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 12px;
+  min-width: 280px;
+  max-height: 420px;
+  overflow: auto;
+  background: var(--dsw-alias-bg-overlay, #1b1b1c);
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  z-index: 50;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+}
+.qc-menu-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 6px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));
+}
+.qc-menu-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+}
+.qc-menu-ws {
+  flex: 1;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  margin-right: 2px;
+}
+.qc-menu-remote {
+  flex: 0 0 auto;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 5px;
+  color: var(--dsw-alias-fg-on-accent, #fff);
+  background: var(--dsw-alias-accent, #4a8dff);
+  letter-spacing: 0.04em;
+}
+.qc-menu-close {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  cursor: pointer;
+  padding: 2px;
+  display: inline-flex;
+  align-items: center;
+}
+.qc-menu-empty {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  padding: 10px 8px;
+  margin: 0;
+}
+.qc-menu-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  border-radius: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+  width: 100%;
+}
+.qc-menu-item:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}
+.qc-menu-item:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+.qc-menu-item-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+}
+.qc-menu-item-cmd {
+  font-family: var(--dsw-font-family-mono, monospace);
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* ── live output popup ───────────────────────────────────────────────────── */
+.qc-popup {
+  position: relative; /* anchors the absolutely-positioned resize grip */
+  display: flex;
+  flex-direction: column;
+  background: var(--dsw-alias-bg-overlay, #1b1b1c);
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 12px;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
+  z-index: 60;
+  overflow: hidden;
+}
+.qc-popup-corner {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: 520px;
+  max-width: calc(100vw - 40px);
+  height: 340px;
+  max-height: calc(100vh - 120px);
+}
+.qc-popup-button {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 12px;
+  width: 440px;
+  max-width: calc(100vw - 40px);
+  height: 300px;
+  max-height: calc(100vh - 120px);
+}
+.qc-popup-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));
+}
+.qc-popup-title {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qc-popup-cmd {
+  font-family: var(--dsw-font-family-mono, monospace);
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 40%;
+}
+.qc-popup-remote {
+  flex: 0 0 auto;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 3px 6px;
+  border-radius: 6px;
+  color: var(--dsw-alias-fg-on-accent, #fff);
+  background: var(--dsw-alias-accent, #4a8dff);
+  letter-spacing: 0.04em;
+}
+.qc-popup-icon {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  cursor: pointer;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+}
+.qc-popup-icon:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}
+.qc-popup-icon:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.qc-popup-kill {
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-popup-confirm {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f5a623) 12%, transparent);
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));
+}
+.qc-popup-btn {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.qc-popup-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}
+.qc-popup-btn-plain {
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+}
+.qc-popup-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 6px 10px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));
+}
+.qc-popup-tab {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  font-size: 12px;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+.qc-popup-tab-active {
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  border-bottom-color: var(--dsw-alias-brand-primary, #4a9eff);
+}
+.qc-popup-output {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 10px;
+  font-family: var(--dsw-font-family-mono, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.qc-popup-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+}
+.qc-popup-empty {
+  margin: 0;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  font-size: 12px;
+}
+.qc-popup-error {
+  margin: 0 0 6px;
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+  font-size: 12px;
+}
+.qc-popup-foot {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25));
+  font-size: 11px;
+}
+.qc-popup-state {
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+}
+
+/* Resize handles. The popup pins its RIGHT edge (both anchors); width is
+   always dragged from the LEFT border. Height is dragged from the TOP border
+   (corner anchor, bottom pinned) or the BOTTOM border (button anchor, top
+   pinned below the button). The free corner (top-left / bottom-left) carries
+   the diagonal grip. Pointer capture lives in header.tsx; touch-action:none
+   lets touch drags resize instead of scrolling. */
+.qc-popup-resize {
+  position: absolute;
+  z-index: 3;
+  touch-action: none;
+  user-select: none;
+}
+.qc-popup-resize-left {
+  left: 0;
+  top: 10px;
+  bottom: 10px;
+  width: 7px;
+  cursor: ew-resize;
+}
+.qc-popup-resize-top {
+  top: 0;
+  left: 10px;
+  right: 10px;
+  height: 7px;
+  cursor: ns-resize;
+}
+.qc-popup-resize-bottom {
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+  height: 7px;
+  cursor: ns-resize;
+}
+.qc-popup-resize-left:hover,
+.qc-popup-resize-top:hover,
+.qc-popup-resize-bottom:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 14%, transparent);
+}
+.qc-popup-resize-corner {
+  width: 22px;
+  height: 22px;
+  z-index: 4;
+  display: flex;
+  padding: 3px;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  opacity: 0.6;
+  transition: opacity .15s ease;
+}
+.qc-popup-resize-corner-tl {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.qc-popup-resize-corner-bl {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+.qc-popup-resize-corner:hover,
+.qc-popup-resize-corner:active {
+  opacity: 1;
+}
+
+/* ── settings card (设置 → 插件配置) — mirrors official PluginCard disclosure ── */
+.qc-settings-card {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  background: var(--dsw-alias-bg-layer-2, #1f1f21);
+  border-radius: 12px;
+  list-style: none;
+  transition: border-color .16s, background .16s;
+}
+.qc-settings-card:hover {
+  border-color: var(--dsw-alias-label-secondary, #cfd3d6);
+}
+.qc-settings-card-open {
+  background: var(--dsw-alias-bg-layer-1, #27272a);
+  border-color: var(--dsw-alias-label-secondary, #cfd3d6);
+}
+.qc-settings-header {
+  appearance: none;
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
+}
+.qc-settings-header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary, #4a9eff);
+  outline-offset: -2px;
+}
+.qc-settings-head-text {
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+.qc-settings-name {
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.qc-settings-description {
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.qc-settings-chevron {
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  flex: none;
+  transition: transform .16s;
+}
+.qc-settings-chevron-open {
+  transform: rotate(180deg);
+}
+.qc-settings-body {
+  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  margin: 0 16px;
+  padding-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.qc-settings-intro {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  margin: 8px 0 0;
+  line-height: 1.5;
+}
+.qc-settings-anchor {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+}
+.qc-settings-anchor-label {
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-weight: 500;
+}
+.qc-settings-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  cursor: pointer;
+}
+.qc-settings-error {
+  font-size: 12px;
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-settings-empty {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  margin: 0;
+}
+.qc-settings-workspace {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.qc-settings-workspace-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.qc-settings-workspace-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+}
+.qc-settings-workspace-path {
+  font-size: 11px;
+  font-family: var(--dsw-font-family-mono, monospace);
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qc-settings-no-commands {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  margin: 0;
+}
+.qc-settings-command {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.qc-settings-field {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-1, #2a2a2d);
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 6px 8px;
+  outline: none;
+}
+.qc-settings-field::placeholder {
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+}
+.qc-settings-field:focus {
+  border-color: var(--dsw-alias-brand-primary, #4a9eff);
+}
+.qc-settings-field-name {
+  width: 160px;
+  flex: none;
+}
+.qc-settings-field-command {
+  flex: 1;
+  font-family: var(--dsw-font-family-mono, monospace);
+}
+.qc-settings-icon-btn {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  cursor: pointer;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+}
+.qc-settings-icon-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-settings-add-btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.qc-settings-add-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}
+
+/* ── mobile fallback (dsh-mobile-nav) ──────────────────────────────────────
+   The dsh-mobile-nav plugin (≤1023px) hides the ENTIRE header utilities seat
+   with `[data-mobile-nav="frame"] [data-phase] header > :first-child >
+   :last-child { display: none !important; }`, because the seat used to hold
+   only the session-log-export capsule (which it relocates to the drawer
+   footer). Our quick-run ▶ button rides that same seat, so it vanished on
+   phones.
+
+   Re-show ONLY our button: restore the seat's flex layout (out-ranking the
+   host rule via `:has(.qc-head-wrap)` specificity (0,5,1) > (0,4,1)) and keep
+   every other seat occupant hidden (the session-log capsule stays relocated
+   to the drawer footer). Desktop (no [data-mobile-nav]) is untouched. */
+[data-mobile-nav="frame"] [data-phase] header > :first-child > :last-child:has(.qc-head-wrap) {
+  display: flex !important;
+  margin-left: 4px !important;
+  gap: 0 !important;
+}
+[data-mobile-nav="frame"] [data-phase] header > :first-child > :last-child:has(.qc-head-wrap)
+  [data-slot="conversation.session.header.utilities"] > :not(.qc-head-wrap) {
+  display: none !important;
+}

package/src/client/run-state.ts

@@ -0,0 +1,125 @@
+/**
+ * HMR-safe shared run state for the quick-commands header button and output
+ * popup. Module-level fields live on one globalThis-backed record keyed with
+ * Symbol.for so every client-bundle copy (client-hmr hot swap re-evaluates the
+ * bundle without reloading the page) reads/writes the same state cell.
+ *
+ * The popup handles ONE run at a time (serial per workspace by design); a
+ * second workspace can run in parallel with its own popup, so the store keys
+ * popups by runId.
+ */
+import { useSyncExternalStore } from 'react'
+
+const STATE_KEY = Symbol.for('@fonlan/dsh-quick-commands/run-state')
+
+/** One popup slot: menu open flag + the live run the popup streams. */
+export interface RunPopoverState {
+  /** Whether the header command menu is open. */
+  menuOpen: boolean
+  /** Active run id (undefined when no run is open). */
+  runId: string | null
+  /** Workspace id owning the active run (for kill/cwd display). */
+  workspaceId: string | null
+  /** Command display name. */
+  commandName: string | null
+  /** SSH host id when the run executes on a remote workspace (else null). */
+  remoteHost: string | null
+  /** Whether the run popup should stream (false while minimized). */
+  streaming: boolean
+}
+
+interface RunPopoverStateInternal extends RunPopoverState {
+  listeners: Set<() => void>
+}
+
+interface QuickCommandsState {
+  popover: RunPopoverStateInternal
+  /** Cached published snapshot — STABLE reference; rebuilt only after a patch. */
+  snapshot: RunPopoverState | null
+}
+
+function getState(): QuickCommandsState {
+  const g = globalThis as unknown as Record<symbol, QuickCommandsState | undefined>
+  let state = g[STATE_KEY]
+  if (state === undefined) {
+    state = {
+      popover: {
+        menuOpen: false,
+        runId: null,
+        workspaceId: null,
+        commandName: null,
+        remoteHost: null,
+        streaming: true,
+        listeners: new Set(),
+      },
+      // Seed the cache with values our equality check will see as unchanged.
+      snapshot: {
+        menuOpen: false,
+        runId: null,
+        workspaceId: null,
+        commandName: null,
+        remoteHost: null,
+        streaming: true,
+      },
+    }
+    g[STATE_KEY] = state
+  }
+  return state
+}
+
+function notify(): void {
+  // Invalidate the cached snapshot FIRST: useSyncExternalStore reads
+  // getSnapshot after notification, so a new stable object must be ready.
+  getState().snapshot = null
+  for (const listener of getState().popover.listeners) listener()
+}
+
+function subscribe(cb: () => void): () => void {
+  const listeners = getState().popover.listeners
+  listeners.add(cb)
+  return () => { listeners.delete(cb) }
+}
+
+/**
+ * getSnapshot for useSyncExternalStore. MUST return a stable reference while
+ * the underlying fields are unchanged (React compares with Object.is) — return
+ * the CACHED object; only rebuild it when a patch invalidated it.
+ */
+function snapshot(): RunPopoverState {
+  const state = getState()
+  if (state.snapshot !== null) return state.snapshot
+  const p = state.popover
+  state.snapshot = {
+    menuOpen: p.menuOpen,
+    runId: p.runId,
+    workspaceId: p.workspaceId,
+    commandName: p.commandName,
+    remoteHost: p.remoteHost,
+    streaming: p.streaming,
+  }
+  return state.snapshot
+}
+
+function patch(partial: Partial<RunPopoverState>): void {
+  const state = getState()
+  Object.assign(state.popover, partial)
+  // Invalidate the cached snapshot so equality flips exactly on real changes.
+  state.snapshot = null
+  notify()
+}
+
+export function useRunPopover(): RunPopoverState {
+  return useSyncExternalStore(subscribe, snapshot, snapshot)
+}
+
+export function openMenu(): void { patch({ menuOpen: true }) }
+export function closeMenu(): void { patch({ menuOpen: false }) }
+export function toggleMenu(open: boolean): void { patch({ menuOpen: open }) }
+
+export function openRun(runId: string, workspaceId: string, commandName: string, remoteHost?: string): void {
+  patch({ runId, workspaceId, commandName, remoteHost: remoteHost ?? null, menuOpen: false, streaming: true })
+}
+
+export function closeRun(): void {
+  patch({ runId: null, workspaceId: null, commandName: null, remoteHost: null, streaming: false })
+}