cortico 0.1.1 → 0.1.2

package/src/web/public/styles.css

@@ -54,8 +54,8 @@
     --shadow-soft: color-mix(in srgb, var(--ink) 7%, transparent);
     --shadow-strong: color-mix(in srgb, var(--ink) 20%, transparent);
     --overlay: color-mix(in srgb, var(--ink) 44%, transparent);
-    --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
-    --mono: ui-monospace, "Cascadia Mono", "Sarasa Mono SC", Consolas, "PingFang SC", "Microsoft YaHei", monospace;
+    --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
+    --mono: ui-monospace, "Cascadia Mono", "Sarasa Mono SC", Consolas, monospace;
     --background: var(--paper);
     --surface: var(--sheet);
     --surface-hover: var(--sheet-2);
@@ -159,7 +159,7 @@
   .pagedesc { font-size: 13px; color: var(--ink-soft); max-width: 68ch; }
 
   .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 30px 40px; }
-  .measure { max-width: 1080px; }
+  .measure { max-width: var(--content-width); }
 
 
   .subtabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 12px 30px 0; flex: none; }
@@ -221,12 +221,14 @@
   }
   .btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--sheet); }
   .btn:disabled { opacity: .45; cursor: default; }
-  .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
-  .btn.primary:hover { filter: brightness(1.06); color: var(--on-accent); }
+  .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+  .btn.primary:hover { filter: brightness(1.06); color: #fff; }
   .btn.warn:hover { color: var(--warn); border-color: var(--warn); }
   .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
   .btn.danger:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: var(--danger); }
   .btn.sm { padding: 4px 11px; font-size: var(--text-detail); }
+  .btn-ico { display: inline-flex; align-items: center; gap: 6px; }
+  .btn-ico .icon { width: 14px; height: 14px; }
 
   .msgline { font: var(--text-detail)/1.45 var(--sans); min-height: 16px; color: var(--ok); }
   .msgline:empty { display: none; }
@@ -639,7 +641,7 @@
     min-height: 36px;
     transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
   }
-  .btn.primary, .seg.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  .btn.primary, .seg.active { background: var(--accent); border-color: var(--accent); color: #fff; }
   input.field, select.field, textarea.field { min-height: 40px; }
   input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px;
@@ -989,17 +991,19 @@
     overflow-x: hidden;
     overflow-y: auto;
     padding: 30px var(--page-gutter) 56px;
-    scrollbar-gutter: stable;
+    scrollbar-gutter: stable both-edges;
   }
   .providerchrome {
+    overflow: hidden;
+    scrollbar-gutter: stable both-edges;
     flex: none;
     min-width: 0;
     padding: 30px var(--page-gutter) 0;
   }
   .panelslot { padding-top: 8px; }
-  .featureslot > :not(.viewport-overlay),
+  .featureslot > :where(:not(.viewport-overlay)),
   .providerchrome > *,
-  .panelslot > :not(.viewport-overlay) {
+  .panelslot > :where(:not(.viewport-overlay)) {
     flex: none;
     width: 100%;
     max-width: var(--content-width);
@@ -1012,9 +1016,8 @@
     padding: 0;
   }
   .coreview .measure {
-    width: min(100%, var(--conversation-width));
-    margin-right: auto;
-    margin-left: 0;
+    width: min(100%, var(--content-width));
+    margin-inline: auto;
   }
   .featureslot-live > *,
   .featureslot-core > * {
@@ -1035,7 +1038,7 @@
   .providerintro .msgline { margin-top: 10px; }
   .pagetitle { margin-top: 7px; font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; }
   .pagedesc { margin-top: 5px; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
-  .scroll { padding: 22px var(--page-gutter) 48px; scrollbar-gutter: stable; }
+  .scroll { padding: 22px var(--page-gutter) 48px; scrollbar-gutter: stable both-edges; }
   .measure { width: min(100%, var(--content-width)); margin-inline: auto; }
   .subtabs {
     width: 100%;
@@ -1068,6 +1071,11 @@
   details.sheet.fold { margin-bottom: 10px; }
   details.sheet.fold > summary { padding: 0; }
   details.sheet.fold > .foldbody { padding: 14px 0 0; }
+  /* 整张点开详细页的卡(npm 搜索结果)。取值与 .connection-card 一致。 */
+  .iocard-open { cursor: pointer; transition: background .15s, border-color .15s; }
+  .iocard-open:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 92%, transparent); }
+  .iocard-open:focus-visible { outline: 2px solid var(--ink-dim); outline-offset: 1px; }
+  .iocard-open.is-installed { border-color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); }
   .featureslot > :not(.sheet) + .sheet,
   .featureslot > .sheet + .sheet,
   .panelslot > :not(.sheet) + .sheet,
@@ -1150,7 +1158,7 @@
   }
   .prompt-toolbar .msgline { min-width: 0; overflow-wrap: anywhere; }
   .featureslot-prompts > .prompt-library,
