fix(dashboard): drop the border around the footer folder toggle

The status-bar folder-toggle button had a 1px border + radius that made it
look like a chip. Per request, render it as a bare icon — transparent
background, no border. Hover now only shifts the icon color, the active
state drops to color only, and focus-visible still draws a focus ring with
border-radius applied so it remains a clean halo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/CustomModelDropdown.css

@@ -46,7 +46,7 @@
 
 .model-combobox-trigger-icon {
   display: inline-flex;
-  margin-right: 8px;
+  margin-right: var(--space-sm);
   flex-shrink: 0;
 }
 
@@ -160,6 +160,19 @@
   background: rgba(88, 166, 255, 0.25);
 }
 
+.model-combobox-option-main {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-width: 0;
+  flex: 1;
+}
+
+.model-combobox-option-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
 .model-combobox-option-text {
   flex: 1;
   overflow: hidden;

packages/dashboard/app/components/CustomModelDropdown.tsx

@@ -522,8 +522,12 @@ export function CustomModelDropdown({
                   role="option"
                   aria-selected={isSelected}
                 >
-                  <ProviderIcon provider={model.provider} size="sm" />
+                  <span className="model-combobox-option-main">
-                  <span className="model-combobox-option-text">{model.name}</span>
+                    <span className="model-combobox-option-icon">
+                      <ProviderIcon provider={model.provider} size="sm" />
+                    </span>
+                    <span className="model-combobox-option-text">{model.name}</span>
+                  </span>
                   <span className="model-combobox-option-id">{model.id}</span>
                   {onToggleModelFavorite && (
                     <button

packages/dashboard/app/components/ExecutorStatusBar.css

@@ -152,29 +152,26 @@
   min-width: var(--executor-status-touch-size);
   min-height: var(--executor-status-touch-size);
   padding: 0;
-  border: 1px solid var(--border);
+  border: none;
-  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
-  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+  transition: color var(--transition-fast);
 }
 
 .executor-status-bar__folder-toggle:hover {
-  background: var(--card-hover);
   color: var(--text);
-  border-color: var(--text-dim);
 }
 
 .executor-status-bar__folder-toggle:focus-visible,
 .executor-status-bar__project-path:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-strong);
+  border-radius: var(--radius-sm);
 }
 
 .executor-status-bar__folder-toggle--active {
   color: var(--todo);
-  border-color: var(--todo);
 }
 
 .executor-status-bar__project-path {

packages/dashboard/app/components/ProviderIcon.tsx

@@ -204,6 +204,7 @@ const providerConfig: Record<
   zai: { component: ZaiIcon, color: "#1A6DFF" }, // blue
   kimi: { component: KimiIcon, color: "#6C5CE7" }, // purple
   moonshot: { component: KimiIcon, color: "#6C5CE7" }, // purple (same as kimi)
+  "kimi-coding": { component: KimiIcon, color: "#6C5CE7", label: "Kimi" }, // purple (Kimi alias)
 };
 
 export function ProviderIcon({ provider, size = "sm" }: ProviderIconProps) {

packages/dashboard/app/components/__tests__/CustomModelDropdown.integration.test.tsx

@@ -138,6 +138,29 @@ describe("CustomModelDropdown ProviderIcon Integration", () => {
     expect(kimiIcon.querySelector("path")).toHaveAttribute("fill", "#6C5CE7");
   });
 
+  it("uses explicit icon/text layout hooks for favorited model rows", async () => {
+    const user = userEvent.setup();
+    render(<CustomModelDropdown {...defaultProps} favoriteModels={["openai/gpt-4o"]} />);
+
+    await user.click(screen.getByLabelText("Test Model"));
+
+    const pinnedRow = screen
+      .getByText("GPT-4o")
+      .closest(".model-combobox-option--favorite");
+    expect(pinnedRow).toBeInTheDocument();
+
+    const mainLayout = pinnedRow?.querySelector(".model-combobox-option-main");
+    expect(mainLayout).toBeInTheDocument();
+
+    const iconSlot = mainLayout?.querySelector(".model-combobox-option-icon");
+    expect(iconSlot).toBeInTheDocument();
+    expect(iconSlot?.querySelector("[data-testid='openai-icon']")).toBeInTheDocument();
+
+    const textSlot = mainLayout?.querySelector(".model-combobox-option-text");
+    expect(textSlot).toBeInTheDocument();
+    expect(textSlot).toHaveTextContent("GPT-4o");
+  });
+
   it("renders Kimi brand icon for moonshot provider model in dropdown (alias)", async () => {
     const user = userEvent.setup();
     render(<CustomModelDropdown {...defaultProps} />);

packages/dashboard/app/components/__tests__/ProviderIcon.test.tsx

@@ -291,6 +291,26 @@ describe("ProviderIcon", () => {
     expect(wrapper).toHaveAttribute("data-provider", "moonshot");
   });
 
+  it("renders Kimi brand icon for kimi-coding provider (alias)", () => {
+    render(<ProviderIcon provider="kimi-coding" />);
+    expect(screen.getByTestId("kimi-icon")).toBeInTheDocument();
+    expect(screen.getByLabelText("Kimi")).toBeInTheDocument();
+  });
+
+  it("applies provider-specific color for kimi-coding (alias)", () => {
+    render(<ProviderIcon provider="kimi-coding" />);
+    const icon = screen.getByTestId("kimi-icon").parentElement;
+    expect(icon).toHaveStyle({ color: "#6C5CE7" });
+  });
+
+  it("passes correct color to SVG fill for kimi-coding (alias)", () => {
+    render(<ProviderIcon provider="kimi-coding" />);
+    const svg = screen.getByTestId("kimi-icon");
+    const paths = svg.querySelectorAll("path");
+    expect(paths.length).toBeGreaterThan(0);
+    expect(paths[0]).toHaveAttribute("fill", "#6C5CE7");
+  });
+
   // Regression test: verify the Kimi icon is the crescent moon shape, not the old "K" placeholder
   it("renders crescent moon icon geometry (not the old K placeholder)", () => {
     render(<ProviderIcon provider="kimi" />);

packages/dashboard/app/styles.css

@@ -953,6 +953,445 @@ input[type="range"]:focus-visible {
   box-shadow: var(--focus-ring-strong);
 }
 
+/* === Settings Layout === */
+.settings-layout {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.settings-mobile-section-picker {
+  display: none;
+}
+
+.settings-sidebar {
+  width: 170px;
+  min-width: 170px;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 10px 8px;
+  gap: 2px;
+  background: rgba(0, 0, 0, 0.1);
+  scrollbar-color: var(--border) transparent;
+  scrollbar-width: thin;
+}
+
+.settings-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.settings-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.settings-sidebar::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.settings-sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+.settings-nav-item {
+  display: block;
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+.settings-nav-item:hover {
+  background: var(--bg);
+  color: var(--text);
+  border-left-color: var(--border);
+}
+.settings-nav-item:focus-visible {
+  box-shadow: var(--focus-ring-strong);
+  outline: none;
+}
+.settings-nav-item.active {
+  background: var(--bg);
+  color: var(--todo);
+  font-weight: 600;
+  border-left-color: var(--todo);
+}
+
+/* Settings group headers - visual separators between global and project sections */
+.settings-group-header {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  padding: var(--space-md) var(--space-md) var(--space-xs);
+  margin-top: var(--space-sm);
+  user-select: none;
+}
+.settings-group-header:first-child {
+  margin-top: 0;
+}
+
+.settings-content {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px 0 12px;
+  scrollbar-color: var(--border) transparent;
+  scrollbar-width: thin;
+}
+
+.settings-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.settings-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.settings-content::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.settings-content::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+.settings-content > * {
+  animation: settingsFadeIn var(--transition-normal);
+}
+@keyframes settingsFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.settings-section-heading {
+  font-size: 14px;
+  font-weight: 600;
+  padding: var(--space-lg) var(--space-xl) var(--space-md);
+  margin: 0 var(--space-xl) 0;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: var(--space-xs);
+}
+
+/* Spacing modifier for settings-section-heading that need extra top margin */
+.settings-section-heading--spaced {
+  margin-top: var(--space-xl);
+}
+
+.settings-plugins-subsection-toggle {
+  display: inline-flex;
+  gap: var(--space-xs);
+  padding: 0 var(--space-xl);
+  margin: var(--space-md) 0;
+}
+
+.settings-plugins-subsection-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-pill);
+  background: var(--surface);
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: var(--space-xs) var(--space-md);
+  cursor: pointer;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.settings-plugins-subsection-btn:hover {
+  background: var(--surface-hover);
+  color: var(--text);
+}
+
+.settings-plugins-subsection-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-strong);
+}
+
+.settings-plugins-subsection-btn.active {
+  background: color-mix(in srgb, var(--todo) 14%, transparent);
+  border-color: color-mix(in srgb, var(--todo) 45%, var(--border));
+  color: var(--todo);
+}
+
+.settings-plugins-subsection-panel {
+  padding-bottom: var(--space-md);
+}
+
+/* Scope indicators in sidebar nav items */
+.settings-scope-icon {
+  margin-right: 6px;
+  display: inline-flex;
+  vertical-align: middle;
+  color: var(--text-muted);
+}
+
+/* Scope banner above section content */
+.settings-scope-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-xl);
+  margin: 0 var(--space-xl) var(--space-xs);
+  font-size: 12px;
+  border-radius: var(--radius);
+  color: var(--text-muted);
+}
+.settings-scope-global {
+  background: color-mix(in srgb, var(--color-info) 8%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--color-info) 40%, transparent);
+}
+.settings-scope-project {
+  background: color-mix(in srgb, var(--color-success) 8%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--color-success) 40%, transparent);
+}
+.settings-scope-mixed {
+  background: color-mix(in srgb, var(--triage) 8%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--triage) 40%, transparent);
+}
+
+/* Helper note styling for Settings sections — aligns with form-group horizontal gutters */
+.settings-note {
+  display: block;
+  padding: 0 var(--space-xl);
+  margin-top: var(--space-xs);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+  .settings-note {
+    padding: 0 var(--space-lg);
+  }
+}
+
+/* === Notifications Settings === */
+.ntfy-advanced-disclosure {
+  margin-top: var(--space-md);
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+
+.ntfy-advanced-disclosure > summary {
+  cursor: pointer;
+  list-style: none;
+  padding: var(--space-sm) var(--space-md);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.ntfy-advanced-disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+
+.ntfy-advanced-content {
+  padding: 0 var(--space-md) var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+/* === Memory Settings === */
+.memory-status-message {
+  display: flex;
+  gap: var(--space-md);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-md);
+}
+
+.memory-status-message span {
+  min-width: 0;
+}
+
+.memory-retrieval-test {
+  margin-top: var(--space-lg);
+}
+
+.memory-test-result {
+  margin: 0 var(--space-xl) var(--space-lg);
+  padding: var(--space-md);
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+}
+
+.memory-test-result strong,
+.memory-test-result span {
+  color: var(--text);
+  font-size: 12px;
+}
+
+.memory-test-result small {
+  display: block;
+  margin-top: var(--space-xs);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.memory-test-result ul {
+  margin: var(--space-md) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.memory-test-result li {
+  padding-top: var(--space-sm);
+  border-top: var(--btn-border-width) solid var(--border);
+}
+
+.memory-test-result li + li {
+  margin-top: var(--space-sm);
+}
+
+.memory-test-result p {
+  margin: var(--space-xs) 0 0;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.memory-editor-section {
+  margin-top: var(--space-lg);
+}
+
+.memory-file-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-xs) var(--space-md);
+  align-items: center;
+  margin: 0 var(--space-xl) var(--space-md);
+  padding: var(--space-md);
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+}
+
+.memory-file-summary span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-pill);
+  color: var(--color-info);
+  background: color-mix(in srgb, var(--color-info) 12%, transparent);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.memory-file-summary strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.memory-file-summary small {
+  grid-column: 2;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.memory-editor-frame {
+  min-height: 50vh;
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* === Auth Provider Cards === */
+.auth-section-hint {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius);
+  font-size: 13px;
+  color: var(--text-muted);
+  border-left: 3px solid var(--text-muted);
+}
+.auth-provider-group {
+  margin-bottom: 16px;
+}
+.auth-group-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+.auth-provider-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  margin-bottom: 8px;
+  overflow: hidden;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.auth-provider-card:hover {
+  border-color: var(--text-dim);
+}
+.auth-provider-card--authenticated {
+  border-color: color-mix(in srgb, var(--color-success) 40%, var(--border));
+  background: color-mix(in srgb, var(--color-success) 5%, var(--surface));
+}
+.auth-provider-card--authenticated:hover {
+  border-color: color-mix(in srgb, var(--color-success) 60%, var(--border));
+}
+.auth-provider-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  gap: 12px;
+}
+.auth-provider-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+.auth-provider-info strong {
+  font-weight: 500;
+  color: var(--text);
+}
 .auth-status-badge {
   display: inline-flex;
   align-items: center;
@@ -2421,6 +2860,114 @@ input[type="range"]:focus-visible {
     padding-bottom: env(safe-area-inset-bottom, 0px);
   }
 
+  /* Settings modal: use the section picker as the only mobile navigation */
+  .settings-layout {
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .settings-mobile-section-picker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding: var(--space-md) var(--space-lg);
+    border-bottom: var(--btn-border-width) solid var(--border);
+    background: var(--surface);
+  }
+
+  .settings-mobile-section-picker label {
+    color: var(--text-muted);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .settings-mobile-section-picker select {
+    width: 100%;
+  }
+
+  .settings-mobile-section-picker select:focus-visible {
+    outline: none;
+    border-color: var(--todo);
+    box-shadow: var(--focus-ring-strong);
+  }
+
+  .settings-sidebar {
+    display: none;
+  }
+
+  .settings-nav-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--radius) var(--radius) 0 0;
+    padding: 6px 12px;
+    white-space: nowrap;
+  }
+
+  .settings-nav-item:hover {
+    border-left-color: transparent;
+    border-bottom-color: var(--border);
+  }
+
+  .settings-nav-item.active {
+    border-left-color: transparent;
+    border-bottom-color: var(--todo);
+  }
+
+  /* Hide group headers on mobile - they don't fit well in horizontal scroll row */
+  .settings-group-header {
+    display: none;
+  }
+
+  .settings-scope-icon {
+    margin-right: 0;
+  }
+
+  .settings-content {
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .settings-content .form-group small {
+    overflow-wrap: break-word;
+    word-break: break-all;
+  }
+
+  .settings-content input,
+  .settings-content select,
+  .settings-content textarea {
+    font-size: 16px;
+  }
+
+  .settings-section-heading {
+    padding: var(--space-lg) var(--space-lg) var(--space-md);
+    margin: 0 var(--space-lg) 0;
+  }
+
+  .settings-plugins-subsection-toggle {
+    display: flex;
+    width: 100%;
+    padding: 0 var(--space-lg);
+  }
+
+  .settings-plugins-subsection-btn {
+    flex: 1;
+    min-height: 36px;
+  }
+
+  .form-group {
+    padding: 0 14px;
+  }
+
+  .settings-scope-banner {
+    padding: var(--space-sm) var(--space-lg);
+  }
+
   .settings-empty-state {
     padding: 12px 14px;
   }