@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/styles/workspaceSidebar.css

@@ -2,12 +2,12 @@
    Sidebar shell
    ────────────────────────────────────────────── */
 .workspace-sidebar {
+  --workspace-indent: 1rem;
   width: 16rem;
   min-width: 16rem;
-  border-right: 1px solid #e2e8f0;
-  /* slate-200 */
-  background: #ffffff;
-  color: #0f172a;
+  border-right: 1px solid var(--app-shell-border);
+  background: var(--app-shell-pane);
+  color: var(--foreground);
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -33,41 +33,47 @@
   transform: scale(1.08);
 }
 
+
 /* ──────────────────────────────────────────────
-   Brand bar  (matches p-4 + border-b border-slate-100 + gap-2)
+   Brand bar  (pill logo + "Workspace" + collapse)
    ────────────────────────────────────────────── */
 .workspace-sidebar__brand {
-  padding: 1rem;
-  border-bottom: 1px solid #f1f5f9;
-  /* slate-100 */
+  padding: 0.875rem 0.75rem;
+  border-bottom: 1px solid var(--app-shell-border);
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  background: color-mix(in srgb, var(--app-shell-pane) 84%, transparent);
+  backdrop-filter: blur(12px);
 }
 
 .workspace-sidebar__brand-icon {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.5rem;
-  /* rounded-lg */
+  width: 2.25rem;
+  height: 1.35rem;
+  border-radius: 999px;
   border: 0;
-  /* indigo-600 */
+  background: #000000;
   color: #ffffff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-size: 0.625rem;
   font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
   flex-shrink: 0;
 }
 
+.dark .workspace-sidebar__brand-icon {
+  background: #ffffff;
+  color: #000000;
+}
+
 .workspace-sidebar__brand-title {
   margin: 0;
-  font-size: 1.125rem;
-  /* text-lg */
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  /* tracking-tight */
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--foreground);
 }
 
 /* ──────────────────────────────────────────────
@@ -77,10 +83,10 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0.75rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.125rem;
 }
 
 /* ──────────────────────────────────────────────
@@ -109,35 +115,31 @@
 /* Section labels — "WORKSPACE", "AGENTS"
    (text-xs font-semibold text-slate-400 uppercase tracking-wider px-3 mt-4 mb-2) */
 .workspace-sidebar__section-label {
-  margin: 1rem 0 0.5rem;
-  padding: 0 0.75rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
+  margin: 1rem 0 0;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: #94a3b8;
-  /* slate-400 */
+  color: var(--app-shell-soft-text);
 }
 
 /* Clickable section link (e.g. "Agents") — distinct from static labels */
 .workspace-sidebar__section-link {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
   text-decoration: none;
-  color: #64748b; /* slate-500 — slightly darker than labels */
+  color: var(--app-shell-muted);
   border-radius: 0.375rem;
   transition: color 0.15s, background-color 0.15s;
 }
 .workspace-sidebar__section-link:hover {
-  color: #334155; /* slate-700 */
-  background-color: #f1f5f9; /* slate-100 */
+  color: var(--foreground);
+  background-color: var(--app-shell-subtle);
 }
 
 /* ──────────────────────────────────────────────
@@ -148,33 +150,28 @@
   width: 100%;
   border: 0;
   background: transparent;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   border-radius: 0.375rem;
-  /* rounded-md */
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.5rem;
   font-size: 0.875rem;
-  /* text-sm */
   font-weight: 500;