-  .panelslot > .prompt-library { margin-top: 28px; }
+  .panelslot > .prompt-library { margin-top: 0; }
   .prompt-card textarea.field {
     width: 100%;
     min-height: 300px;
@@ -1432,7 +1440,7 @@
     box-shadow: none;
   }
   .btn:hover { background: var(--hover); color: var(--foreground); border-color: transparent; box-shadow: none; }
-  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
   .btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, var(--ink)); filter: none; }
   :root[data-theme-scheme="mint"] .btn.primary {
     background: color-mix(in srgb, var(--accent) 78%, var(--sheet-2));
@@ -1452,6 +1460,15 @@
     font-family: var(--sans);
     font-size: 13px;
   }
+  select.field:not([multiple]):not([size]) {
+    appearance: none;
+    padding-right: 36px;
+    background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
+      linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
+    background-position: right 18px center, right 14px center;
+    background-size: 4px 4px;
+    background-repeat: no-repeat;
+  }
   input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--border-strong); }
   .fieldrow .fieldlabel { margin-bottom: 6px; color: var(--muted-foreground); font-size: 11px; letter-spacing: 0; text-transform: none; }
   .segwrap { gap: 2px; padding: 2px; background: var(--surface-hover); border: 0; border-radius: var(--radius-md); }
@@ -1590,7 +1607,7 @@
   .providerhub .panelslot { display: block; flex: none; padding: 0; overflow: visible; container: none; }
   .providerhub .panelslot { margin-top: 22px; }
   .providerhub .providerchrome > *,
-  .providerhub .panelslot > :not(.viewport-overlay) { max-width: none; }
+  .providerhub .panelslot > :where(:not(.viewport-overlay)) { max-width: none; }
   .providerhub .providerintro .pagetitle { margin: 0; font-size: 18px; }
   .providerhub .providerintro .pagedesc { margin-top: 4px; }
   .providerhub .providerintro .rowbar { margin-top: 10px; }
