@opentrace/components 0.1.1-rc.30 → 0.1.1-rc.44

package/dist/components.css

@@ -1,3 +1,1144 @@
+/*
+ * Copyright 2026 OpenTrace Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* ── Backdrop ─────────────────────────────────── */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+/* ── Card ─────────────────────────────────────── */
+.modal-card {
+  background: var(--card);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  border-radius: calc(var(--radius) + 8px);
+  padding: 36px 32px 28px;
+  width: 460px;
+  max-width: 90vw;
+  box-shadow: var(--shadow-xl);
+  animation: modalEnter 0.25s ease-out;
+}
+
+.modal-card-wide {
+  width: 520px;
+  min-height: 340px;
+  overflow: hidden;
+}
+
+@keyframes modalEnter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-card h2 {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+/* ── CTA Button ──────────────────────────────── */
+.btn-cta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 14px 24px;
+  margin-top: 16px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--primary-foreground);
+  background: var(--primary);
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    transform 0.1s;
+}
+
+.btn-cta:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--primary) 85%, black);
+}
+
+.btn-cta:active:not(:disabled) {
+  transform: scale(0.985);
+}
+
+.btn-cta:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-cta--secondary {
+  background: color-mix(in oklch, var(--foreground) 10%, transparent);
+  color: var(--foreground);
+}
+
+.btn-cta--secondary:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--foreground) 15%, transparent);
+}
+
+.btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid
+    color-mix(in oklch, var(--primary-foreground) 30%, transparent);
+  border-top-color: var(--primary-foreground);
+  border-radius: 50%;
+  animation: btnSpin 0.6s linear infinite;
+}
+
+@keyframes btnSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Mobile (≤ 640px): tighter modal layout ── */
+@media (max-width: 640px) {
+  .modal-card {
+    padding: 24px 20px 20px;
+  }
+
+  .btn-cta {
+    min-height: 48px;
+  }
+}
+/*
+ * Copyright 2026 OpenTrace Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* ── Chip Toggle (URL / Directory) ─────────────── */
+.chip-toggle {
+  display: inline-flex;
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.chip-toggle-btn {
+  padding: 6px 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.chip-toggle-btn + .chip-toggle-btn {
+  border-left: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+}
+
+.chip-toggle-btn:hover:not(.active) {
+  color: var(--foreground);
+}
+
+.chip-toggle-btn.active {
+  color: var(--primary);
+  background: color-mix(in oklch, var(--primary) 10%, transparent);
+  font-weight: 600;
+}
+
+/* ── Source Toggle ───────────────────────────── */
+.source-toggle {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* ── Form Hero (centered icon + title) ───────── */
+.form-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.hero-icon {
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background: color-mix(in oklch, var(--foreground) 10%, transparent);
+  color: var(--foreground);
+  margin-bottom: 16px;
+  position: relative;
+  overflow: hidden;
+  transition:
+    background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hero-icon--provider {
+  background: color-mix(in oklch, var(--primary) 15%, transparent);
+  color: var(--primary);
+}
+
+/* --- Quad-split provider icon --- */
+
+/* Each icon layer fills the hero-icon, clipped to its quadrant */
+.quad-layer {
+  position: absolute;
+  inset: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* X-shaped divider lines overlay */
+.quad-dividers {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.quad-dividers--hidden {
+  opacity: 0;
+}
+
+.form-hero h2 {
+  margin: 0 0 6px;
+  font-size: 1.2rem;
+}
+
+.hero-subtitle {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--muted-foreground);
+  line-height: 1.45;
+}
+
+/* ── Pill Inputs ─────────────────────────────── */
+.form-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.input-pill {
+  display: block;
+  width: 100%;
+  padding: 14px 18px;
+  font-size: 0.88rem;
+  color: var(--foreground);
+  background: color-mix(in oklch, var(--foreground) 5%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+  border-radius: 14px;
+  outline: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+  box-sizing: border-box;
+}
+
+.input-pill:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 10%, transparent);
+}
+
+.input-pill::placeholder {
+  color: var(--muted-foreground);
+  opacity: 0.55;
+}
+
+/* Pill row with inline icons */
+.input-pill-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-pill-row .input-icon {
+  position: absolute;
+  left: 14px;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.input-pill--icon {
+  padding-left: 42px;
+  padding-right: 42px;
+}
+
+.input-toggle {
+  position: absolute;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+  cursor: pointer;
+  transition:
+    opacity 0.15s,
+    background 0.15s;
+}
+
+.input-toggle:hover {
+  opacity: 0.8;
+  background: color-mix(in oklch, var(--foreground) 6%, transparent);
+}
+
+/* ── Autocomplete Dropdown ─────────────────── */
+.autocomplete-wrapper {
+  position: relative;
+}
+
+.autocomplete-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: var(--card);
+  border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
+  border-radius: 12px;
+  padding: 4px;
+  box-shadow: var(--shadow-xl);
+  animation: dropdownEnter 0.15s ease-out;
+}
+
+@keyframes dropdownEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.autocomplete-label {
+  padding: 6px 10px 4px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+  opacity: 0.6;
+}
+
+.autocomplete-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 0.82rem;
+  color: var(--foreground);
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.autocomplete-item:hover {
+  background: color-mix(in oklch, var(--foreground) 6%, transparent);
+}
+
+.autocomplete-item svg {
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+}
+
+.autocomplete-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.autocomplete-item-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--muted-foreground);
+  opacity: 0;
+  cursor: pointer;
+  transition:
+    opacity 0.15s,
+    background 0.15s,
+    color 0.15s;
+}
+
+.autocomplete-item:hover .autocomplete-item-remove {
+  opacity: 0.5;
+}
+
+.autocomplete-item-remove:hover {
+  opacity: 1 !important;
+  background: color-mix(in oklch, var(--destructive) 12%, transparent);
+  color: var(--destructive);
+}
+
+/* ── Example Repos ──────────────────────────── */
+.example-repos {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.example-repos-label {
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  opacity: 0.7;
+}
+
+.example-repo-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  background: color-mix(in oklch, var(--foreground) 5%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.example-repo-chip:hover {
+  color: var(--primary);
+  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
+  background: color-mix(in oklch, var(--primary) 8%, transparent);
+}
+
+.example-repo-size {
+  margin-left: 6px;
+  padding: 1px 5px;
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border-radius: 4px;
+  line-height: 1.3;
+}
+
+.example-repo-size--s {
+  color: #4ade80;
+  background: color-mix(in oklch, #4ade80 12%, transparent);
+}
+
+.example-repo-size--m {
+  color: #fbbf24;
+  background: color-mix(in oklch, #fbbf24 12%, transparent);
+}
+
+.example-repo-size--l {
+  color: #f87171;
+  background: color-mix(in oklch, #f87171 12%, transparent);
+}
+
+/* ── Directory Picker ───────────────────────── */
+.directory-picker {
+  position: relative;
+}
+
+.directory-input {
+  /* Hidden native file input */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.directory-browse-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  text-align: left;
+  color: var(--muted-foreground);
+  transition:
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.directory-browse-btn:hover {
+  border-color: var(--primary);
+  color: var(--foreground);
+}
+
+.directory-browse-btn svg {
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.directory-name {
+  color: var(--foreground);
+  font-weight: 500;
+}
+
+.directory-count {
+  color: var(--muted-foreground);
+  font-weight: 400;
+}
+
+/* ── Form Error ──────────────────────────────── */
+.form-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-top: 10px;
+  font-size: 0.8rem;
+  color: var(--destructive);
+  background: color-mix(in oklch, var(--destructive) 8%, transparent);
+  border: 1px solid color-mix(in oklch, var(--destructive) 20%, transparent);
+  border-radius: 10px;
+}
+
+.form-error svg {
+  flex-shrink: 0;
+}
+
+/* ── Already Indexed Notice ──────────────────── */
+.form-indexed {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-top: 10px;
+  font-size: 0.8rem;
+  color: oklch(0.7 0.18 155);
+  background: color-mix(in oklch, oklch(0.7 0.18 155) 8%, transparent);
+  border: 1px solid color-mix(in oklch, oklch(0.7 0.18 155) 20%, transparent);
+  border-radius: 10px;
+}
+
+.form-indexed svg {
+  flex-shrink: 0;
+}
+
+.form-indexed strong {
+  font-weight: 600;
+}
+
+/* ── Form Info (warnings / informational notices) ── */
+.form-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-top: 6px;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: color-mix(in oklch, var(--foreground) 70%, transparent);
+  background: color-mix(in oklch, var(--foreground) 4%, transparent);
+  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
+  border-radius: 10px;
+}
+
+.form-info svg {
+  flex-shrink: 0;
+  margin-top: 1px;
+  opacity: 0.6;
+}
+
+/* ── Bottom Chips ────────────────────────────── */
+.form-chips {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  background: transparent;
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.chip:hover {
+  border-color: color-mix(in oklch, var(--border) 60%, transparent);
+  color: var(--foreground);
+}
+
+.chip svg {
+  opacity: 0.6;
+}
+
+.chip-input {
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--foreground);
+  width: 90px;
+  padding: 0;
+  margin: 0;
+}
+
+.chip-input::placeholder {
+  color: var(--muted-foreground);
+  opacity: 0.7;
+}
+
+/* ── Mobile (≤ 640px) ────────────────────────── */
+@media (max-width: 640px) {
+  .autocomplete-dropdown {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .chip-toggle-btn {
+    min-height: 44px;
+  }
+}
+/*
+ * Copyright 2026 OpenTrace Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* ── Indexing Header (icon + title) ──────────── */
+.indexing-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.indexing-header h2 {
+  margin: 0;
+}
+
+.indexing-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--foreground) 8%, transparent);
+  color: var(--foreground);
+  flex-shrink: 0;
+}
+
+/* ── Indexing Progress ───────────────────────── */
+.indexing-progress {
+  text-align: center;
+  padding: 12px 0;
+}
+
+.indexing-progress h2 {
+  margin-bottom: 20px;
+}
+
+.indexing-message {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+  margin: 16px 0;
+}
+
+.indexing-message--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.indexing-message--detail {
+  font-size: 0.75rem;
+  opacity: 0.7;
+  margin-top: -8px;
+}
+
+/* ── Multi-Stage Progress ────────────────────── */
+.multi-stage-progress {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  text-align: left;
+}
+
+.stage-row {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 0 4px;
+  margin-bottom: 10px;
+  max-height: 70px;
+  opacity: 1;
+  overflow: hidden;
+  transition:
+    opacity 0.5s ease,
+    max-height 0.4s ease 0.15s,
+    gap 0.4s ease 0.15s,
+    margin 0.4s ease 0.15s;
+}
+
+.stage-row:last-child {
+  margin-bottom: 0;
+}
+
+.stage-row--completed {
+  opacity: 0.35;
+}
+
+.stage-row--removing {
+  opacity: 0;
+  max-height: 0;
+  gap: 0;
+  padding: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.stage-row--active .stage-label {
+  color: var(--foreground);
+}
+
+.stage-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.stage-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  white-space: nowrap;
+}
+
+.stage-count {
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.stage-detail {
+  font-size: 0.65rem;
+  color: var(--muted-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1;
+}
+
+.stage-row--active .stage-detail {
+  color: color-mix(in oklch, var(--foreground) 65%, transparent);
+}
+
+.stage-row--completed .stage-detail {
+  font-size: 0.62rem;
+}
+
+.stage-bar {
+  height: 5px;
+  background: color-mix(in oklch, var(--foreground) 8%, transparent);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.stage-bar-fill {
+  display: block;
+  height: 100%;
+  background: var(--primary);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.stage-row--completed .stage-bar-fill {
+  background: oklch(0.7 0.18 155);
+}
+
+.stage-bar--indeterminate .stage-bar-fill {
+  width: 40%;
+  animation: indeterminate-slide 1.4s ease-in-out infinite;
+}
+
+@keyframes indeterminate-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+
+/* ── Stats Grid ──────────────────────────────── */
+.indexing-stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 14px 12px;
+  background: color-mix(in oklch, var(--primary) 6%, transparent);
+  border: 1px solid color-mix(in oklch, var(--primary) 15%, transparent);
+  border-radius: var(--radius);
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  margin-top: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ── Failed Stage ─────────────────────────────── */
+.failed-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.failed-icon {
+  color: var(--destructive);
+  animation: doneAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.failed-content h2 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--destructive);
+}
+
+.failed-message {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--muted-foreground);
+  line-height: 1.45;
+  max-width: 360px;
+}
+
+/* ── Done Stage ──────────────────────────────── */
+.done-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.done-content h2 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: oklch(0.7 0.18 155);
+}
+
+.done-checkmark {
+  color: oklch(0.7 0.18 155);
+  animation: doneAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.done-check-path {
+  animation: checkDraw 0.3s ease-out 0.3s both;
+}
+
+@keyframes doneAppear {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  70% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes checkDraw {
+  0% {
+    opacity: 0;
+    stroke-dasharray: 20;
+    stroke-dashoffset: 20;
+  }
+  100% {
+    opacity: 1;
+    stroke-dasharray: 20;
+    stroke-dashoffset: 0;
+  }
+}
+
+/* ── Step Indicator (legacy) ──────────────────── */
+.step-indicator {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0;
+  margin-bottom: 20px;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.step-circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: 600;
+  position: relative;
+  z-index: 1;
+  transition: all 0.3s ease;
+}
+
+.step-circle.completed {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border: 2px solid var(--primary);
+}
+
+.step-circle.current {
+  background: transparent;
+  color: var(--primary);
+  border: 2px solid var(--primary);
+  animation: stepPulse 2s ease-in-out infinite;
+}
+
+.step-circle.future {
+  background: transparent;
+  color: var(--muted-foreground);
+  border: 2px solid color-mix(in oklch, var(--border) 50%, transparent);
+}
+
+.step-circle.failed {
+  background: var(--destructive);
+  color: white;
+  border: 2px solid var(--destructive);
+}
+
+.step-number {
+  line-height: 1;
+}
+
+.step-label {
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  margin-top: 6px;
+  white-space: nowrap;
+}
+
+.step-circle.completed + .step-label,
+.step-circle.current + .step-label {
+  color: var(--foreground);
+}
+
+.step-connector {
+  position: absolute;
+  top: 14px;
+  right: calc(50% + 14px);
+  width: calc(100% - 28px);
+  height: 2px;
+  background: color-mix(in oklch, var(--border) 50%, transparent);
+  z-index: 0;
+  transition: background 0.3s ease;
+}
+
+.step-connector.completed {
+  background: var(--primary);
+}
+
+@keyframes stepPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 40%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 6px color-mix(in oklch, var(--primary) 0%, transparent);
+  }
+}
+
+/* ── Error Card ──────────────────────────────── */
+.indexing-error {
+  margin-top: 16px;
+  padding: 16px;
+  background: color-mix(in oklch, var(--destructive) 8%, transparent);
+  border: 1px solid color-mix(in oklch, var(--destructive) 25%, transparent);
+  border-radius: var(--radius);
+  text-align: left;
+}
+
+.error-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--destructive);
+  margin-bottom: 8px;
+}
+
+.error-message {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+  margin: 0 0 8px;
+}
+
+.error-list {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+  margin: 0 0 12px;
+  padding-left: 18px;
+}
+
+.error-list li {
+  margin-bottom: 4px;
+}
+
+/* ── Legacy support ──────────────────────────── */
+.modal-error {
+  color: var(--destructive);
+  font-size: 0.8rem;
+  margin: 8px 0;
+}
+
+.btn-cancel {
+  padding: 8px 18px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-radius: var(--radius);
+  border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
+  color: var(--muted-foreground);
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-cancel:hover {
+  background: color-mix(in oklch, var(--border) 20%, transparent);
+}
+
+.btn-cancel:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.indexing-error .btn-cancel {
+  margin-top: 4px;
+}
+
+/* ── Mobile (≤ 640px) ────────────────────────── */
+@media (max-width: 640px) {
+  .indexing-stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
 :root{--sigma-background-color:#fff;--sigma-controls-background-color:#fff;--sigma-controls-background-color-hover:rgba(0,0,0,0.2);--sigma-controls-border-color:rgba(0,0,0,0.2);--sigma-controls-color:#000;--sigma-controls-zindex:100;--sigma-controls-margin:5px;--sigma-controls-size:30px;}div.react-sigma{height:100%;width:100%;position:relative;background:var(--sigma-background-color);}div.sigma-container{height:100%;width:100%;}.react-sigma-controls{position:absolute;z-index:var(--sigma-controls-zindex);border:2px solid var(--sigma-controls-border-color);border-radius:4px;color:var(--sigma-controls-color);background-color:var(--sigma-controls-background-color);}.react-sigma-controls.bottom-right{bottom:var(--sigma-controls-margin);right:var(--sigma-controls-margin);}.react-sigma-controls.bottom-left{bottom:var(--sigma-controls-margin);left:var(--sigma-controls-margin);}.react-sigma-controls.top-right{top:var(--sigma-controls-margin);right:var(--sigma-controls-margin);}.react-sigma-controls.top-left{top:var(--sigma-controls-margin);left:var(--sigma-controls-margin);}.react-sigma-controls:first-child{border-top-left-radius:2px;border-top-right-radius:2px;}.react-sigma-controls:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px;}.react-sigma-control{width:var(--sigma-controls-size);height:var(--sigma-controls-size);line-height:var(--sigma-controls-size);background-color:var(--sigma-controls-background-color);border-bottom:1px solid var(--sigma-controls-border-color);}.react-sigma-control:last-child{border-bottom:none;}.react-sigma-control>*{box-sizing:border-box;}.react-sigma-control>button{display:block;border:none;margin:0;padding:0;width:var(--sigma-controls-size);height:var(--sigma-controls-size);line-height:var(--sigma-controls-size);background-position:center;background-size:50%;background-repeat:no-repeat;background-color:var(--sigma-controls-background-color);clip:rect(0,0,0,0);}.react-sigma-control>button:hover{background-color:var(--sigma-controls-background-color-hover);}.react-sigma-search{background-color:var(--sigma-controls-background-color);}.react-sigma-search label{visibility:hidden;}.react-sigma-search input{color:var(--sigma-controls-color);background-color:var(--sigma-controls-background-color);font-size:1em;width:100%;margin:0;border:none;padding:var(--sigma-controls-margin);box-sizing:border-box;}/*
  * Copyright 2026 OpenTrace Contributors
  *
@@ -244,6 +1385,28 @@
 .graph-badge-sep {
   margin: 0 3px;
 }
+
+/* ── Compact badge (1100px–1300px) ──────────── */
+@media (max-width: 1300px) and (min-width: 1100px) {
+  .graph-badge-total,
+  .graph-badge-label {
+    display: none;
+  }
+
+  .graph-badge {
+    gap: 4px;
+    padding: 0 10px;
+  }
+}
+
+/* ── Hidden badge (1025px–1099px) ───────────── */
+/* Below 1024px the toolbar collapses to burger dropdown where the
+   badge reappears as a full-width menu row, so we stop hiding at 1025px. */
+@media (max-width: 1099px) and (min-width: 1025px) {
+  .graph-badge {
+    display: none;
+  }
+}
 /*
  * Copyright 2026 OpenTrace Contributors
  *
@@ -363,6 +1526,427 @@
  * limitations under the License.
  */
 
+/* ── Toolbar layout ─────────────────────────── */
+
+.ot-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  pointer-events: none;
+}
+
+.ot-toolbar h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: -0.02em;
+  pointer-events: auto;
+}
+
+/* ── Nav (inline on desktop, dropdown on mobile) */
+
+.ot-toolbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  pointer-events: auto;
+}
+
+/* Hidden on desktop */
+.ot-toolbar .ot-menu-label {
+  display: none;
+}
+
+.ot-toolbar .ot-mobile-panel-btn,
+.ot-toolbar .ot-menu-divider {
+  display: none;
+}
+
+/* ── Search placement ──────────────────────── */
+/* Desktop: search inside nav is visible, tablet search is hidden */
+.ot-toolbar .ot-search-tablet {
+  display: none;
+}
+
+.ot-toolbar .ot-search-nav {
+  display: contents;
+}
+
+/* ── Persistent actions ─────────────────────── */
+/* On desktop: hidden here, shown inside nav via .ot-persistent-desktop */
+.ot-toolbar .ot-persistent-mobile {
+  display: none;
+  pointer-events: auto;
+}
+
+.ot-toolbar .ot-persistent-desktop {
+  display: contents;
+}
+
+/* ── Burger button ──────────────────────────── */
+
+.ot-toolbar .ot-burger-btn {
+  display: none;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px;
+  cursor: pointer;
+  color: var(--foreground);
+  pointer-events: auto;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.ot-toolbar .ot-burger-btn:hover {
+  background: var(--accent);
+}
+
+/* ── Search ─────────────────────────────────── */
+
+.ot-toolbar .ot-search-container {
+  position: relative;
+  flex: 1;
+  max-width: 460px;
+  margin: 0 0.5rem;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+}
+
+.ot-toolbar .ot-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  padding-right: 155px;
+  background: color-mix(in oklch, var(--card) 80%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  border-radius: calc(var(--radius) + 2px);
+  color: var(--foreground);
+  font-size: 0.8rem;
+  transition: all 0.2s;
+}
+
+.ot-toolbar .ot-search-input:focus {
+  outline: none;
+  border-color: color-mix(in oklch, var(--primary) 50%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 12%, transparent);
+}
+
+.ot-toolbar .ot-search-input::placeholder {
+  color: var(--muted-foreground);
+}
+
+.ot-toolbar .ot-search-params {
+  position: absolute;
+  right: 56px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  color: var(--muted-foreground);
+  border-left: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  padding-left: 8px;
+}
+
+.ot-toolbar .ot-hops-input {
+  width: 32px;
+  height: 22px;
+  background: color-mix(in oklch, var(--background) 60%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 25%, transparent);
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--foreground);
+  font-size: 0.7rem;
+  padding: 0 4px;
+  text-align: center;
+}
+
+.ot-toolbar .ot-hops-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.ot-toolbar .ot-hops-input::-webkit-inner-spin-button,
+.ot-toolbar .ot-hops-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.ot-toolbar .ot-search-actions {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ot-toolbar .ot-clear-search {
+  background: none;
+  border: none;
+  color: var(--muted-foreground);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 2px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ot-toolbar .ot-clear-search:hover {
+  color: var(--foreground);
+}
+
+.ot-toolbar .ot-search-btn {
+  background: var(--primary);
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--primary-foreground);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+
+.ot-toolbar .ot-search-btn:hover:not(:disabled) {
+  background: color-mix(in oklch, var(--primary) 85%, black);
+}
+
+.ot-toolbar .ot-search-btn:disabled {
+  background: color-mix(in oklch, var(--secondary) 60%, transparent);
+  color: var(--muted-foreground);
+  cursor: not-allowed;
+}
+
+/* ── Reset / Show All button ────────────────── */
+
+.ot-toolbar .ot-reset-btn {
+  pointer-events: auto;
+  background: color-mix(in oklch, var(--card) 80%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+  color: var(--muted-foreground);
+  height: 36px;
+  padding: 0 12px;
+  border-radius: calc(var(--radius) + 2px);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ot-toolbar .ot-reset-btn:hover {
+  background: color-mix(in oklch, var(--primary) 10%, transparent);
+  color: var(--primary);
+  border-color: color-mix(in oklch, var(--primary) 30%, transparent);
+}
+
+/* ── Tablet + Mobile (≤ 1024px): burger dropdown ── */
+
+@media (max-width: 1024px) {
+  .ot-toolbar {
+    flex-wrap: wrap;
+    padding: max(12px, env(safe-area-inset-top))
+      max(16px, env(safe-area-inset-right)) 12px
+      max(16px, env(safe-area-inset-left));
+    gap: 0;
+  }
+
+  /* Tablet search: visible outside the nav at 600–1024px */
+  .ot-toolbar .ot-search-tablet {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    pointer-events: auto;
+  }
+
+  .ot-toolbar .ot-search-tablet .ot-search-container {
+    flex: 1;
+    max-width: none;
+    margin: 0 8px;
+  }
+
+  /* Hide the in-nav copy of search */
+  .ot-toolbar .ot-search-nav {
+    display: none;
+  }
+
+  .ot-toolbar .ot-persistent-mobile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 0;
+    flex-shrink: 0;
+  }
+
+  .ot-toolbar .ot-persistent-desktop {
+    display: none;
+  }
+
+  .ot-toolbar .ot-burger-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+
+  .ot-toolbar-nav {
+    display: none;
+    flex-basis: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) + 2px);
+    padding: 6px 0;
+    margin-top: 8px;
+    pointer-events: auto;
+  }
+
+  .ot-toolbar-nav.open {
+    display: flex;
+  }
+
+  /* Show panel shortcuts and dividers */
+  .ot-toolbar .ot-mobile-panel-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    background: transparent;
+    border: none;
+    color: var(--foreground);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    pointer-events: auto;
+  }
+
+  .ot-toolbar .ot-mobile-panel-btn:hover {
+    background: var(--accent);
+  }
+
+  .ot-toolbar .ot-menu-divider {
+    display: block;
+    height: 1px;
+    background: var(--border);
+    margin: 4px 0;
+  }
+
+  .ot-toolbar .ot-menu-label {
+    display: inline;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  /* Search full width in dropdown */
+  .ot-toolbar-nav .ot-search-container {
+    width: auto;
+    max-width: none;
+    min-width: 0;
+    margin: 4px 10px;
+  }
+
+  /* Reset button as menu row */
+  .ot-toolbar-nav .ot-reset-btn {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    height: auto;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--foreground);
+  }
+
+  .ot-toolbar-nav .ot-reset-btn:hover {
+    background: var(--accent);
+    border-color: transparent;
+  }
+
+  /* Badge as menu row */
+  .ot-toolbar-nav .graph-badge {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    backdrop-filter: none;
+    height: auto;
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+}
+
+/* ── Small mobile (≤ 600px): search goes back into burger ── */
+
+@media (max-width: 600px) {
+  .ot-toolbar .ot-search-tablet {
+    display: none;
+  }
+
+  .ot-toolbar .ot-search-nav {
+    display: contents;
+  }
+
+  .ot-toolbar .ot-persistent-mobile {
+    margin-left: auto;
+  }
+}
+
+/* ── Extra small (≤ 640px) ──────────────────── */
+
+@media (max-width: 640px) {
+  .ot-toolbar {
+    padding: max(10px, env(safe-area-inset-top))
+      max(12px, env(safe-area-inset-right)) 10px
+      max(12px, env(safe-area-inset-left));
+  }
+
+  .ot-toolbar h1 {
+    display: none;
+  }
+
+  .ot-toolbar-nav .ot-search-container {
+    margin: 4px 8px;
+  }
+
+  .ot-toolbar .ot-search-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  .ot-toolbar .ot-hops-input {
+    width: 40px;
+    height: 28px;
+  }
+}
+/*
+ * Copyright 2026 OpenTrace Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* Discover Panel — directory tree view */
 
 .discover-panel {