feat: improve model catalog aggregation

apps/web/src/styles.css

@@ -34,14 +34,14 @@
   --color-text-strong: var(--text-strong);
   --color-text-normal: var(--text-normal);
   --color-text-soft: var(--text-soft);
-  --text-xs: 12px;
-  --text-sm: 13px;
-  --text-base: 14px;
-  --text-md: 15px;
-  --text-lg: 16px;
-  --text-xl: 18px;
-  --text-2xl: 22px;
-  --text-3xl: 30px;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-md: 0.9375rem;
+  --text-lg: 1rem;
+  --text-xl: 1.125rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.875rem;
   --radius-sm: 7px;
   --radius-md: 8px;
   --radius-lg: 10px;
@@ -144,7 +144,7 @@ p {
 
 h1 {
   color: var(--text-strong);
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: var(--font-weight-semibold);
   line-height: 1.15;
 }
@@ -163,7 +163,7 @@ strong {
 .eyebrow {
   margin-bottom: 5px;
   color: var(--muted-foreground);
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
@@ -224,21 +224,162 @@ strong {
   gap: 14px;
 }
 
-.taskList {
+.taskRecordFilters {
+  grid-template-columns: minmax(240px, 1.4fr) minmax(150px, 0.65fr) minmax(330px, 1.2fr) auto;
+  gap: 10px;
+}
+
+.taskRecordRangeLabel {
+  min-width: 0;
+}
+
+.taskRecordViewport {
+  --sh-table-viewport-gap: 10px;
+  --sh-table-viewport-height: calc(100dvh - 90px);
+  margin-bottom: -52px;
+}
+
+.taskRecordSearchBox {
   display: grid;
-  gap: 14px;
-}
-
-.taskRecordHeader {
-  display: flex;
-  flex-wrap: wrap;
+  grid-template-columns: 18px minmax(0, 1fr);
   align-items: center;
-  gap: 8px 12px;
-  color: var(--muted-foreground);
+  gap: 8px;
+  min-height: 32px;
+  padding-left: 10px;
+  border: 1px solid var(--input);
+  border-radius: var(--control-radius);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
 }
 
-.taskRecordHeader strong {
+.taskRecordSearchBox svg {
+  color: var(--text-soft);
+}
+
+.taskRecordSearchBox .shInput {
+  border: 0;
+  box-shadow: none;
+}
+
+.taskRecordTable .shTableRow {
+  grid-template-columns: minmax(190px, 0.95fr) minmax(220px, 1.05fr) minmax(94px, 0.42fr) minmax(280px, 1.55fr) minmax(126px, 0.58fr) minmax(150px, 0.7fr) minmax(154px, 0.66fr) minmax(82px, 0.38fr) minmax(98px, 0.45fr) minmax(150px, 0.7fr) minmax(130px, 0.58fr);
+  min-width: 1674px;
+  align-items: start;
+}
+
+.taskRecordPrimaryCell {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.taskRecordPrimaryCell strong,
+.taskRecordPrimaryCell small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskRecordPrimaryCell strong {
   color: var(--text-strong);
+  font-weight: var(--font-weight-semibold);
+}
+
+.taskRecordPrimaryCell small {
+  color: var(--text-soft);
+  font-size: var(--font-size-xs);
+}
+
+.taskRecordIdentityCell {
+  gap: 6px;
+}
+
+.taskRecordIdLine,
+.taskRecordRequestLine {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+}
+
+.taskRecordIdLine {
+  grid-template-columns: 28px minmax(0, 1fr);
+}
+
+.taskRecordRequestLine {
+  grid-template-columns: minmax(0, 1fr) 28px;
+}
+
+.taskRecordIdLine > span {
+  color: var(--text-soft);
+  font-size: var(--font-size-xs);
+}
+
+.taskRecordIdLine code,
+.taskRecordRequestLine code {
+  overflow: hidden;
+  min-width: 0;
+  color: var(--text-normal);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.taskRecordRequestLine .shButton {
+  width: 28px;
+  min-height: 28px;
+}
+
+.taskRecordTokenCell {
+  overflow: visible;
+  white-space: normal;
+}
+
+.taskRecordTokenUsage {
+  display: grid;
+  gap: 2px;
+  line-height: 1.3;
+}
+
+.taskRecordModelCell {
+  overflow: visible;
+  white-space: normal;
+}
+
+.taskRecordModelCell .taskRecordPrimaryCell strong,
+.taskRecordModelCell .taskRecordPrimaryCell small {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.taskRecordJsonButton {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.taskJsonDialog {
+  width: min(920px, 100%);
+}
+
+.taskJsonDialogBody {
+  grid-template-columns: minmax(0, 1fr);
+  padding: 0;
+}
+
+.taskJsonPreview {
+  overflow: auto;
+  max-height: min(620px, calc(100vh - 188px));
+  margin: 0;
+  padding: 16px 18px;
+  background: var(--surface-subtle);
+  color: var(--text-normal);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .appShell {
@@ -465,7 +606,7 @@ strong {
   display: block;
   margin-top: 10px;
   color: var(--text-strong);
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
 }
@@ -526,4 +667,17 @@ strong {
   .tokenInline input {
     width: 100%;
   }
+
+  .taskRecordFilters {
+    grid-template-columns: 1fr;
+  }
+
+  .shTableFooter {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .shTablePageActions {
+    flex-wrap: wrap;
+  }
 }