@@ -1621,7 +1638,7 @@
 
   @media (max-width: 900px) {
     #rail { width: 232px; }
-    .pagehead, .scroll, .subtabs, .liveband, .tlscroll { padding-left: 20px; padding-right: 20px; }
+    :root { --page-gutter: 20px; }
     .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
     .settings-index { position: static; flex-direction: row; overflow-x: auto; }
     .settings-jump { width: auto; white-space: nowrap; }
@@ -1724,5 +1741,92 @@
   .ob-btn:hover:not(:disabled) { background: var(--hover); }
   .ob-btn .icon { width: 14px; height: 14px; }
   .ob-btn:disabled { opacity: .55; cursor: not-allowed; }
-  .ob-btn.ob-go { background: var(--accent); color: var(--on-accent); }
+  .ob-btn.ob-go { background: var(--accent); color: #fff; }
   .ob-btn.ob-go:hover:not(:disabled) { filter: brightness(1.06); }
+.connection-hub{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);gap:24px;align-items:start}
+.connection-index{position:sticky;top:16px;min-width:0;max-height:calc(100vh - 140px);overflow:auto;padding:4px}
+.connection-cards{display:grid;gap:12px;padding:3px}
+.connection-card{min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper);cursor:pointer;transition:background .15s,border-color .15s}
+.connection-card.is-active{border-color:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}
+.connection-card.is-selected{background:color-mix(in srgb,var(--ink) 5%,var(--paper));outline:2px solid var(--ink-dim);outline-offset:1px}
+.connection-name,.connection-kind,.connection-model,.connection-url,.connection-status,.connection-secondary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.connection-name{font:700 17px/1.25 var(--sans)}.connection-kind{margin-top:4px;font:600 11.5px/1.3 var(--sans);color:var(--muted-foreground)}.connection-model{margin-top:9px;font-size:13px}.connection-url{font-size:11px;color:var(--ink-dim);margin-top:3px}
+.connection-status{font-size:12px;margin-top:14px}.connection-secondary{font-size:11px;color:var(--ink-dim)}
+.connection-card .rowbar{margin-top:12px;justify-content:space-between;gap:4px}
+.connection-detail{min-width:0}.connection-detail .sheet{margin-bottom:16px}
+.connection-detail .connection-field{margin-bottom:15px}.connection-detail input:not([type=checkbox]),.connection-detail select,.connection-detail textarea{max-width:100%;width:100%}
+.connection-detail .field-error{color:var(--danger,#b43c38);font-size:12px;min-height:0}.connection-shared{color:var(--ink-dim);font-size:12px;line-height:1.7;margin:20px 0 12px}
+.connection-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.connection-actions .grow{flex:1}
+@media(max-width:760px){.connection-hub{grid-template-columns:1fr}.connection-index{position:static;max-height:320px}.connection-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
+.connection-guard{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--paper);color:var(--ink);max-width:560px;box-shadow:0 12px 60px #0003}
+.connection-guard::backdrop{background:#0005}.connection-guard h3{margin-bottom:20px}
+
+.live-summary { flex-wrap:wrap; }
+.live-connection { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:48%; background:none; border:0; color:var(--ink-soft); cursor:pointer; padding:0; font:11.5px/1 var(--sans); }
+.live-connection-label { flex-shrink:0; }
+.live-connection-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 8px; border-radius:7px; background:var(--hover); border:1px solid var(--border); color:var(--ink-blue); font-weight:600; }
+.live-connection:hover .live-connection-value { border-color:var(--accent); }
+.live-connection:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:7px; }
+@media(max-width:760px) { .live-connection { max-width:100%; margin-left:auto; } }
+
+.connection-detail .msgline:not(.bad) { color:var(--ink-soft); }
+.connection-detail .tdesc { margin:6px 0 12px; }
+
+/* Page headings stay above the shared content origin while each page scrolls. */
+.featureslot:has(> .featureintro) { padding-top:0; }
+.featureintro { padding-bottom:16px; border-bottom:1px solid var(--border); }
+.featureslot > .featureintro { position:sticky; top:0; z-index:20; padding-top:30px; margin-bottom:24px; background:var(--background); }
+.featureslot > .featureintro + * { margin-top:0; }
+.featureslot > .featureintro + .sheet { margin-top:0; }
+.providerchrome { padding-bottom:0; }
+.providerchrome + .panelslot { padding-top:24px; }
+.coreview > .pagehead { padding-bottom:16px; }
+.connection-index { padding-top:0; top:100px; }
+.connection-detail > div > div:first-child > .sheet:first-child { padding-top:0; }
+.connection-hub .btn { border:1px solid var(--border-strong); }
+.connection-hub .btn:hover { border-color:var(--ink-soft); }
+.connection-hub .btn.danger { border-color:currentColor; }
+.connection-hub .btn.primary, .connection-hub .btn.primary:hover { color:#fff; border-color:var(--accent); }
+.connection-module-readonly:disabled { opacity:1; background-color:var(--surface); color:var(--foreground); cursor:default; }
+.field-note, .tdesc, .trow .tdesc, .sheet .sh-desc, .pagedesc, p.muted, small.muted,
+.connection-detail .msgline:not(.bad), .connection-shared {
+  font:var(--text-detail)/1.55 var(--sans); color:var(--muted-foreground);
+}
+.field-note { margin:10px 0; }
+.field-note:empty { display:none; }
+.pricing-rules, .pricing-snapshot { margin-top:16px; }
+.pricing-rules > textarea, .pricing-snapshot > pre { margin-top:10px; }
+
+.coreview > .pagehead { position:relative; border-bottom:0; }
+.coreview > .pagehead::after { content:''; position:absolute; bottom:0; left:var(--page-gutter); right:var(--page-gutter); height:1px; background:var(--border); }
+.coreview > .subtabs { margin-top:24px; }
+
+.providerchrome > .featureintro + * { margin-top: 24px; }
+.providerchrome > .pagedesc { margin-bottom: 10px; }
+.providerchrome > .rowbar { margin-bottom: 10px; }
+.coreview > .scroll { scrollbar-gutter: auto; }
+.panelslot > :first-child > .sheet:first-child { padding-top: 0; }
+
+/* 卡片上的删除与探活。 */
+.connection-create { margin-bottom:16px; }
+.connection-create-hint { margin:7px 2px 0; font:var(--text-detail)/1.5 var(--sans); color:var(--muted-foreground); }
+.connection-create > .btn { width:100%; }
+.connection-card { position:relative; }
+.connection-erase { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:0; height:26px; padding:0 6px; border:1px solid transparent; border-radius:8px; background:none; color:var(--ink-dim); cursor:pointer; transition:color .14s ease, background .14s ease, border-color .14s ease, gap .18s ease; }
+.connection-erase .icon { width:14px; height:14px; flex:none; }
+.connection-erase:hover { color:var(--danger,#b43c38); background:var(--hover); }
+.connection-erase-text { display:grid; grid-template-columns:0fr; overflow:hidden; font:600 12px/1 var(--sans); white-space:nowrap; transition:grid-template-columns .18s ease; }
+.connection-erase-text > span { overflow:hidden; }
+.connection-erase.is-armed { gap:6px; color:var(--danger,#b43c38); border-color:currentColor; background:var(--paper); }
+.connection-erase.is-armed .connection-erase-text { grid-template-columns:1fr; }
+.connection-name { padding-right:34px; }
+.connection-probe-btn .connection-spin { display:none; width:12px; height:12px; margin-left:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:connection-spin .7s linear infinite; }
+.connection-probe-btn.is-busy .connection-spin { display:inline-block; }
+@keyframes connection-spin { to { transform:rotate(360deg); } }
+.connection-probe { display:grid; grid-template-rows:0fr; margin-top:0; transition:grid-template-rows .2s ease, margin-top .2s ease, opacity .2s ease; opacity:0; }
+.connection-probe.is-open { grid-template-rows:1fr; margin-top:12px; opacity:1; }
+.connection-probe-body { overflow:hidden; }
+.connection-probe .sheet { margin:0; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
+.connection-probe .kvtable td { padding:3px 0; font-size:11.5px; word-break:break-word; }
+.connection-probe .kvtable td:first-child { padding-right:8px; color:var(--muted-foreground); white-space:nowrap; }
+.connection-probe > .connection-probe-body > .btn { margin-top:8px; }