feat(HAI-105): polish dashboard UI styles and migrate inline styles to CSS

- Enhance CSS custom properties and add form control styling
- Polish settings layout, sidebar, and auth card styles
- Add checkbox styling, modal refinements, and migrate inline styles from SettingsModal
- Add structural test assertions for new CSS classes in SettingsModal
- Expand styles.css with ~170 new lines of maintainable, token-based CSS

packages/dashboard/app/components/SettingsModal.tsx

@@ -197,7 +197,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
                   }
                 }}
               />
-              {prefixError && <small className="field-error" style={{ color: "var(--color-error, #e74c3c)" }}>{prefixError}</small>}
+              {prefixError && <small className="field-error">{prefixError}</small>}
               {!prefixError && <small>Prefix for new task IDs (e.g. HAI, PROJ)</small>}
             </div>
           </>
@@ -215,9 +215,9 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
           <>
             <h4 className="settings-section-heading">Model</h4>
             {modelsLoading ? (
-              <div style={{ padding: "8px 0" }}>Loading available models…</div>
+              <div className="settings-empty-state">Loading available models…</div>
             ) : availableModels.length === 0 ? (
-              <div style={{ padding: "8px 0", color: "var(--color-muted, #888)" }}>
+              <div className="settings-empty-state settings-muted">
                 No models available. Configure authentication first.
               </div>
             ) : (
@@ -288,7 +288,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
               />
             </div>
             <div className="form-group">
-              <label htmlFor="groupOverlappingFiles" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <label htmlFor="groupOverlappingFiles" className="checkbox-label">
                 <input
                   id="groupOverlappingFiles"
                   type="checkbox"
@@ -335,7 +335,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
               <small>Shell command to run in each new worktree after creation</small>
             </div>
             <div className="form-group">
-              <label htmlFor="recycleWorktrees" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <label htmlFor="recycleWorktrees" className="checkbox-label">
                 <input
                   id="recycleWorktrees"
                   type="checkbox"
@@ -387,7 +387,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
           <>
             <h4 className="settings-section-heading">Merge</h4>
             <div className="form-group">
-              <label htmlFor="autoMerge" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <label htmlFor="autoMerge" className="checkbox-label">
                 <input
                   id="autoMerge"
                   type="checkbox"
@@ -401,7 +401,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
               <small>When enabled, tasks that pass review are automatically merged into the main branch</small>
             </div>
             <div className="form-group">
-              <label htmlFor="includeTaskIdInCommit" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <label htmlFor="includeTaskIdInCommit" className="checkbox-label">
                 <input
                   id="includeTaskIdInCommit"
                   type="checkbox"
@@ -421,25 +421,21 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
           <>
             <h4 className="settings-section-heading">Authentication</h4>
             {authLoading ? (
-              <div style={{ padding: "8px 0" }}>Loading authentication status…</div>
+              <div className="settings-empty-state">Loading authentication status…</div>
             ) : authProviders.length === 0 ? (
-              <div style={{ padding: "8px 0", color: "var(--color-muted, #888)" }}>
+              <div className="settings-empty-state settings-muted">
                 No OAuth providers available
               </div>
             ) : (
               authProviders.map((provider) => (
-                <div key={provider.id} className="form-group" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                <div key={provider.id} className="auth-provider-row">
-                  <div>
+                  <div className="auth-provider-info">
                     <strong>{provider.name}</strong>
                     <span
-                      style={{ marginLeft: "8px" }}
                       data-testid={`auth-status-${provider.id}`}
+                      className={`auth-status-badge ${provider.authenticated ? "authenticated" : "not-authenticated"}`}
                     >
-                      {provider.authenticated ? (
+                      {provider.authenticated ? "✓ Authenticated" : "✗ Not authenticated"}
-                        <span style={{ color: "var(--color-success, #27ae60)" }}>✓ Authenticated</span>
-                      ) : (
-                        <span style={{ color: "var(--color-error, #e74c3c)" }}>✗ Not authenticated</span>
-                      )}
                     </span>
                   </div>
                   <div>
@@ -466,7 +462,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
                 </div>
               ))
             )}
-            <small style={{ display: "block", marginTop: "8px" }}>
+            <small className="auth-hint">
               Login and logout take effect immediately — no need to save.
             </small>
           </>
@@ -484,7 +480,7 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
           </button>
         </div>
         {loading ? (
-          <div style={{ padding: "20px", textAlign: "center" }}>Loading…</div>
+          <div className="settings-empty-state settings-loading">Loading…</div>
         ) : (
           <div className="settings-layout">
             <nav className="settings-sidebar">

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

@@ -373,6 +373,69 @@ describe("SettingsModal", () => {
     expect(addToast).toHaveBeenCalledWith("Logged out", "success");
   });
 
+  it("auth status badges have proper class names", async () => {
+    (fetchAuthStatus as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      providers: [
+        { id: "anthropic", name: "Anthropic", authenticated: true },
+        { id: "github", name: "GitHub", authenticated: false },
+      ],
+    });
+
+    render(<SettingsModal onClose={onClose} addToast={addToast} />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText("Authentication"));
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+
+    const authBadge = screen.getByTestId("auth-status-anthropic");
+    expect(authBadge.className).toContain("auth-status-badge");
+    expect(authBadge.className).toContain("authenticated");
+
+    const unauthBadge = screen.getByTestId("auth-status-github");
+    expect(unauthBadge.className).toContain("auth-status-badge");
+    expect(unauthBadge.className).toContain("not-authenticated");
+  });
+
+  it("auth provider rows use auth-provider-row class", async () => {
+    render(<SettingsModal onClose={onClose} addToast={addToast} />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText("Authentication"));
+    await waitFor(() => expect(fetchAuthStatus).toHaveBeenCalled());
+
+    const providerRow = screen.getByText("Anthropic").closest(".auth-provider-row");
+    expect(providerRow).toBeTruthy();
+  });
+
+  it("model section renders select element", async () => {
+    render(<SettingsModal onClose={onClose} addToast={addToast} />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText("Model"));
+    await waitFor(() => expect(fetchModels).toHaveBeenCalled());
+
+    const select = screen.getByLabelText("Default Model") as HTMLSelectElement;
+    expect(select.tagName).toBe("SELECT");
+  });
+
+  it("checkbox labels use checkbox-label class", async () => {
+    render(<SettingsModal onClose={onClose} addToast={addToast} />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+    fireEvent.click(screen.getByText("Scheduling"));
+    const label = screen.getByText("Serialize tasks with overlapping files");
+    expect(label.className).toContain("checkbox-label");
+  });
+
+  it("no inline style attributes remain on SettingsModal elements", async () => {
+    const { container } = render(<SettingsModal onClose={onClose} addToast={addToast} />);
+    await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
+
+    // Check that no elements in the settings content have inline styles
+    const elementsWithStyle = container.querySelectorAll("[style]");
+    expect(elementsWithStyle.length).toBe(0);
+  });
+
   it("shows loading state during login", async () => {
     // Make loginProvider hang
     (loginProvider as ReturnType<typeof vi.fn>).mockReturnValue(new Promise(() => {}));

packages/dashboard/app/styles.css

@@ -17,9 +17,15 @@
   --in-review:   #3fb950;
   --done:        #8b949e;
 
+  --color-success: #3fb950;
+  --color-error:   #f85149;
+  --color-muted:   #8b949e;
+
   --radius:   8px;
   --radius-lg: 12px;
   --shadow:   0 4px 24px rgba(0,0,0,0.4);
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
 }
 
 html, body {
@@ -70,30 +76,31 @@ html, body {
   color: var(--text);
   font-size: 13px;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
 }
 .btn:hover { background: var(--card-hover); border-color: var(--text-muted); }
+.btn:active { transform: scale(0.97); }
 
 .btn-primary {
   background: #238636;
   border-color: #2ea043;
   color: #fff;
 }
-.btn-primary:hover { background: #2ea043; }
+.btn-primary:hover { background: #2ea043; box-shadow: 0 0 8px rgba(46,160,67,0.3); }
 
 .btn-danger {
   background: #da3633;
   border-color: #f85149;
   color: #fff;
 }
-.btn-danger:hover { background: #f85149; }
+.btn-danger:hover { background: #f85149; box-shadow: 0 0 8px rgba(248,81,73,0.3); }
 
 .btn-warning {
   background: #d29922;
   border-color: #e3b341;
   color: #fff;
 }
-.btn-warning:hover { background: #e3b341; }
+.btn-warning:hover { background: #e3b341; box-shadow: 0 0 8px rgba(227,179,65,0.3); }
 
 .btn-sm { padding: 4px 10px; font-size: 12px; }
 
@@ -418,8 +425,9 @@ html, body {
   align-items: center;
   padding: 16px 20px;
   border-bottom: 1px solid var(--border);
+  background: rgba(0,0,0,0.1);
 }
-.modal-header h3 { font-size: 15px; font-weight: 600; }
+.modal-header h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
 
 .modal-close {
   background: none;
@@ -435,9 +443,10 @@ html, body {
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 8px;
+  gap: 10px;
-  padding: 16px 20px;
+  padding: 14px 20px;
   border-top: 1px solid var(--border);
+  background: rgba(0,0,0,0.05);
 }
 
 /* === Forms === */
@@ -470,6 +479,7 @@ html, body {
 .form-group input:not([type="checkbox"]):focus,
 .form-group textarea:focus {
   border-color: var(--todo);
+  box-shadow: 0 0 0 2px rgba(88,166,255,0.15);
 }
 .form-group input[type="checkbox"] {
   width: 16px;
@@ -478,9 +488,75 @@ html, body {
   margin: 0;
   accent-color: var(--todo);
   cursor: pointer;
+  border-radius: 3px;
+  transition: box-shadow var(--transition-fast);
+}
+.form-group input[type="checkbox"]:focus-visible {
+  box-shadow: 0 0 0 2px rgba(88,166,255,0.3);
+  outline: none;
+}
+.checkbox-label {
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+  text-transform: none !important;
+  letter-spacing: 0 !important;
+  font-weight: 500 !important;
+  color: var(--text) !important;
+  font-size: 13px !important;
+  cursor: pointer;
 }
 .form-group textarea { resize: vertical; }
 
+/* === Select Styling === */
+.form-group select {
+  width: 100%;
+  padding: 8px 32px 8px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.form-group select:focus {
+  border-color: var(--todo);
+  box-shadow: 0 0 0 2px rgba(88,166,255,0.15);
+}
+.form-group select:hover:not(:focus) {
+  border-color: var(--text-dim);
+}
+.form-group select optgroup {
+  background: var(--surface);
+  color: var(--text-muted);
+  font-weight: 600;
+}
+.form-group select option {
+  background: var(--surface);
+  color: var(--text);
+  padding: 4px 8px;
+}
+
+/* === Helper Text & Field Errors === */
+.form-group small {
+  display: block;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+.form-group .field-error {
+  color: var(--color-error);
+  font-weight: 500;
+}
+
 /* === Settings Layout === */
 .settings-layout {
   display: flex;
@@ -495,8 +571,9 @@ html, body {
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  padding: 8px;
+  padding: 10px 8px;
   gap: 2px;
+  background: rgba(0,0,0,0.1);
 }
 
 .settings-nav-item {
@@ -508,33 +585,102 @@ html, body {
   color: var(--text-muted);
   background: none;
   border: none;
-  border-radius: var(--radius);
+  border-left: 3px solid transparent;
+  border-radius: 0 var(--radius) var(--radius) 0;
   cursor: pointer;
   text-align: left;
-  transition: background 0.15s, color 0.15s;
+  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.active {
   background: var(--bg);
   color: var(--todo);
   font-weight: 600;
+  border-left-color: var(--todo);
 }
 
 .settings-content {
   flex: 1;
   overflow-y: auto;
-  padding-bottom: 8px;
+  padding: 4px 0 12px;
+}
+.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: 12px 20px 0;
+  padding: 12px 20px 10px;
-  margin: 0;
+  margin: 0 20px 0 0;
   color: var(--text);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
+/* === Auth Provider Cards === */
+.auth-provider-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  margin: 0;
+  border-bottom: 1px solid var(--border);
+  transition: background var(--transition-fast);
+}
+.auth-provider-row:hover {
+  background: rgba(255,255,255,0.02);
+}
+.auth-provider-row:last-of-type {
+  border-bottom: none;
+}
+.auth-provider-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.auth-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+.auth-status-badge.authenticated {
+  background: rgba(63,185,80,0.15);
+  color: var(--color-success);
+}
+.auth-status-badge.not-authenticated {
+  background: rgba(248,81,73,0.15);
+  color: var(--color-error);
+}
+.auth-hint {
+  display: block;
+  padding: 10px 20px 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.settings-empty-state {
+  padding: 12px 20px;
+  font-size: 13px;
+}
+.settings-muted {
+  color: var(--text-muted);
+}
+.settings-loading {
+  text-align: center;
 }
 
 /* === Detail Modal === */