@webship.co/workspace 0.0.0-stage → 1.0.0-beta1

package/public/css/components/short-results-as-a-toast-at-the-top.css

@@ -0,0 +1,203 @@
+/* ---------- Short results, as a toast at the top ---------- */
+
+.flash-toasts {
+  position: fixed;
+  top: 4.25rem;                     /* clear of the toolbar */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1015;                    /* over the rails and the job stack */
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  /* 40rem wrapped a single sentence onto eight lines on a wide screen, which made a
+     transient result look like a message block demanding attention. A toast is read at a
+     glance or not at all, so it gets the width to be one or two lines — still bounded, so
+     it never spans a 2500px display end to end. */
+  width: min(64rem, calc(100vw - 3rem));
+  pointer-events: none;
+}
+
+.flash-toasts > * { pointer-events: auto; }
+
+/* An alert, not a terminal: an icon says what happened before the sentence is read, the tint
+   carries it at a glance, and a countdown bar shows it is going to leave on its own. Deliberately
+   unlike the job toasts at the bottom, which are output to watch rather than a result to read. */
+.flash-toast {
+  margin: 0 !important;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem 2.25rem 0.75rem 0.875rem !important;
+  /* A pale tint on a pale page needs a stated edge, not a hint of one: the 1px pale-green hairline
+     disappeared against the toolbar and the card behind it, so the toast read as floating text.
+     A 2px border in the status colour plus a ring and a deeper shadow give it a definite edge in
+     both themes. */
+  border: 2px solid var(--ok);
+  border-left-width: 4px;
+  border-radius: 0.5rem;
+  background: var(--ok-soft) !important;
+  color: var(--ok-ink) !important;
+  box-shadow: 0 0 0 1px var(--toast-ring), var(--shadow-toast);
+  overflow: hidden;
+  animation: flash-in .18s ease-out;
+}
+
+/* The mark, sized so a one-line and a three-line message both look deliberate. */
+.flash-toast::before {
+  content: '✓';
+  flex: 0 0 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.0625rem;
+  border-radius: 50%;
+  background: var(--ok);
+  color: var(--text-inverse);
+  font-size: 0.78rem;
+  line-height: 1.25rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.flash-toast.error {
+  border-color: var(--danger);
+  background: var(--danger-soft) !important;
+  color: var(--danger-ink) !important;
+}
+
+.flash-toast.error::before { content: '!'; background: var(--danger); }
+
+/* How long it has left. Pauses with the timer when the pointer is over it. */
+.flash-toast::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  width: 100%;
+  background: var(--ok);
+  opacity: .55;
+  transform-origin: left;
+  animation: flash-countdown var(--flash-ms, 6000ms) linear forwards;
+}
+
+.flash-toast.error::after { background: var(--danger); }
+.flash-toast.is-held::after { animation-play-state: paused; }
+
+@keyframes flash-countdown {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+.flash-toast-close {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.5rem;
+  background: none;
+  border: 0;
+  padding: 0.125rem;
+  cursor: pointer;
+  color: inherit;
+  opacity: .6;
+  line-height: 1;
+}
+
+.flash-toast-close:hover { opacity: 1; }
+
+@keyframes flash-in {
+  from { opacity: 0; transform: translateY(-0.375rem); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (max-width: 47.9375em) {
+  .flash-toasts { top: 3.5rem; width: calc(100vw - 1rem); }
+}
+
+/* The machine name beside the readable one: still needed — it is what you invoke, and what
+   --fetch and --install take — but secondary to the name a person reads. */
+.item-machine {
+  font-family: var(--font-code);
+  font-size: 0.72rem;
+  font-weight: 400;
+  /* No opacity: .uk-text-meta is already the quiet colour, and fading it again took this 11px code
+     name to 4.08:1 — under AA, on the one string you have to read character by character to type it.
+     Secondary is said by the size and the monospace, which is what the eye reads here anyway. */
+}
+
+/* The controls read as three jobs, not eight widgets: find it, order it, narrow it. One bar, with
+   a hairline between the groups — before this the search field, two buttons, a checkbox, a sort
+   and a state filter sat in one undifferentiated row. */
+.list-controls {
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  background: var(--surface);
+  gap: 0;
+}
+
+.list-controls { flex-wrap: wrap; row-gap: 0.5rem; }
+
+.lc-group {
+  display: flex;
+  align-items: center;
+  /* A group never breaks internally: Reset and Auto belong beside the field they act on. The BAR
+     wraps between groups instead, which is why the search field can shrink but the buttons cannot
+     be orphaned onto their own line. */
+  flex-wrap: nowrap;
+  gap: 0.375rem;
+  padding: 0 0.625rem;
+  border-left: 1px solid var(--line);
+}
+
+.lc-group:first-child { padding-left: 0; border-left: 0; }
+
+/* The find row owns a line of its own — field, Search, Reset, in that order, with the field
+   absorbing the slack. Sort, the filters and the auto-search preference sit on the line below,
+   where they do not compete with it for width. */
+.lc-find { flex: 1 1 100%; min-width: 0; }
+
+.lc-rest {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  row-gap: 0.5rem;
+  flex: 1 1 100%;
+}
+
+.lc-rest .lc-group:first-child { padding-left: 0; border-left: 0; }
+
+/* Whether the dividers make sense depends on the width of the LIST, not of the window: the
+   assistant rail takes 400px, so a 1250px window leaves this bar about 630px and the groups
+   already stack. A container query asks the right question. */
+#webship-workspace-projects,
+#webship-workspace-backups { container-type: inline-size; }
+
+@container (max-width: 44rem) {
+  .lc-group { border-left: 0; padding: 0; }
+  /* Without the dividers the groups need their own gap to stay apart. */
+  .lc-rest { gap: 0.75rem; }
+}
+
+/* No container support: fall back to the window, erring towards stacked. */
+@supports not (container-type: inline-size) {
+  @media (max-width: 74.9375em) {
+    .lc-group { border-left: 0; padding: 0; }
+  }
+}
+
+/* The head's buttons stay clickable over the top grips that run beneath them. */
+.job-toast-btn { position: relative; z-index: 4; }
+
+/* The row reads name → what it is called and its state → what it does. The machine name, the
+   timestamp and the labels used to trail the readable name on one line, where the name a person
+   looks for was the shortest thing on a long line of small print. */
+.item-meta-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.125rem;
+}
+
+.item-meta-line .uk-label { line-height: 1.4; }

package/public/css/components/sound-player.css

@@ -0,0 +1,84 @@
+/* The sound player in the editor modal: the browser's own audio controls, then speed and loop. */
+.sound-player {
+  display: block;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+.sound-loop {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Generate a voice: one row per engine, its options below. */
+.voice-engines { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
+.voice-engine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
+.voice-engine.is-off { opacity: 0.65; }
+
+/* A voiceover script under its video: the words, a section at a time. */
+.transcript-details { margin-top: 0.75rem; }
+.transcript-details > summary { cursor: pointer; font-weight: 600; }
+.transcript-body { max-height: 40vh; overflow: auto; padding-right: 0.5rem; }
+.transcript-section h5 { margin: 0.75rem 0 0.25rem; display: flex; gap: 0.5rem; align-items: baseline; }
+.transcript-section p { margin: 0 0 0.35rem; }
+.transcript-section p.is-optional { font-style: italic; opacity: 0.8; }
+.transcript-time, .transcript-seek { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
+.transcript-seek {
+  border: 1px solid var(--brand-primary); background: transparent; color: var(--brand-primary);
+  border-radius: 500px; padding: 0 0.5rem; cursor: pointer;
+}
+.transcript-seek:hover { background: var(--brand-primary); color: var(--text-inverse); }
+
+/* How a sound was made: a line of facts above its text. */
+.sound-record { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.5rem; }
+.sound-fact .uk-text-meta { margin-right: 0.25rem; }
+
+/* Every quarter step of speed, wrapping rather than scrolling. */
+
+
+/* The player: a dark stage, then the controls a streaming site has, in one quiet row. */
+.media-card .media-stage { background: var(--brand-dark); border-radius: 0.6rem; overflow: hidden; }
+.media-card .media-stage .video-player { border-radius: 0; max-height: 62vh; }
+.media-card .media-stage.is-sound { background: linear-gradient(135deg, var(--subtle-brand), var(--subtle-accent)); padding: 1rem; }
+.media-card .media-stage.is-sound .sound-player { margin: 0; }
+.media-meta { margin-bottom: 0.5rem; }
+.player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.6rem 0 0.25rem; }
+.player-nav { margin-left: auto; display: inline-flex; gap: 0.25rem; }
+.player-keys { flex-basis: 100%; font-size: 0.72rem; }
+.speed-menu .uk-dropdown { padding: 0.6rem; width: 21rem; }
+.sound-speeds { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+.sound-speeds .uk-button { padding: 0 0.6rem; }
+.sound-speeds .uk-button.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-inverse); }
+.chapter-bar { display: flex; gap: 3px; height: 0.5rem; margin: 0.5rem 0 0.25rem; }
+.chapter-bar:empty { display: none; }
+.chapter-seg {
+  flex: 1 1 0; min-width: 4px; border: 0; padding: 0; border-radius: 2px; cursor: pointer;
+  background: color-mix(in srgb, var(--brand-primary) 18%, var(--surface-muted)); transition: height 0.12s;
+}
+.chapter-seg.is-past { background: color-mix(in srgb, var(--brand-primary) 55%, transparent); }
+.chapter-seg.is-current { background: var(--brand-primary); }
+.chapter-seg:hover { height: 0.75rem; margin-top: -0.125rem; }
+.player-chapter { font-weight: 600; margin: 0 0 0.25rem; }
+.transcript-section.is-current { background: var(--subtle-brand); border-radius: 0.3rem; box-shadow: -3px 0 0 var(--brand-primary); padding: 0.1rem 0.5rem; }
+
+/* A card, the way a streaming site draws it: the length in a corner, CC when there are words, a preview. */
+.fx-thumb { position: relative; }
+.fx-duration, .fx-cc {
+  position: absolute; bottom: 0.4rem; z-index: 2; background: color-mix(in srgb, var(--brand-dark) 78%, transparent); color: var(--text-inverse);
+  font-size: 0.72rem; font-weight: 600; line-height: 1.45; padding: 0 0.4rem; border-radius: 0.25rem;
+  font-variant-numeric: tabular-nums;
+}
+.fx-duration { right: 0.4rem; }
+.fx-cc { left: 0.4rem; letter-spacing: 0.04em; }
+.fx-thumb .fx-play { z-index: 1; transition: opacity 0.2s; }
+.fx-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; z-index: 1; }
+.fx-thumb.is-previewing .fx-preview { opacity: 1; }
+.fx-thumb.is-previewing .fx-play { opacity: 0; }
+
+/* Generating, inside the modal: working, ready, or not made. */
+.voice-progress p, .voice-done p, .voice-failed p { margin: 0 0 0.4rem; }
+.voice-log {
+  margin: 0.25rem 0 0.5rem; padding: 0.5rem 0.75rem; max-height: 8rem; overflow: auto; white-space: pre-wrap;
+  background: var(--surface-muted); border-radius: 0.4rem; font-family: var(--font-code); font-size: 0.75rem;
+}
+.voice-done .sound-player, .voice-done .video-player { width: 100%; margin: 0.5rem 0; }

package/public/css/components/suggest-agents-skills-commands.css

@@ -0,0 +1,112 @@
+/* The "@" / "/" suggestion popup.
+ *
+ * Painted with the theme tokens only — the palette has no attention colour, and the rule
+ * in CLAUDE.md is to paint with the tokens rather than introduce a hex. So the active row
+ * is the brand fill it already has, and everything else is surface, line and text.
+ *
+ * On <body> and positioned by script, because the composer's field lives inside
+ * deep-chat's shadow root: a popup rendered there inherits that component's overflow and
+ * stacking, and gets clipped by the panel. z-index sits above the modal backdrop so the
+ * list still works in the New screen dialog. */
+
+.ws-suggest {
+  position: fixed;
+  z-index: 1030;                       /* above UIKit's modal (1010) and its dialog */
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--surface-card);
+  color: var(--text-default);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: var(--shadow-float);
+  padding: 4px;
+  font-size: .8125rem;
+  line-height: 1.35;
+}
+
+.ws-suggest[hidden] { display: none !important; }
+
+.ws-suggest-row {
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, auto) auto 1fr;
+  grid-template-areas:
+    'icon name kind where'
+    '.    desc desc desc';
+  gap: 1px .5rem;
+  align-items: baseline;
+  padding: .375rem .5rem;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.ws-suggest-row + .ws-suggest-row { margin-top: 1px; }
+
+/* The sprite's own stroke and colour come from .tabler-icon in base.css; this only has
+ * to sit the glyph on the text baseline it shares with the name. */
+.ws-suggest-icon {
+  grid-area: icon;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.1em;
+}
+
+.ws-suggest-icon .tabler-icon { color: var(--brand-primary); }
+.ws-suggest-row.is-active .ws-suggest-icon .tabler-icon { color: var(--text-inverse); }
+
+/* The name is what is being chosen, so it is never truncated: a 47-character name cut
+ * to "upsun-webship-sandbox-1-play…" is indistinguishable from its siblings. It wraps
+ * instead, which costs a second line only on the few names that long. */
+.ws-suggest-name {
+  grid-area: name;
+  font-family: var(--font-code, ui-monospace, monospace);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.ws-suggest-kind {
+  grid-area: kind;
+  font-size: .6875rem;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--text-subtle);
+}
+
+.ws-suggest-where {
+  grid-area: where;
+  justify-self: end;
+  font-size: .6875rem;
+  color: var(--text-subtle);
+  white-space: nowrap;
+}
+
+/* Two lines at most: a Claude Code description is a paragraph written for a model to
+ * choose on, and the whole list has to stay scannable. The full text is the title. */
+.ws-suggest-desc {
+  grid-area: desc;
+  color: var(--text-subtle);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ws-suggest-row.is-active {
+  background: var(--brand-primary);
+  color: var(--text-inverse);
+}
+
+.ws-suggest-row.is-active .ws-suggest-kind,
+.ws-suggest-row.is-active .ws-suggest-where,
+.ws-suggest-row.is-active .ws-suggest-desc { color: var(--text-inverse); }
+
+@media (max-width: 47.9375em) {
+  /* A phone has no room for the provenance column, and the description is what tells
+   * two similarly named skills apart — so the label goes, not the sentence. */
+  .ws-suggest-where { display: none; }
+  .ws-suggest-row { grid-template-columns: 1.25rem minmax(0, auto) auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ws-suggest { scroll-behavior: auto; }
+}

package/public/css/components/tab-modal.css

@@ -0,0 +1,142 @@
+/* ---------- A modal with its sections as tabs down the left ---------- */
+
+/* The dialog gives the tabs the width and the height; the body hands over its padding so the column
+   runs edge to edge and the two halves scroll on their own. */
+#editor-modal .uk-modal-dialog:has(.tabmodal) { width: min(94vw, 70rem); }
+#editor-modal .uk-modal-body:has(.tabmodal) {
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+}
+
+.tabmodal {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: 15.5rem minmax(0, 1fr);
+  min-height: 0;
+  height: min(46rem, calc(100dvh - 9rem));
+}
+
+.tabmodal-nav {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1.125rem 0.75rem 0.75rem;
+  background: var(--surface);
+  border-right: 1px solid var(--line);
+}
+.tabmodal-title { padding: 0 0.625rem 0.5rem; }
+.tabmodal-title h2 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
+.tabmodal-filter.uk-input { flex: none; height: 2.25rem; margin: 0 0 0.5rem; padding: 0 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; }
+.tabmodal-tabs { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 0.5rem; }
+.tabmodal-group + .tabmodal-group { margin-top: 0.875rem; }
+.tabmodal-group[hidden] { display: none; }
+.tabmodal-group-label {
+  margin: 0 0 0.25rem;
+  padding: 0 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-subtle);
+}
+
+.tabmodal-back {
+  align-self: flex-start;
+  margin: 0 0 0.5rem;
+  padding: 0.25rem 0.625rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--text-subtle);
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+.tabmodal-back:hover { background: var(--subtle-brand); color: var(--link); }
+
+.tabmodal-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  min-height: 2.25rem;
+  margin: 0 0 0.125rem;
+  padding: 0.25rem 0.625rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+}
+.tabmodal-tab[hidden] { display: none; }
+.tabmodal-tab .tabler-icon { flex: none; color: var(--text-subtle); }
+.tabmodal-tab-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tabmodal-tab:hover { background: color-mix(in srgb, var(--text-subtle) 12%, transparent); }
+.tabmodal-tab.is-selected { background: var(--subtle-brand); color: var(--link); font-weight: 600; }
+.tabmodal-tab.is-selected .tabler-icon { color: var(--link); }
+.tabmodal-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
+.tabmodal-badge {
+  flex: none;
+  min-width: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--line);
+  color: var(--text-default);
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-align: center;
+}
+
+.tabmodal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.tabmodal-head {
+  flex: none;
+  padding: 1.125rem 3rem 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--line);
+}
+.tabmodal-heading { margin: 0; font-size: 1.125rem; line-height: 1.3; }
+.tabmodal-sub { display: block; min-height: 1.25rem; }
+.tabmodal-pane { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1.25rem 1.5rem 0; overscroll-behavior: contain; }
+.tabmodal-pane::after { content: ""; display: block; height: 1.5rem; }
+.tabmodal-pane:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
+
+/* A form that pins its own actions runs to the foot of the pane, and its title is the pane's heading. */
+.tabmodal-pane .modal-head { position: static; margin: 0 0 1rem; padding: 0 0 0.75rem; border-bottom: 0; }
+.tabmodal-pane .modal-head > h3:first-child { display: none; }
+
+/* A page that was written to fill a page does not need its own frame inside a pane. */
+.tabmodal-pane .settings-back { display: none; }
+.tabmodal-pane .editor-card,
+.tabmodal-pane .uk-card-default { box-shadow: none; border: 0; padding: 0; background: transparent; }
+.tabmodal-pane .uk-card-body { padding: 0; }
+/* The pinned save bar was written for the modal body's padding; the pane's is a little smaller. */
+.tabmodal-pane form > :last-child:has(button[type="submit"]),
+.tabmodal-pane .nav-save,
+.tabmodal-pane .modal-actions { margin-inline: -1.5rem; padding-inline: 1.5rem; }
+
+@media (max-width: 59.9375em) {
+  .tabmodal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
+  .tabmodal-nav { max-height: 11rem; border-right: 0; border-bottom: 1px solid var(--line); }
+}
+
+/* ---------- The editor modal's own frame, for every modal ---------- */
+
+#editor-modal .uk-modal-dialog { border-radius: 0.875rem; overflow: hidden; }
+#editor-modal .uk-modal-close-default {
+  top: 0.75rem;
+  right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  z-index: 6;
+}
+#editor-modal .uk-modal-close-default:hover { background: color-mix(in srgb, var(--text-subtle) 14%, transparent); }
+#editor-modal .uk-modal-close-default:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
+