clauderipple 0.2.0

package/dist/ui/style.css

@@ -0,0 +1,347 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f6f6f7;
+  --panel: #ffffff;
+  --border: #dcdde0;
+  --text: #1b1c1f;
+  --muted: #4f545c;
+  --accent: #6a56d6;
+  --accent-text: #ffffff;
+  --ok: #1a8a4a;
+  --warn: #b5820a;
+  --bad: #c73434;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #17181a;
+    --panel: #1f2023;
+    --border: #33353a;
+    --text: #e8e9eb;
+    --muted: #b3b7bf;
+    --accent: #9f8cf2;
+    --accent-text: #0c1220;
+    --ok: #3ecb7d;
+    --warn: #e0b436;
+    --bad: #ef5a5a;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 16px;
+  display: flex;
+  min-height: 100vh;
+}
+
+nav {
+  width: 168px;
+  flex: 0 0 auto;
+  border-right: 1px solid var(--border);
+  padding: 14px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+nav .brand {
+  font-weight: 600;
+  font-size: 18px;
+  padding: 4px 8px 14px;
+  letter-spacing: 0.2px;
+}
+
+nav button {
+  all: unset;
+  cursor: pointer;
+  padding: 7px 8px;
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+nav button:hover { background: var(--border); color: var(--text); }
+nav button.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
+
+nav .nav-spacer { flex: 1 1 auto; }
+
+.lang-toggle {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 14px;
+  border: 1px solid var(--border);
+  text-align: center;
+}
+.lang-toggle:hover { background: var(--border); color: var(--text); }
+
+main {
+  flex: 1 1 auto;
+  padding: 22px 28px;
+  max-width: 980px;
+  overflow-x: auto;
+}
+
+h1 {
+  font-size: 22px;
+  margin: 0 0 4px;
+}
+
+.subtitle {
+  color: var(--muted);
+  margin: 0 0 18px;
+  font-size: 14px;
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+}
+
+.card h2 {
+  font-size: 15px;
+  letter-spacing: 0.2px;
+  color: var(--muted);
+  margin: 0 0 10px;
+  font-weight: 600;
+}
+
+.rows { display: flex; flex-direction: column; gap: 7px; }
+.row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
+.row .k { color: var(--muted); }
+.row .v { font-family: var(--mono); font-size: 15px; text-align: right; }
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 100px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.badge.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
+.badge.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
+.badge.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
+.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+table { width: 100%; border-collapse: collapse; }
+th { text-align: left; font-size: 14px; letter-spacing: 0.2px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
+td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+tr:last-child td { border-bottom: none; }
+
+input, select, textarea {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 5px 7px;
+  font-size: 15px;
+  font-family: inherit;
+  width: 100%;
+}
+input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+
+button.btn {
+  all: unset;
+  cursor: pointer;
+  background: var(--accent);
+  color: var(--accent-text);
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+}
+button.btn:hover { filter: brightness(1.06); }
+button.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
+button.btn.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
+button.btn:disabled { opacity: 0.5; cursor: default; }
+
+.icon-btn {
+  all: unset;
+  cursor: pointer;
+  color: var(--muted);
+  padding: 3px 7px;
+  border-radius: 5px;
+  font-size: 15px;
+}
+.icon-btn:hover { background: var(--border); color: var(--bad); }
+
+.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
+.toolbar .right { display: flex; gap: 8px; align-items: center; }
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--ok);
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 15px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.15s, transform 0.15s;
+  pointer-events: none;
+  max-width: 360px;
+}
+.toast.show { opacity: 1; transform: translateY(0); }
+.toast.error { border-left-color: var(--bad); }
+
+pre#logbox {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.5;
+  height: 60vh;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.tag-PASS { color: var(--muted); }
+.tag-ERR { color: var(--bad); }
+.tag-WARN { color: var(--warn); }
+.tag-PROVIDER { color: var(--accent); }
+
+label.check { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 15px; width: auto; cursor: pointer; }
+label.check input { width: auto; }
+.hint { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 4px 0 0; }
+.small { font-size: 14px; color: var(--muted); }
+
+.view { display: none; }
+.view.active { display: block; }
+.actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
+.actions.end { justify-content: flex-end; }
+.details { color: var(--muted); font-size: 14px; margin-top: 12px; }
+.advanced-content { margin-top: 10px; display: grid; gap: 12px; }
+.details summary { cursor: pointer; user-select: none; }
+.detail-rows { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); }
+.picker-setting { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+.switch { width: 40px; height: 23px; flex: 0 0 auto; position: relative; cursor: pointer; }
+.switch input { position: absolute; opacity: 0; pointer-events: none; }
+.switch span { display: block; height: 100%; border-radius: 99px; background: var(--border); transition: background .15s; }
+.switch span::after { content: ""; position: absolute; width: 17px; height: 17px; top: 3px; left: 3px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .15s; }
+.switch input:checked + span { background: var(--accent); }
+.switch input:checked + span::after { transform: translateX(17px); }
+.table-card { padding: 0; overflow-x: auto; }
+.table-card table { min-width: 670px; }
+.icon-cell { width: 36px; text-align: right; }
+.muted-cell { color: var(--muted); position: relative; }
+.muted-cell::after { content: attr(data-empty); position: absolute; inset: 0 8px; display: grid; place-items: center; pointer-events: none; color: var(--muted); }
+.muted-cell select:disabled { opacity: 0; }
+.model-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 7px; margin-top: 9px; }
+.model-check { display: flex; gap: 7px; align-items: center; min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; }
+.model-check input { width: auto; flex: 0 0 auto; }
+.model-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.model-check small { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
+.provider-card h2 { color: var(--text); font-size: 14px; text-transform: none; letter-spacing: 0; margin: 0; }
+.provider-state { display: flex; gap: 8px; align-items: center; margin: 8px 0 2px; }
+.provider-status { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
+.provider-status:last-child { border-bottom: none; }
+.empty-card { color: var(--muted); padding: 28px 16px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
+.toast-raw { margin-top: 5px; color: var(--muted); font: 10.5px/1.35 var(--mono); word-break: break-word; }
+.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, #000 38%, transparent); }
+#modal-backdrop[hidden] { display: none !important; }
+.modal { width: min(650px, 100%); max-height: min(780px, calc(100vh - 36px)); overflow: auto; position: relative; padding: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
+.modal h1 { margin-bottom: 5px; }
+.modal-close { position: absolute; top: 11px; right: 11px; font-size: 20px; }
+.chooser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; margin-top: 16px; }
+.chooser-group { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
+.chooser-group strong { font-size: 15px; }
+.chooser-group span { color: var(--muted); font-size: 14px; line-height: 1.35; }
+.chooser-tile { appearance: none; cursor: pointer; min-height: 106px; padding: 13px; text-align: left; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
+.chooser-tile:hover { border-color: var(--accent); }
+.chooser-tile strong, .chooser-tile span { display: block; }
+.chooser-tile strong { margin-bottom: 6px; }
+.chooser-tile span { color: var(--muted); font-size: 14px; line-height: 1.35; }
+.form-field { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; color: var(--text); font-size: 15px; }
+.form-field > small { color: var(--muted); font-size: 14px; line-height: 1.4; }
+.key-control { display: flex; gap: 6px; }
+.eye-button { all: unset; flex: 0 0 auto; cursor: pointer; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px; color: var(--muted); }
+.probe-result { min-height: 18px; margin-top: 9px; font-size: 14px; }
+.ok-text { color: var(--ok); }
+.warn-text { color: var(--warn); }.bad-text { color: var(--bad); }
+.advanced-content { padding-top: 3px; }
+.picker-check { margin-top: 15px; }
+.client-models { margin-top: 15px; }
+.client-models h3, .card h3 { color: var(--muted); font-size: 15px; letter-spacing: 0.2px; margin: 0 0 8px; font-weight: 600; }
+.client-divider { border-top: 1px solid var(--border); margin: 18px 0 14px; }
+
+@media (max-width: 680px) {
+  body { display: block; }
+  nav { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); padding: 9px; flex-direction: row; overflow-x: auto; align-items: center; }
+  nav .brand { display: none; }
+  nav .nav-spacer { display: none; }
+  main { padding: 18px 16px; overflow-x: visible; }
+  .row { align-items: flex-start; flex-direction: column; gap: 4px; }
+  .row .v { text-align: left; }
+  .provider-status { grid-template-columns: 1fr; }
+  .modal { padding: 19px 16px; }
+}
+
+.model-search { width: 100%; margin-top: 8px; }
+.model-picker .small { margin-top: 6px; }
+.model-effort-tag { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 999px; font-size: 12px; line-height: 1.35; vertical-align: middle; white-space: nowrap; }
+.model-effort-tag.has-effort { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
+.model-effort-tag.no-effort { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
+.model-check .model-effort-tag { margin-left: auto; }
+#slots-status { margin-left: 12px; }
+#slots-summary { margin: 0 0 10px; }
+
+/* Readability: body copy is 16px; hints and secondary text stay one step down but never below 14px. */
+.hint, .small, small, .subtitle { font-size: 14px; }
+.subtitle { font-size: 15px; }
+input, select, textarea, button { font-size: 15px; }
+
+.logs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
+.logs-tab { all: unset; cursor: pointer; padding: 8px 11px; color: var(--muted); font-size: 15px; border-bottom: 2px solid transparent; }
+.logs-tab:hover { color: var(--text); }
+.logs-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
+.logs-summary-title { display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px; }
+.logs-summary { display: grid; grid-template-columns: repeat(5, minmax(126px, 1fr)); gap: 8px; margin-bottom: 14px; }
+.logs-chip { min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 10px 11px; background: var(--panel); }
+.logs-chip .label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
+.logs-chip .value { display: block; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.logs-controls { justify-content: flex-start; }
+.logs-filter { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 15px; }
+.logs-filter select { width: auto; min-width: 120px; }
+.logs-table-card { margin-bottom: 0; }
+.logs-table-card table { min-width: 920px; }
+#requests-table tbody tr.request-row { cursor: pointer; }
+#requests-table tbody tr.request-row:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
+#requests-table td { font-variant-numeric: tabular-nums; }
+.request-models { display: flex; align-items: center; gap: 5px; min-width: 185px; }
+.request-models .model { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.provider-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 99px; color: var(--provider, var(--accent)); background: color-mix(in srgb, var(--provider, var(--accent)) 16%, transparent); font-size: 14px; font-weight: 600; white-space: nowrap; }
+.provider-anthropic { --provider: #8b5cf6; }.provider-chatgpt { --provider: #16856b; }.provider-default { --provider: var(--accent); }
+.token-cell { white-space: nowrap; }
+.cache-pill { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 99px; color: var(--muted); background: var(--bg); font-size: 14px; }
+.no-usage { color: var(--muted); }
+.status-text { font-weight: 600; white-space: nowrap; }.status-text.ok { color: var(--ok); }.status-text.bad { color: var(--bad); }
+.request-detail td { padding: 0; background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
+.request-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; padding: 12px 14px; }
+.request-detail-grid .detail-label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 3px; }
+.request-detail-grid .detail-value { word-break: break-word; font-family: var(--mono); font-size: 14px; }
+.request-note { grid-column: 1 / -1; }
+@media (max-width: 980px) { .logs-summary { grid-template-columns: repeat(3, minmax(130px, 1fr)); } }
+@media (max-width: 680px) { .logs-summary { grid-template-columns: repeat(2, minmax(130px, 1fr)); }.request-detail-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }
+
+nav .brand { display: flex; align-items: center; gap: 8px; }
+nav .brand svg { width: 22px; height: 22px; flex: 0 0 auto; }