-  color: #475569;
-  /* slate-600 */
+  color: var(--app-shell-muted);
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
   text-align: left;
 }
 
 .workspace-sidebar__nav-item:hover {
-  background: #f1f5f9;
-  /* slate-100 */
-  color: #0f172a;
+  background: var(--app-shell-subtle);
+  color: var(--foreground);
 }
 
 .workspace-sidebar__nav-item--active {
-  background: #eef2ff;
-  /* indigo-50 */
-  color: #4338ca;
-  /* indigo-700 */
+  background: var(--app-shell-elevated);
+  color: var(--foreground);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
 }
 
 /* ──────────────────────────────────────────────
@@ -201,7 +198,7 @@
 
 .workspace-sidebar__workspace-nav-item:focus-visible,
 .workspace-sidebar__workspace-action:focus-visible {
-  outline: 2px solid #94a3b8;
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -225,8 +222,8 @@
 
 .workspace-sidebar__workspace-action {
   border: 1px solid transparent;
-  background: #ffffff;
-  color: #94a3b8;
+  background: var(--app-shell-elevated);
+  color: var(--app-shell-soft-text);
   width: 1.35rem;
   height: 1.35rem;
   border-radius: 0.375rem;
@@ -243,15 +240,15 @@
 }
 
 .workspace-sidebar__workspace-action:hover:not(:disabled) {
-  color: #0f172a;
-  background: #f8fafc;
-  border-color: #e2e8f0;
+  color: var(--foreground);
+  background: var(--app-shell-elevated);
+  border-color: var(--app-shell-border-strong);
 }
 
 .workspace-sidebar__workspace-action--delete:hover:not(:disabled) {
-  color: #dc2626;
-  background: #fef2f2;
-  border-color: #fee2e2;
+  color: var(--destructive);
+  background: var(--destructive-muted);
+  border-color: var(--status-failed-border);
 }
 
 .workspace-sidebar__workspace-action:disabled {
@@ -269,22 +266,22 @@
 }
 
 .workspace-sidebar__action {
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
+  border: 1px solid var(--app-shell-border);
+  background: color-mix(in srgb, var(--app-shell-elevated) 92%, transparent);
   width: 1.75rem;
   height: 1.75rem;
   border-radius: 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #64748b;
+  color: var(--app-shell-muted);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .workspace-sidebar__action:hover:not(:disabled) {
-  background: #f8fafc;
-  color: #0f172a;
+  background: var(--app-shell-elevated);
+  color: var(--foreground);
 }
 
 .workspace-sidebar__action:disabled {
@@ -295,7 +292,7 @@
 .workspace-sidebar__action:focus-visible,
 .workspace-sidebar__empty-cta:focus-visible,
 .workspace-sidebar__settings-button:focus-visible {
-  outline: 2px solid #94a3b8;
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -326,12 +323,13 @@
 }
 
 .thread-item:hover {
-  background: #f8fafc;
+  background: var(--app-shell-subtle);
 }
 
 .thread-item--active {
-  background: #eef2ff;
-  border-color: #c7d2fe;
+  background: var(--app-shell-elevated);
+  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
 }
 
 .thread-item__header {
@@ -350,14 +348,14 @@
 }
 
 .thread-item__hash {
-  color: #64748b;
+  color: var(--app-shell-muted);
   flex-shrink: 0;
 }
 
 .thread-item__title {
   font-size: 0.8125rem;
   font-weight: 600;
-  color: #1e293b;
+  color: var(--foreground);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -365,7 +363,7 @@
 
 .thread-item__timestamp {
   font-size: 0.625rem;
-  color: #94a3b8;
+  color: var(--app-shell-soft-text);
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -373,7 +371,7 @@
 .thread-item__meta {
   font-size: 0.75rem;
   line-height: 1.35;
-  color: #64748b;
+  color: var(--app-shell-muted);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
@@ -389,9 +387,9 @@
 }
 
 .workspace-sidebar__empty-card {
-  border: 1px dashed #cbd5e1;
+  border: 1px dashed var(--app-shell-border-strong);
   border-radius: 0.75rem;
-  background: #f8fafc;
+  background: var(--app-shell-subtle);
   padding: 0.875rem;
   text-align: left;
   display: flex;
@@ -403,20 +401,20 @@
   margin: 0;
   font-size: 0.8125rem;
   font-weight: 600;
-  color: #334155;
+  color: var(--foreground);
 }
 
 .workspace-sidebar__empty-copy {
   margin: 0;
   font-size: 0.75rem;
   line-height: 1.45;
-  color: #64748b;
+  color: var(--app-shell-muted);
 }
 
 .workspace-sidebar__empty-cta {
-  border: 1px solid #cbd5e1;
-  background: #ffffff;
-  color: #0f172a;
+  border: 1px solid var(--app-shell-border-strong);
+  background: var(--app-shell-elevated);
+  color: var(--foreground);
   border-radius: 0.5rem;
   padding: 0.45rem 0.625rem;
   font-size: 0.75rem;
@@ -426,7 +424,7 @@
 }
 
 .workspace-sidebar__empty-cta:hover:not(:disabled) {
-  background: #f8fafc;
+  background: var(--app-shell-subtle);
 }
 
 .workspace-sidebar__empty-cta:disabled {
@@ -456,7 +454,7 @@
 }
 
 .workspace-sidebar__model-item:hover {
-  background: #f1f5f9;
+  background: var(--app-shell-subtle);
 }
 
 .workspace-sidebar__model-dot {
@@ -469,14 +467,12 @@
 .workspace-sidebar__model-name {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #334155;
-  /* slate-700 */
+  color: var(--foreground);
 }
 
 .workspace-sidebar__model-meta {
   font-size: 0.625rem;
-  /* text-[10px] */
-  color: #94a3b8;
+  color: var(--app-shell-soft-text);
   opacity: 0;
   transition: opacity 0.15s ease;
   text-align: right;
@@ -490,7 +486,7 @@
   margin: 0;
   padding: 0.25rem 0.75rem 0;
   font-size: 0.75rem;
-  color: #94a3b8;
+  color: var(--app-shell-soft-text);
 }
 
 /* ──────────────────────────────────────────────
@@ -498,8 +494,9 @@
    (w-full flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-md)
    ────────────────────────────────────────────── */
 .workspace-sidebar__footer {
-  border-top: 1px solid #f1f5f9;
+  border-top: 1px solid var(--app-shell-border);
   padding: 0.75rem;
+  margin-top: auto;
 }
 
 .workspace-sidebar__settings-button {
@@ -511,8 +508,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
-  color: #475569;
-  /* slate-600 */
+  color: var(--app-shell-muted);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -520,7 +516,6 @@
 }
 
 .workspace-sidebar__settings-button:hover {
-  background: #f1f5f9;
-  color: #0f172a;
+  background: var(--app-shell-subtle);
+  color: var(--foreground);
 }
-