@narumitw/pi-inspect 0.0.0-stage → 0.1.0

package/src/web/composition.css

@@ -0,0 +1,554 @@
+/* Composition owns the editorial presentation; existing diagnostic controls remain secondary. */
+.inspector-app.light {
+  --app-bg: #f5f2eb;
+  --panel-bg: #faf8f3;
+  --panel-raised: #eeebe4;
+  --surface-hover: #e9e6de;
+  --panel-border: #dedbd4;
+  --secondary: #63676e;
+  --muted: #676b72;
+  --code-bg: #eeebe4;
+  --selected-bg: #638dd119;
+  --gray-12: #343741;
+}
+.inspector-app.dark {
+  --app-bg: #202327;
+  --panel-bg: #26292e;
+  --panel-raised: #30343a;
+  --surface-hover: #353a41;
+  --panel-border: #41454d;
+  --secondary: #c0c3ca;
+  --muted: #a0a4ad;
+  --code-bg: #2e3237;
+  --selected-bg: #638dd124;
+}
+.inspector-app {
+  --system-bg: #e6deeb;
+  --system-fg: #705487;
+  --user-bg: #dee8f5;
+  --user-fg: #355f98;
+  --assistant-bg: #e0e9df;
+  --assistant-fg: #466b52;
+  --tool-call-bg: #f4e5d6;
+  --tool-call-fg: #946035;
+  --tool-result-bg: #e2e7ea;
+  --tool-result-fg: #4c6371;
+  --other-bg: #eeebe4;
+  --other-fg: #696d73;
+  --default-font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font: 13px / 1.5 var(--default-font-family);
+}
+.inspector-app.dark {
+  --system-bg: #393440;
+  --system-fg: #c6afd8;
+  --user-bg: #2d394c;
+  --user-fg: #a7bfdf;
+  --assistant-bg: #313f34;
+  --assistant-fg: #b1cdb4;
+  --tool-call-bg: #47392f;
+  --tool-call-fg: #dfb58a;
+  --tool-result-bg: #333d43;
+  --tool-result-fg: #b7cbd4;
+  --other-bg: #35383d;
+  --other-fg: #c0c3ca;
+}
+.app-header {
+  height: 64px;
+  padding: 0 28px;
+}
+.brand-logo {
+  width: 36px;
+  height: 36px;
+  background: #b7cbea;
+  color: #343741;
+  border-radius: 8px;
+}
+.brand .rt-Heading {
+  font-size: 18px;
+  font-weight: 600;
+}
+.header-context {
+  border-left: 1px solid var(--panel-border);
+  padding-left: 20px;
+  font-size: 12px;
+}
+.header-actions .rt-Badge {
+  border-radius: 20px;
+  padding: 6px 12px;
+}
+.app-grid {
+  padding: 18px 28px 6px;
+}
+.app-footer {
+  height: 34px;
+  font-size: 11px;
+  padding: 0 28px;
+}
+.surface-switch,
+.context-filters {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  min-width: 0;
+}
+.surface-switch {
+  display: flex;
+  gap: 4px;
+}
+.surface-switch button,
+.context-filters button {
+  border: 1px solid var(--panel-border);
+  background: var(--panel-bg);
+  color: var(--secondary);
+  border-radius: 6px;
+  padding: 7px 10px;
+  font-size: 11px;
+  white-space: nowrap;
+}
+.surface-switch button[aria-pressed="true"],
+.context-filters button[aria-pressed="true"] {
+  background: var(--user-bg);
+  color: var(--gray-12);
+}
+.context-surface,
+.events-surface {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+.context-surface[hidden],
+.events-surface[hidden] {
+  display: none;
+}
+.context-composition {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.composition-heading {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding-bottom: 9px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+.composition-heading > div:first-child {
+  margin-right: auto;
+}
+.composition-heading .rt-Heading {
+  font-size: 23px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+}
+.composition-count {
+  display: block;
+  color: var(--muted);
+  font-size: 11px;
+  margin-top: 2px;
+}
+.composition-heading .rt-TextFieldRoot {
+  width: 240px;
+  background: var(--panel-bg);
+  box-shadow: none;
+  border: 1px solid var(--panel-border);
+}
+.context-filters {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.context-provenance {
+  color: var(--secondary);
+  font-size: 10px;
+  padding-bottom: 12px;
+  max-width: 100%;
+  flex-shrink: 0;
+}
+.context-provenance strong {
+  font-weight: 500;
+  color: var(--amber-11);
+}
+.composition-body {
+  display: flex;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+}
+.context-scroll {
+  overflow-anchor: none;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--panel-border) transparent;
+}
+.virtual-segments {
+  position: relative;
+  min-width: 0;
+}
+.context-segment {
+  position: absolute;
+  width: 100%;
+  padding: 0 2px 8px 25px;
+  --role-bg: var(--other-bg);
+  --role-fg: var(--other-fg);
+}
+[data-category="system"] {
+  --role-bg: var(--system-bg);
+  --role-fg: var(--system-fg);
+}
+[data-category="user"] {
+  --role-bg: var(--user-bg);
+  --role-fg: var(--user-fg);
+}
+[data-category="assistant"] {
+  --role-bg: var(--assistant-bg);
+  --role-fg: var(--assistant-fg);
+}
+[data-category="toolCall"] {
+  --role-bg: var(--tool-call-bg);
+  --role-fg: var(--tool-call-fg);
+}
+[data-category="toolResult"] {
+  --role-bg: var(--tool-result-bg);
+  --role-fg: var(--tool-result-fg);
+}
+[data-category="other"] {
+  --role-bg: var(--other-bg);
+  --role-fg: var(--other-fg);
+}
+.context-segment::before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid var(--panel-border);
+}
+.context-segment::after {
+  content: "";
+  position: absolute;
+  left: 6px;
+  top: 20px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--role-fg);
+  opacity: 0.65;
+}
+.segment-row {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 44px;
+  padding: 8px 13px;
+  background: var(--role-bg);
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--gray-12);
+  cursor: pointer;
+}
+.segment-row:hover {
+  border-color: color-mix(in srgb, var(--role-fg), transparent 55%);
+}
+.segment-row.selected {
+  border-color: #638dd1;
+}
+.segment-row:focus-visible {
+  outline: 2px solid #426fa9;
+  outline-offset: -2px;
+}
+.segment-position {
+  width: 44px;
+  font-size: 11px;
+  color: var(--secondary);
+  border-right: 1px solid color-mix(in srgb, var(--role-fg), transparent 80%);
+  flex-shrink: 0;
+}
+.segment-row .event-glyph {
+  color: var(--role-fg);
+  width: 23px;
+}
+.segment-row .event-glyph svg {
+  width: 21px;
+  height: 21px;
+}
+.segment-row strong {
+  text-transform: uppercase;
+  width: 172px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.segment-preview {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.segment-row time {
+  color: var(--secondary);
+  font-size: 11px;
+  width: 72px;
+  flex-shrink: 0;
+}
+.segment-chevron {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.segment-details {
+  display: grid;
+  grid-template-columns: minmax(230px, 28%) minmax(0, 1fr);
+  gap: 18px;
+  padding: 16px;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-top: 0;
+  border-radius: 0 0 7px 7px;
+}
+.message-details {
+  border-right: 1px solid var(--panel-border);
+  padding-right: 16px;
+  min-width: 0;
+}
+.message-details h3 {
+  font-size: 12px;
+  font-weight: 600;
+  margin: 0 0 14px;
+}
+.message-details .metadata {
+  font-size: 12px;
+  line-height: 20px;
+}
+.message-details .metadata > div {
+  grid-template-columns: 94px minmax(0, 1fr);
+  gap: 10px;
+  padding: 6px 0;
+}
+.segment-content {
+  min-width: 0;
+}
+.segment-content .data {
+  border: 0;
+  border-radius: 5px;
+  background: var(--panel-raised);
+  margin: 0 0 8px;
+  padding: 5px 10px;
+}
+.segment-content .data:first-child {
+  background: transparent;
+  border: 1px solid var(--panel-border);
+}
+.segment-content .code-preview {
+  background: var(--panel-raised);
+  font-size: 12px;
+}
+.segment-content .section-toggle {
+  font-size: 12px;
+}
+.segment-content .data:has(.section-toggle[aria-expanded="false"]) .copy-button {
+  display: none;
+}
+.segment-content .data-mode {
+  font-size: 10px;
+}
+.context-minimap {
+  width: 24px;
+  padding: 5px;
+  border: 1px solid var(--panel-border);
+  border-radius: 7px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  overflow-y: auto;
+  flex-shrink: 0;
+  align-self: stretch;
+  scrollbar-width: none;
+}
+.context-minimap button {
+  display: flex;
+  min-height: 5px;
+  flex: 1;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 1px;
+  background: var(--other-bg);
+}
+.context-minimap button span {
+  display: block;
+  align-self: stretch;
+  background: var(--role-bg);
+  min-width: 1px;
+}
+.context-minimap button[aria-current="true"] {
+  outline: 1px solid #638dd1;
+  outline-offset: 1px;
+}
+.composition-footer {
+  display: flex;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 10px;
+  padding: 10px 0 5px 25px;
+  flex-shrink: 0;
+  gap: 12px;
+}
+.provider-observation {
+  flex-shrink: 0;
+  font-size: 10px;
+  color: var(--secondary);
+  max-height: 25vh;
+  overflow: auto;
+  padding: 5px;
+}
+.provider-observation summary {
+  cursor: pointer;
+}
+.live-drawer {
+  border: 0;
+  border-top: 1px solid var(--panel-border);
+  border-radius: 0;
+  background: transparent;
+}
+.live-drawer-toggle {
+  padding: 6px 5px;
+}
+@media (max-width: 1100px) {
+  .app-header {
+    padding: 0 16px;
+  }
+  .app-grid {
+    padding: 14px 16px 5px;
+  }
+  .composition-heading {
+    gap: 10px;
+  }
+  .composition-heading .rt-TextFieldRoot {
+    width: 210px;
+  }
+  .segment-row {
+    gap: 10px;
+  }
+  .segment-row strong {
+    width: 135px;
+  }
+  .segment-details {
+    grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
+    gap: 12px;
+  }
+}
+@media (max-width: 680px) {
+  .app-header {
+    height: 80px;
+    padding: 6px 8px;
+    gap: 3px;
+    flex-wrap: wrap;
+  }
+  .app-header .brand {
+    width: 100%;
+  }
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  .brand .rt-Heading {
+    font-size: 12px;
+  }
+  .brand-logo {
+    width: 24px;
+    height: 24px;
+    font-size: 21px;
+  }
+  .surface-switch button {
+    font-size: 9px;
+    padding: 5px;
+  }
+  .header-actions {
+    gap: 2px;
+  }
+  .header-actions .rt-Badge:first-of-type {
+    display: inline-flex;
+    font-size: 9px;
+    padding: 3px 6px;
+  }
+  .app-grid {
+    padding: 12px 8px 4px;
+  }
+  .composition-heading .rt-Heading {
+    font-size: 19px;
+  }
+  .composition-heading .rt-TextFieldRoot {
+    width: 100%;
+  }
+  .context-provenance {
+    font-size: 9px;
+  }
+  .context-segment {
+    padding-left: 12px;
+  }
+  .context-segment::before {
+    left: 3px;
+  }
+  .context-segment::after {
+    left: 0;
+    width: 6px;
+    height: 6px;
+  }
+  .segment-row {
+    display: grid;
+    grid-template-columns: 28px 20px minmax(0, 1fr) 14px;
+    gap: 6px;
+  }
+  .segment-row strong {
+    width: auto;
+    font-size: 10px;
+  }
+  .segment-position {
+    width: 28px;
+  }
+  .segment-preview {
+    grid-column: 3;
+    font-size: 11px;
+  }
+  .segment-chevron {
+    grid-column: 4;
+    grid-row: 1;
+  }
+  .segment-row time {
+    display: none;
+  }
+  .segment-details {
+    display: block;
+    padding: 10px;
+  }
+  .message-details {
+    border: 0;
+    padding: 0 0 10px;
+  }
+  .context-minimap {
+    width: 18px;
+    padding: 3px;
+  }
+  .composition-footer {
+    font-size: 9px;
+    padding-left: 12px;
+  }
+  .composition-footer span:first-child {
+    display: none;
+  }
+  .app-footer {
+    padding: 0 8px;
+  }
+}