pi-studio-opencode 0.1.0

package/static/prototype.css

@@ -0,0 +1,1277 @@
+:root {
+  color-scheme: dark;
+  --bg: #0f1117;
+  --panel: #171b24;
+  --panel-2: #11161f;
+  --card: #171b24;
+  --editor-bg: #171b24;
+  --text: #e6edf3;
+  --muted: #9aa5b1;
+  --border: #2d3748;
+  --border-muted: #242b38;
+  --accent: #5ea1ff;
+  --accent-contrast: #0e1616;
+  --accent-soft: rgba(94, 161, 255, 0.35);
+  --accent-soft-strong: rgba(94, 161, 255, 0.40);
+  --ok: #73d13d;
+  --warn: #f9c74f;
+  --error: #ff6b6b;
+  --error-contrast: #0e1616;
+  --marker-bg: rgba(94, 161, 255, 0.25);
+  --marker-border: rgba(94, 161, 255, 0.65);
+  --ok-border: rgba(115, 209, 61, 0.70);
+  --warn-border: rgba(249, 199, 79, 0.70);
+  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.36), 0 6px 18px rgba(0, 0, 0, 0.22);
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --md-heading: #f0c674;
+  --md-link: #81a2be;
+  --md-link-url: #666666;
+  --md-code: #8abeb7;
+  --md-codeblock: #b5bd68;
+  --md-codeblock-border: #808080;
+  --md-quote: #808080;
+  --md-quote-border: #808080;
+  --md-hr: #808080;
+  --md-list-bullet: #8abeb7;
+  --syntax-comment: #6A9955;
+  --syntax-keyword: #569CD6;
+  --syntax-function: #DCDCAA;
+  --syntax-variable: #9CDCFE;
+  --syntax-string: #CE9178;
+  --syntax-number: #B5CEA8;
+  --syntax-type: #4EC9B0;
+  --syntax-operator: #D4D4D4;
+  --syntax-punctuation: #D4D4D4;
+  --blockquote-bg: rgba(128, 128, 128, 0.16);
+  --table-alt-bg: rgba(128, 128, 128, 0.14);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+header {
+  border-bottom: 1px solid var(--border-muted);
+  padding: 12px 16px;
+  background: var(--panel);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.app-logo {
+  color: var(--accent);
+  font-weight: 700;
+  font-size: 21px;
+  line-height: 1;
+  display: inline-block;
+}
+
+.app-subtitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+button,
+select {
+  border: 1px solid var(--border-muted);
+  background: var(--panel);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  transition: background-color 120ms ease, border-color 120ms ease, filter 120ms ease;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:not(:disabled):hover,
+select:hover {
+  background: var(--panel-2);
+}
+
+button:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--accent-soft-strong);
+  outline-offset: 1px;
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+#runBtn,
+#queueBtn,
+#loadResponseBtn {
+  min-width: 10rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#runBtn:not(:disabled):not(.request-stop-active),
+#queueBtn:not(:disabled),
+#loadResponseBtn:not(:disabled) {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+  font-weight: 600;
+}
+
+#runBtn:not(:disabled):not(.request-stop-active):hover,
+#queueBtn:not(:disabled):hover,
+#loadResponseBtn:not(:disabled):hover {
+  filter: brightness(0.95);
+}
+
+#runBtn.request-stop-active {
+  background: var(--error);
+  border-color: var(--error);
+  color: var(--error-contrast);
+  font-weight: 600;
+}
+
+#runBtn.request-stop-active:not(:disabled):hover {
+  filter: brightness(0.95);
+}
+
+#diagnosticsBtn.active {
+  background: var(--accent-soft);
+  border-color: var(--border);
+}
+
+main {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 12px;
+}
+
+section {
+  border: 1px solid var(--border-muted);
+  border-radius: 10px;
+  background: var(--panel);
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--panel-shadow);
+}
+
+section.pane-active {
+  border-color: var(--border);
+}
+
+body.pane-focus-left main,
+body.pane-focus-right main {
+  grid-template-columns: 1fr;
+}
+
+body.pane-focus-left #rightPane,
+body.pane-focus-right #leftPane {
+  display: none;
+}
+
+body.pane-focus-left #leftPane,
+body.pane-focus-right #rightPane {
+  border-color: var(--border);
+}
+
+.section-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-muted);
+  background: var(--panel-2);
+  font-weight: 600;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.section-header-main {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.section-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.section-header-actions button {
+  padding: 6px 9px;
+  font-size: 12px;
+  border-radius: 7px;
+}
+
+.pane-focus-btn.is-active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+  font-weight: 600;
+}
+
+button.pane-focus-btn.is-active:not(:disabled):hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+  filter: brightness(0.95);
+}
+
+.section-header select {
+  font-weight: 600;
+  font-size: 14px;
+  border: none;
+  border-radius: 4px;
+  background: inherit;
+  color: inherit;
+  cursor: pointer;
+  padding: 2px 4px;
+  margin: 0;
+  -webkit-appearance: menulist;
+  appearance: menulist;
+}
+
+.source-wrap {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.source-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.badge-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.source-badge {
+  border: 1px solid var(--border-muted);
+  background: var(--panel);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.sync-badge.sync {
+  opacity: 0.88;
+}
+
+.resource-dir-btn {
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 999px;
+}
+
+.resource-dir-label {
+  cursor: pointer;
+}
+
+.hl-heading {
+  color: var(--md-heading);
+  font-weight: 700;
+}
+
+.hl-fence {
+  color: var(--muted);
+}
+
+.hl-code {
+  color: var(--md-code);
+}
+
+.hl-code-kw {
+  color: var(--syntax-keyword);
+  font-weight: 600;
+}
+
+.hl-code-str {
+  color: var(--syntax-string);
+}
+
+.hl-code-num {
+  color: var(--syntax-number);
+}
+
+.hl-code-com {
+  color: var(--syntax-comment);
+}
+
+.hl-code-var,
+.hl-code-key {
+  color: var(--syntax-variable);
+}
+
+.hl-code-fn {
+  color: var(--syntax-function);
+}
+
+.hl-code-op {
+  color: var(--syntax-operator);
+}
+
+.hl-list {
+  color: var(--md-list-bullet);
+  font-weight: 600;
+}
+
+.hl-quote {
+  color: var(--md-quote);
+}
+
+.hl-link {
+  color: var(--md-link);
+  text-decoration: underline;
+}
+
+.hl-url {
+  color: var(--md-link-url);
+}
+
+.hl-annotation {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px var(--marker-border);
+}
+
+.hl-annotation-muted {
+  color: var(--muted);
+  opacity: 0.65;
+}
+
+.annotation-preview-marker {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border: 1px solid var(--marker-border);
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
+.hl-diff-add {
+  color: var(--ok);
+  background: rgba(46, 160, 67, 0.12);
+  display: inline-block;
+  width: 100%;
+}
+
+.hl-diff-del {
+  color: var(--error);
+  background: rgba(248, 81, 73, 0.12);
+  display: inline-block;
+  width: 100%;
+}
+
+.source-actions,
+.response-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.source-actions-row,
+.response-actions-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+}
+
+.response-actions-row.history-row {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  padding-bottom: 2px;
+  scrollbar-width: thin;
+}
+
+.response-actions-row.history-row > * {
+  flex: 0 0 auto;
+}
+
+.editor-highlight-wrap {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  border: 1px solid var(--border-muted);
+  border-radius: 8px;
+  background: var(--editor-bg);
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.editor-highlight {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 8px;
+  padding: 10px;
+  overflow: auto;
+  pointer-events: none;
+  white-space: pre-wrap;
+  word-break: normal;
+  overflow-wrap: break-word;
+  overscroll-behavior: none;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.45;
+  tab-size: 2;
+  color: var(--text);
+  background: transparent;
+}
+
+textarea {
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  padding: 10px;
+  font-size: 13px;
+  line-height: 1.45;
+  tab-size: 2;
+  font-family: var(--font-mono);
+  resize: none;
+  outline: none;
+  min-height: 180px;
+  flex: 1 1 auto;
+  position: relative;
+  z-index: 1;
+  overscroll-behavior: none;
+}
+
+#promptInput.highlight-active {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--text);
+  background: transparent;
+}
+
+#promptInput.highlight-active::selection {
+  background: var(--accent-soft);
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+.reference-meta {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border-muted);
+  background: var(--panel-2);
+}
+
+.panel-scroll {
+  position: relative;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+  line-height: 1.52;
+  font-size: 14px;
+}
+
+#responseView {
+  flex: 1 1 auto;
+}
+
+.rendered-markdown {
+  overflow-wrap: anywhere;
+  line-height: 1.58;
+  font-size: 15px;
+}
+
+.rendered-markdown h1,
+.rendered-markdown h2,
+.rendered-markdown h3,
+.rendered-markdown h4,
+.rendered-markdown h5,
+.rendered-markdown h6 {
+  margin-top: 1.2em;
+  margin-bottom: 0.5em;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.rendered-markdown h1 {
+  font-size: 1.6em;
+}
+
+.rendered-markdown h2 {
+  font-size: 1.25em;
+}
+
+.rendered-markdown p,
+.rendered-markdown ul,
+.rendered-markdown ol,
+.rendered-markdown blockquote,
+.rendered-markdown table {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.rendered-markdown li::marker {
+  color: var(--accent);
+}
+
+.rendered-markdown a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.rendered-markdown a:hover {
+  text-decoration: underline;
+}
+
+.rendered-markdown blockquote {
+  margin-left: 0;
+  padding: 0.2em 1em;
+  border-left: 0.25em solid var(--md-quote-border);
+  border-radius: 0 8px 8px 0;
+  background: var(--blockquote-bg);
+  color: var(--md-quote);
+}
+
+.rendered-markdown .callout-note,
+.rendered-markdown .callout-tip,
+.rendered-markdown .callout-warning,
+.rendered-markdown .callout-important,
+.rendered-markdown .callout-caution {
+  margin: 1.15em 0;
+  padding: 0.8em 1rem 0.95em;
+  border: 1px solid var(--border-muted);
+  border-left-width: 4px;
+  border-radius: 10px;
+  background: var(--panel-2);
+  color: inherit;
+}
+
+.rendered-markdown .callout-note::before,
+.rendered-markdown .callout-tip::before,
+.rendered-markdown .callout-warning::before,
+.rendered-markdown .callout-important::before,
+.rendered-markdown .callout-caution::before {
+  display: inline-block;
+  margin-bottom: 0.45rem;
+  font-size: 0.76em;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rendered-markdown .callout-note::before {
+  content: "Note";
+  color: var(--accent);
+}
+
+.rendered-markdown .callout-tip::before {
+  content: "Tip";
+  color: var(--ok);
+}
+
+.rendered-markdown .callout-warning::before {
+  content: "Warning";
+  color: var(--warn);
+}
+
+.rendered-markdown .callout-important::before {
+  content: "Important";
+  color: var(--error);
+}
+
+.rendered-markdown .callout-caution::before {
+  content: "Caution";
+  color: var(--error);
+}
+
+.rendered-markdown .callout-note {
+  border-left-color: var(--accent);
+}
+
+.rendered-markdown .callout-tip {
+  border-left-color: var(--ok);
+}
+
+.rendered-markdown .callout-warning {
+  border-left-color: var(--warn);
+}
+
+.rendered-markdown .callout-important,
+.rendered-markdown .callout-caution {
+  border-left-color: var(--error);
+}
+
+.rendered-markdown .callout-note > :first-child,
+.rendered-markdown .callout-tip > :first-child,
+.rendered-markdown .callout-warning > :first-child,
+.rendered-markdown .callout-important > :first-child,
+.rendered-markdown .callout-caution > :first-child {
+  margin-top: 0;
+}
+
+.rendered-markdown .callout-note > :last-child,
+.rendered-markdown .callout-tip > :last-child,
+.rendered-markdown .callout-warning > :last-child,
+.rendered-markdown .callout-important > :last-child,
+.rendered-markdown .callout-caution > :last-child {
+  margin-bottom: 0;
+}
+
+.rendered-markdown pre {
+  background: var(--panel-2);
+  border: 1px solid var(--md-codeblock-border, var(--border-muted));
+  border-radius: 8px;
+  padding: 12px 14px;
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.rendered-markdown code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  color: var(--md-code);
+}
+
+.rendered-markdown pre code {
+  color: var(--md-codeblock, var(--text));
+}
+
+.rendered-markdown :not(pre) > code {
+  background: rgba(127, 127, 127, 0.13);
+  border: 1px solid var(--md-codeblock-border, var(--border-muted));
+  border-radius: 6px;
+  padding: 0.12em 0.35em;
+}
+
+.rendered-markdown code span.kw,
+.rendered-markdown code span.cf,
+.rendered-markdown code span.im {
+  color: var(--syntax-keyword);
+  font-weight: 600;
+}
+
+.rendered-markdown code span.dt {
+  color: var(--syntax-type, var(--syntax-function));
+  font-weight: 600;
+}
+
+.rendered-markdown code span.fu,
+.rendered-markdown code span.bu {
+  color: var(--syntax-function);
+}
+
+.rendered-markdown code span.va,
+.rendered-markdown code span.ot {
+  color: var(--syntax-variable);
+}
+
+.rendered-markdown code span.st,
+.rendered-markdown code span.ss,
+.rendered-markdown code span.sc,
+.rendered-markdown code span.ch {
+  color: var(--syntax-string);
+}
+
+.rendered-markdown code span.dv,
+.rendered-markdown code span.bn,
+.rendered-markdown code span.fl {
+  color: var(--syntax-number);
+}
+
+.rendered-markdown code span.co {
+  color: var(--syntax-comment);
+  font-style: italic;
+}
+
+.rendered-markdown code span.op {
+  color: var(--syntax-operator);
+}
+
+.rendered-markdown code span.pp,
+.rendered-markdown code span.pu {
+  color: var(--syntax-punctuation, var(--muted));
+}
+
+.rendered-markdown code span.er,
+.rendered-markdown code span.al {
+  color: var(--error);
+  font-weight: 600;
+}
+
+.rendered-markdown pre.sourceCode.diff code > span:has(> .va) {
+  color: var(--ok);
+  background: rgba(46, 160, 67, 0.12);
+}
+
+.rendered-markdown pre.sourceCode.diff code > span:has(> .st) {
+  color: var(--error);
+  background: rgba(248, 81, 73, 0.12);
+}
+
+.rendered-markdown pre.sourceCode.diff code > span:has(> .dt) {
+  color: var(--syntax-function);
+}
+
+.rendered-markdown pre.sourceCode.diff code > span:has(> .kw) {
+  color: var(--syntax-keyword);
+}
+
+.rendered-markdown pre.sourceCode.diff .va,
+.rendered-markdown pre.sourceCode.diff .st,
+.rendered-markdown pre.sourceCode.diff .dt,
+.rendered-markdown pre.sourceCode.diff .kw {
+  color: inherit;
+  font-weight: inherit;
+}
+
+.rendered-markdown table {
+  border-collapse: collapse;
+  display: block;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.rendered-markdown th,
+.rendered-markdown td {
+  border: 1px solid var(--border-muted);
+  padding: 6px 12px;
+}
+
+.rendered-markdown thead th {
+  background: var(--panel-2);
+}
+
+.rendered-markdown tbody tr:nth-child(even) {
+  background: var(--table-alt-bg);
+}
+
+.rendered-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--md-hr);
+  margin: 1.25em 0;
+}
+
+.rendered-markdown .studio-page-break {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin: 1.75em 0;
+  color: var(--muted);
+  font-size: 0.88em;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.rendered-markdown .studio-page-break-rule {
+  flex: 1 1 auto;
+  height: 1px;
+  background: var(--border-muted);
+  opacity: 0.95;
+}
+
+.rendered-markdown .studio-page-break-label {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.rendered-markdown img {
+  max-width: 100%;
+}
+
+.rendered-markdown img[data-fig-align="center"],
+.rendered-markdown embed[data-fig-align="center"],
+.rendered-markdown .studio-pdf-preview[data-fig-align="center"] {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.rendered-markdown img[data-fig-align="right"],
+.rendered-markdown embed[data-fig-align="right"],
+.rendered-markdown .studio-pdf-preview[data-fig-align="right"] {
+  display: block;
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.rendered-markdown embed[type="application/pdf"],
+.rendered-markdown embed[src^="data:application/pdf"],
+.rendered-markdown embed[src$=".pdf"] {
+  display: block;
+  width: 100%;
+  min-height: 18rem;
+  border: 1px solid var(--border-muted);
+  border-radius: 10px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.rendered-markdown .studio-pdf-preview {
+  display: block;
+  max-width: 100%;
+  border: 1px solid var(--border-muted);
+  border-radius: 10px;
+  background: #fff;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.rendered-markdown .studio-pdf-preview[data-fig-align="center"] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.rendered-markdown .studio-pdf-preview canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+.rendered-markdown math {
+  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "STIXGeneral", serif;
+}
+
+.rendered-markdown mjx-container[display="true"] {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin: 1em auto;
+  text-align: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.rendered-markdown math[display="block"] {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin: 1em auto;
+  text-align: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.rendered-markdown .studio-mathjax-fallback-display,
+.rendered-markdown .studio-mathjax-fallback-display mjx-container[display="true"] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.panel-scroll.preview-pending::after {
+  content: "Updating";
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  pointer-events: none;
+  opacity: 0.64;
+}
+
+.panel-scroll.response-repaint-nudge {
+  outline: 1px solid transparent;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.preview-error {
+  color: var(--warn);
+  margin-bottom: 0.75em;
+  font-size: 12px;
+}
+
+.preview-warning {
+  color: var(--warn);
+  margin-top: 0.75em;
+  font-size: 12px;
+  font-style: italic;
+}
+
+.plain-markdown {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.response-markdown-highlight {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.response-wrap {
+  border-top: 1px solid var(--border-muted);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.diagnostics-panel {
+  margin: 0 12px 12px;
+  padding: 12px;
+  border: 1px solid var(--border-muted);
+  border-radius: 10px;
+  background: var(--panel);
+  box-shadow: var(--panel-shadow);
+}
+
+.diagnostics-panel[hidden] {
+  display: none !important;
+}
+
+.diagnostics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.diagnostic-card {
+  min-height: 0;
+}
+
+.diagnostic-wide {
+  grid-column: 1 / -1;
+}
+
+.diagnostics-header {
+  padding: 8px 10px;
+  font-size: 13px;
+}
+
+.diagnostics-body {
+  min-height: 0;
+  background: var(--panel);
+}
+
+.detail-body {
+  display: grid;
+  gap: 10px;
+}
+
+.detail-block {
+  border: 1px solid var(--border-muted);
+  background: var(--panel-2);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.detail-block h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 12px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.empty-state {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.history-list {
+  display: grid;
+  gap: 10px;
+}
+
+.history-group {
+  display: grid;
+  gap: 8px;
+}
+
+.history-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--panel-2);
+  border: 1px solid var(--border-muted);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.history-group-items {
+  display: grid;
+  gap: 8px;
+}
+
+.history-item {
+  border: 1px solid var(--border-muted);
+  background: var(--panel-2);
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.history-item.selected {
+  border-color: var(--border);
+  box-shadow: inset 0 0 0 1px var(--accent-soft-strong);
+}
+
+.history-item .row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.badges {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.badge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  border: 1px solid var(--border-muted);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+}
+
+.badge.run {
+  color: var(--text);
+}
+
+.badge.steer {
+  color: #e9d5ff;
+}
+
+.badge.error {
+  color: var(--error);
+  border-color: rgba(255, 123, 114, 0.4);
+}
+
+.snippet,
+.log-output,
+.detail-block pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.meta {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.log-output {
+  min-height: 160px;
+  max-height: 260px;
+  overflow: auto;
+  border: 0;
+  padding: 12px;
+  background: var(--panel);
+}
+
+footer {
+  border-top: 1px solid var(--border-muted);
+  padding: 7px 12px;
+  color: var(--muted);
+  font-size: 12px;
+  min-height: 32px;
+  background: var(--panel-2);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "status status"
+    "meta hint";
+  column-gap: 12px;
+  row-gap: 2px;
+  align-items: start;
+}
+
+#statusLine {
+  grid-area: status;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+  justify-self: start;
+  text-align: left;
+}
+
+#statusLine.with-spinner {
+  gap: 6px;
+}
+
+#statusSpinner {
+  width: 0;
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  text-align: center;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  flex: 0 0 auto;
+  transition: opacity 120ms ease;
+}
+
+#statusLine.with-spinner #statusSpinner {
+  width: 1.1em;
+  max-width: 1.1em;
+  opacity: 1;
+}
+
+#status {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+#status.error {
+  color: var(--error);
+}
+
+#status.warning {
+  color: var(--warn);
+}
+
+#status.success {
+  color: var(--ok);
+}
+
+.footer-meta {
+  grid-area: meta;
+  justify-self: start;
+  color: var(--muted);
+  font-size: 11px;
+  text-align: left;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  opacity: 0.84;
+}
+
+.footer-meta-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.shortcut-hint {
+  grid-area: hint;
+  justify-self: end;
+  align-self: center;
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+  text-align: right;
+  opacity: 0.72;
+}
+
+@media (max-width: 1240px) {
+  .diagnostics-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 1080px) {
+  main {
+    grid-template-columns: 1fr;
+  }
+
+  .diagnostics-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  footer {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "status"
+      "meta"
+      "hint";
+  }
+
+  .shortcut-hint {
+    justify-self: start;
+    text-align: left;
+    white-space: normal;
+  }
+}