@polderlabs/bizar 4.5.2 → 4.7.1

package/bizar-dash/src/web/views/Artifacts.tsx

@@ -200,13 +200,16 @@ export function Artifacts({ snapshot, refreshSnapshot }: Props) {
         </div>
         <div className="view-actions">
           <div className="search-input">
-            <Search size={14} />
+            <Search size={14} aria-hidden />
+            <label htmlFor="artifacts-search" className="sr-only">Search artifacts</label>
             <input
+              id="artifacts-search"
               className="input"
               type="text"
               placeholder="Search…"
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
+              aria-label="Search artifacts"
             />
           </div>
           <Button
@@ -275,7 +278,9 @@ function NewPlanCard({ onCreate }: { onCreate: (slug: string, title?: string) =>
           setTitle('');
         }}
       >
+        <label htmlFor="new-artifact-slug" className="sr-only">Artifact slug</label>
         <input
+          id="new-artifact-slug"
           className="input"
           type="text"
           placeholder="slug (e.g. dashboard-v3.1)"
@@ -283,8 +288,11 @@ function NewPlanCard({ onCreate }: { onCreate: (slug: string, title?: string) =>
           required
           value={slug}
           onChange={(e) => setSlug(e.target.value)}
+          aria-label="Artifact slug"
         />
+        <label htmlFor="new-artifact-title" className="sr-only">Artifact title</label>
         <input
+          id="new-artifact-title"
           className="input"
           type="text"
           placeholder="Title (optional)"
@@ -545,14 +553,14 @@ function PlanEditor({
       width: 560,
       children: (
         <div className="artifact-config-form">
-          <label className="field-label">Title</label>
-          <input ref={(el) => { titleEl = el; }} className="input" type="text" defaultValue={meta.title} />
-          <label className="field-label">Description (markdown)</label>
-          <textarea ref={(el) => { descEl = el; }} className="textarea" rows={3} defaultValue={meta.description || ''} />
-          <label className="field-label">Tags (comma-separated)</label>
-          <input ref={(el) => { tagsEl = el; }} className="input" type="text" defaultValue={(meta.tags || []).join(', ')} />
-          <label className="field-label">Status</label>
-          <select ref={(el) => { statusEl = el; }} className="select" defaultValue={meta.status}>
+          <label className="field-label" htmlFor="artifact-cfg-title">Title</label>
+          <input id="artifact-cfg-title" ref={(el) => { titleEl = el; }} className="input" type="text" defaultValue={meta.title} />
+          <label className="field-label" htmlFor="artifact-cfg-desc">Description (markdown)</label>
+          <textarea id="artifact-cfg-desc" ref={(el) => { descEl = el; }} className="textarea" rows={3} defaultValue={meta.description || ''} />
+          <label className="field-label" htmlFor="artifact-cfg-tags">Tags (comma-separated)</label>
+          <input id="artifact-cfg-tags" ref={(el) => { tagsEl = el; }} className="input" type="text" defaultValue={(meta.tags || []).join(', ')} />
+          <label className="field-label" htmlFor="artifact-cfg-status">Status</label>
+          <select id="artifact-cfg-status" ref={(el) => { statusEl = el; }} className="select" defaultValue={meta.status}>
             {PLAN_STATUSES.map((s) => (
               <option key={s} value={s}>{s}</option>
             ))}
@@ -597,16 +605,16 @@ function PlanEditor({
       width: 520,
       children: (
         <div className="artifact-element-form">
-          <label className="field-label">Type</label>
-          <select ref={(el) => { typeEl = el; }} className="select" defaultValue="task">
+          <label className="field-label" htmlFor="artifact-elem-type">Type</label>
+          <select id="artifact-elem-type" ref={(el) => { typeEl = el; }} className="select" defaultValue="task">
             {ELEMENT_TYPES.map((t) => (
               <option key={t.id} value={t.id}>{t.label}</option>
             ))}
           </select>
-          <label className="field-label">Title</label>
-          <input ref={(el) => { titleEl = el; }} className="input" type="text" placeholder="Element title" autoFocus />
-          <label className="field-label">Content (markdown)</label>
-          <textarea ref={(el) => { contentEl = el; }} className="textarea" rows={4} placeholder="Description…" />
+          <label className="field-label" htmlFor="artifact-elem-title">Title</label>
+          <input id="artifact-elem-title" ref={(el) => { titleEl = el; }} className="input" type="text" placeholder="Element title" autoFocus />
+          <label className="field-label" htmlFor="artifact-elem-content">Content (markdown)</label>
+          <textarea id="artifact-elem-content" ref={(el) => { contentEl = el; }} className="textarea" rows={4} placeholder="Description…" />
         </div>
       ),
       footer: (
@@ -653,8 +661,8 @@ function PlanEditor({
       width: 480,
       children: (
         <div>
-          <label className="field-label">Comment</label>
-          <textarea ref={(el) => { textEl = el; }} className="textarea" rows={4} placeholder="Comment for the whole artifact…" autoFocus />
+          <label className="field-label" htmlFor="canvas-comment">Comment</label>
+          <textarea id="canvas-comment" ref={(el) => { textEl = el; }} className="textarea" rows={4} placeholder="Comment for the whole artifact…" autoFocus />
         </div>
       ),
       footer: (
@@ -908,18 +916,18 @@ function editElementInline(
     width: 520,
     children: (
       <div className="artifact-element-form">
-        <label className="field-label">Type</label>
-        <select ref={(el2) => { typeEl = el2; }} className="select" defaultValue={el.type}>
+        <label className="field-label" htmlFor="elem-edit-type">Type</label>
+        <select id="elem-edit-type" ref={(el2) => { typeEl = el2; }} className="select" defaultValue={el.type}>
           {ELEMENT_TYPES.map((t) => (
             <option key={t.id} value={t.id}>{t.label}</option>
           ))}
         </select>
-        <label className="field-label">Title</label>
-        <input ref={(el2) => { titleEl = el2; }} className="input" type="text" defaultValue={el.title} />
-        <label className="field-label">Status</label>
-        <input ref={(el2) => { statusEl = el2; }} className="input" type="text" defaultValue={el.status} placeholder="open / done / blocked …" />
-        <label className="field-label">Content (markdown)</label>
-        <textarea ref={(el2) => { contentEl = el2; }} className="textarea" rows={5} defaultValue={el.content} />
+        <label className="field-label" htmlFor="elem-edit-title">Title</label>
+        <input id="elem-edit-title" ref={(el2) => { titleEl = el2; }} className="input" type="text" defaultValue={el.title} />
+        <label className="field-label" htmlFor="elem-edit-status">Status</label>
+        <input id="elem-edit-status" ref={(el2) => { statusEl = el2; }} className="input" type="text" defaultValue={el.status} placeholder="open / done / blocked …" />
+        <label className="field-label" htmlFor="elem-edit-content">Content (markdown)</label>
+        <textarea id="elem-edit-content" ref={(el2) => { contentEl = el2; }} className="textarea" rows={5} defaultValue={el.content} />
       </div>
     ),
     footer: (
@@ -1464,12 +1472,17 @@ function CommentsPanel({
           setText('');
         }}
       >
+        <label htmlFor="artifacts-comment-input" className="sr-only">
+          {selectedElId ? 'Add a comment to this element' : 'Add a canvas comment'}
+        </label>
         <textarea
+          id="artifacts-comment-input"
           className="textarea"
           rows={2}
           placeholder={selectedElId ? 'Add a comment to this element…' : 'Add a canvas comment…'}
           value={text}
           onChange={(e) => setText(e.target.value)}
+          aria-label={selectedElId ? 'Add a comment to this element' : 'Add a canvas comment'}
         />
         <Button variant="primary" size="sm" type="submit" disabled={!text.trim()}>
           <Send size={12} /> Post

package/bizar-dash/src/web/views/Chat.tsx

@@ -141,8 +141,10 @@ export function Chat({
       title: 'Rename session',
       children: (
         <input
+          id="rename-session-input"
           autoFocus
           defaultValue={currentTitle}
+          aria-label="Session title"
           onChange={(e) => {
             next = e.target.value;
           }}
@@ -406,6 +408,10 @@ export function Chat({
             className="chat-thread-scroll"
             ref={chat.listRef}
             onScroll={chat.handleScroll}
+            role="log"
+            aria-live="polite"
+            aria-relevant="additions"
+            aria-label="Chat message thread"
           >
             <ChatThread
               messages={
@@ -463,6 +469,8 @@ export function Chat({
             multiple
             style={{ display: 'none' }}
             onChange={onFiles}
+            aria-label="Attach files to message"
+            tabIndex={-1}
           />
         </section>
 

package/bizar-dash/src/web/views/History.tsx

@@ -2,7 +2,7 @@
 // Shows per-project timelines (task events, plan events, project lifecycle)
 // aggregated from the activity log.
 
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   History as HistoryIcon,
   RefreshCw,
@@ -17,6 +17,7 @@ import {
 import { Card, CardTitle, CardMeta } from '../components/Card';
 import { Button } from '../components/Button';
 import { Spinner } from '../components/Spinner';
+import { VirtualList } from '../components/VirtualList';
 import { useToast } from '../components/Toast';
 import { api } from '../lib/api';
 import { cn, formatRelative } from '../lib/utils';
@@ -65,6 +66,85 @@ const TIME_RANGES = [
   { id: 'all', label: 'All time', ms: 0 },
 ];
 
+function renderProjectCard(
+  p: ProjectHistory,
+  events: HistoryEvent[],
+  expanded: Set<string>,
+  toggleProject: (id: string) => void,
+): React.ReactNode {
+  const isOpen = expanded.has(p.id);
+  return (
+    <Card key={p.id} className="history-project" style={{ marginBottom: 4 }}>
+      <div className="history-project-head">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
+          <div className="history-project-name">
+            <Folder size={16} /> {p.name}
+          </div>
+          <div className="history-project-meta">{p.path}</div>
+        </div>
+        <div className="history-project-stats">
+          <span className="history-project-stat">
+            <span className="history-project-stat-num">{p.tasks.done}</span>
+            <span className="muted">/ {p.tasks.total} done</span>
+          </span>
+          {p.tasks.doing > 0 && (
+            <span className="history-project-stat">
+              <span className="history-project-stat-num">{p.tasks.doing}</span>
+              <span className="muted">doing</span>
+            </span>
+          )}
+          {p.tasks.blocked > 0 && (
+            <span className="history-project-stat">
+              <span className="history-project-stat-num">{p.tasks.blocked}</span>
+              <span className="muted">blocked</span>
+            </span>
+          )}
+          <span className="history-project-stat">
+            <FileText size={11} /> <span className="history-project-stat-num">{p.plans}</span>
+            <span className="muted"> plan{p.plans === 1 ? '' : 's'}</span>
+          </span>
+          {p.lastAccessed && (
+            <span className="history-project-stat">
+              <span className="muted">last opened {formatRelative(p.lastAccessed)}</span>
+            </span>
+          )}
+        </div>
+        <button
+          type="button"
+          className="icon-btn"
+          onClick={() => toggleProject(p.id)}
+          aria-label={isOpen ? 'Collapse' : 'Expand'}
+        >
+          {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="history-timeline-mini">
+          {events.length === 0 ? (
+            <div className="muted" style={{ padding: '12px 8px', fontSize: 12 }}>
+              No events in this time range.
+            </div>
+          ) : (
+            events.slice(-100).reverse().map((ev, i) => (
+              <div key={i} className="history-timeline-row">
+                <span className="history-timeline-ts">
+                  {new Date(ev.ts).toLocaleTimeString()}
+                </span>
+                <span className="history-timeline-kind">{ev.kind || 'event'}</span>
+                <span className="history-timeline-msg" title={String(ev.text || ev.title || '')}>
+                  {ev.author ? `@${ev.author} ` : ''}
+                  {String(ev.text ?? ev.title ?? ev.name ?? '')}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}
+
 export function History({ snapshot }: Props) {
   const toast = useToast();
   const [data, setData] = useState<HistoryResponse | null>(null);
@@ -154,12 +234,15 @@ export function History({ snapshot }: Props) {
         </div>
         <div className="view-actions">
           <div className="tasks-toolbar-group">
-            <Filter size={14} style={{ color: 'var(--text-dim)' }} />
+            <Filter size={14} style={{ color: 'var(--text-dim)' }} aria-hidden />
+            <label htmlFor="history-range" className="sr-only">Time range</label>
             <select
+              id="history-range"
               className="select select-sm"
               value={rangeId}
               onChange={(e) => setRangeId(e.target.value)}
               title="Time range"
+              aria-label="Time range"
             >
               {TIME_RANGES.map((r) => (
                 <option key={r.id} value={r.id}>{r.label}</option>
@@ -203,80 +286,15 @@ export function History({ snapshot }: Props) {
             </Card>
           )}
 
-          {data.projects.map((p) => {
-            const events = eventsByProject.get(p.id) || [];
-            const isOpen = expanded.has(p.id);
-            return (
-              <Card key={p.id} className="history-project">
-                <div className="history-project-head">
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
-                    <div className="history-project-name">
-                      <Folder size={16} /> {p.name}
-                    </div>
-                    <div className="history-project-meta">{p.path}</div>
-                  </div>
-                  <div className="history-project-stats">
-                    <span className="history-project-stat">
-                      <span className="history-project-stat-num">{p.tasks.done}</span>
-                      <span className="muted">/ {p.tasks.total} done</span>
-                    </span>
-                    {p.tasks.doing > 0 && (
-                      <span className="history-project-stat">
-                        <span className="history-project-stat-num">{p.tasks.doing}</span>
-                        <span className="muted">doing</span>
-                      </span>
-                    )}
-                    {p.tasks.blocked > 0 && (
-                      <span className="history-project-stat">
-                        <span className="history-project-stat-num">{p.tasks.blocked}</span>
-                        <span className="muted">blocked</span>
-                      </span>
-                    )}
-                    <span className="history-project-stat">
-                      <FileText size={11} /> <span className="history-project-stat-num">{p.plans}</span>
-                      <span className="muted"> plan{p.plans === 1 ? '' : 's'}</span>
-                    </span>
-                    {p.lastAccessed && (
-                      <span className="history-project-stat">
-                        <span className="muted">last opened {formatRelative(p.lastAccessed)}</span>
-                      </span>
-                    )}
-                  </div>
-                  <button
-                    type="button"
-                    className="icon-btn"
-                    onClick={() => toggleProject(p.id)}
-                    aria-label={isOpen ? 'Collapse' : 'Expand'}
-                  >
-                    {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                  </button>
-                </div>
-
-                {isOpen && (
-                  <div className="history-timeline-mini">
-                    {events.length === 0 ? (
-                      <div className="muted" style={{ padding: '12px 8px', fontSize: 12 }}>
-                        No events in this time range.
-                      </div>
-                    ) : (
-                      events.slice(-100).reverse().map((ev, i) => (
-                        <div key={i} className="history-timeline-row">
-                          <span className="history-timeline-ts">
-                            {new Date(ev.ts).toLocaleTimeString()}
-                          </span>
-                          <span className="history-timeline-kind">{ev.kind || 'event'}</span>
-                          <span className="history-timeline-msg" title={String(ev.text || ev.title || '')}>
-                            {ev.author ? `@${ev.author} ` : ''}
-                            {String(ev.text ?? ev.title ?? ev.name ?? '')}
-                          </span>
-                        </div>
-                      ))
-                    )}
-                  </div>
-                )}
-              </Card>
-            );
-          })}
+          {data.projects.length > 0 && (
+            <VirtualList
+              items={data.projects}
+              itemHeight={70}
+              height={Math.min(data.projects.length * 70, 500)}
+              className="history-virtual-list"
+              renderItem={(p) => renderProjectCard(p, eventsByProject.get(p.id) || [], expanded, toggleProject)}
+            />
+          )}
 
           {/* Global / unassigned events */}
           {eventsByProject.has('global') && (

package/bizar-dash/src/web/views/MiniMaxUsage.tsx

@@ -585,18 +585,24 @@ function AnalyticsView({ toast }: { toast: ReturnType<typeof useToast> }) {
         ))}
         {range === 'custom' && (
           <div className="usage-custom-dates">
+            <label htmlFor="usage-from-date" className="sr-only">From date</label>
             <input
+              id="usage-from-date"
               type="date"
               className="usage-date-input"
               value={customFrom}
               onChange={e => setCustomFrom(e.target.value)}
+              aria-label="From date"
             />
-            <span style={{ color: 'var(--text-muted)', fontSize: 12 }}>to</span>
+            <span style={{ color: 'var(--text-muted)', fontSize: 12 }} aria-hidden>to</span>
+            <label htmlFor="usage-to-date" className="sr-only">To date</label>
             <input
+              id="usage-to-date"
               type="date"
               className="usage-date-input"
               value={customTo}
               onChange={e => setCustomTo(e.target.value)}
+              aria-label="To date"
             />
           </div>
         )}
@@ -879,9 +885,20 @@ function OnboardingWizard({ step, setStep, keyDraft, setKeyDraft, showKey, setSh
             <p className="minimax-wizard-prose">Paste your key below. We'll test it against the real API before saving.</p>
             <div className="minimax-key-row">
               <div className="minimax-key-input-wrap">
-                <KeyRound size={12} className="minimax-key-icon" />
-                <input type={showKey ? 'text' : 'password'} value={keyDraft} onChange={e => setKeyDraft(e.target.value)}
-                  placeholder="sk-cp-..." spellCheck={false} autoComplete="off" className="minimax-key-input" autoFocus />
+                <KeyRound size={12} className="minimax-key-icon" aria-hidden />
+                <label htmlFor="minimax-key-input" className="sr-only">Subscription Key</label>
+                <input
+                  id="minimax-key-input"
+                  type={showKey ? 'text' : 'password'}
+                  value={keyDraft}
+                  onChange={e => setKeyDraft(e.target.value)}
+                  placeholder="sk-cp-..."
+                  spellCheck={false}
+                  autoComplete="off"
+                  className="minimax-key-input"
+                  autoFocus
+                  aria-label="Subscription Key"
+                />
                 <button type="button" onClick={() => setShowKey(v => !v)} className="minimax-key-toggle" aria-label={showKey ? 'Hide key' : 'Show key'}>
                   {showKey ? <EyeOff size={13} /> : <Eye size={13} />}
                 </button>

package/bizar-dash/src/web/views/Mods.tsx

@@ -204,8 +204,9 @@ export function Mods({ snapshot, refreshSnapshot }: Props) {
             a <code>mod.json</code>). The folder will be copied to
             {' '}<code>~/.config/bizar/mods/&lt;id&gt;/</code>.
           </p>
-          <label className="field-label">Path</label>
+          <label className="field-label" htmlFor="install-mod-path">Path</label>
           <input
+            id="install-mod-path"
             ref={(el) => (pathEl = el)}
             className="input"
             type="text"
@@ -355,20 +356,26 @@ export function Mods({ snapshot, refreshSnapshot }: Props) {
 
       {/* v3.16.0 — Registry browser */}
       <Card className="mods-registry-card">
-        <div className="mods-registry-head" onClick={() => {
-          if (!registry && !registryLoading) loadRegistry();
-          setRegistryOpen((v) => !v);
-        }}>
-          <Globe size={14} />
+        <button
+          type="button"
+          className="mods-registry-head"
+          aria-expanded={registryOpen}
+          aria-controls="mods-registry-body"
+          onClick={() => {
+            if (!registry && !registryLoading) loadRegistry();
+            setRegistryOpen((v) => !v);
+          }}
+        >
+          <Globe size={14} aria-hidden />
           <span className="mods-registry-title">Mod registry</span>
           <span className="muted" style={{ fontSize: 11 }}>
             {registry?.mods ? `${registry.mods.length} available` : 'click to browse'}
           </span>
           <span className="mods-registry-spacer" />
-          {registryOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        </div>
+          {registryOpen ? <ChevronDown size={14} aria-hidden /> : <ChevronRight size={14} aria-hidden />}
+        </button>
         {registryOpen && (
-          <div className="mods-registry-body">
+          <div id="mods-registry-body" className="mods-registry-body">
             {registryLoading ? (
               <div className="muted" style={{ padding: 12, fontSize: 12 }}>Loading registry…</div>
             ) : registry?.error ? (
@@ -586,20 +593,26 @@ function ModDetails({ mod }: { mod: Mod }) {
 
       {/* v3.20 — Installed instructions (agents / commands / skills) */}
       <div className="mod-instructions">
-        <div className="mod-instructions-head" onClick={() => {
-          if (!instructions && !instructionsLoading) loadInstructions();
-          setInstructionsOpen((v) => !v);
-        }}>
-          <FileCode size={14} />
+        <button
+          type="button"
+          className="mod-instructions-head"
+          aria-expanded={instructionsOpen}
+          aria-controls={`mod-instructions-body-${mod.id}`}
+          onClick={() => {
+            if (!instructions && !instructionsLoading) loadInstructions();
+            setInstructionsOpen((v) => !v);
+          }}
+        >
+          <FileCode size={14} aria-hidden />
           <span>Installed instructions</span>
           <span className="muted" style={{ fontSize: 11 }}>
             {instructions ? `${instructions.total} files` : 'click to view'}
           </span>
           <span className="mod-instructions-spacer" />
-          {instructionsOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        </div>
+          {instructionsOpen ? <ChevronDown size={14} aria-hidden /> : <ChevronRight size={14} aria-hidden />}
+        </button>
         {instructionsOpen && instructions && (
-          <div className="mod-instructions-body">
+          <div id={`mod-instructions-body-${mod.id}`} className="mod-instructions-body">
             {instructions.agents.length > 0 && (
               <div className="mod-instructions-section">
                 <div className="mod-instructions-section-title">

package/bizar-dash/src/web/views/Overview.tsx

@@ -33,6 +33,7 @@ import { Button } from '../components/Button';
 import { MemoryStatusCard } from './memory/MemoryStatusCard';
 import { EmptyState } from '../components/EmptyState';
 import { Spinner } from '../components/Spinner';
+import { VirtualList } from '../components/VirtualList';
 import { useToast } from '../components/Toast';
 import { useModal } from '../components/Modal';
 import { FileBrowser } from '../components/FileBrowser';
@@ -287,11 +288,14 @@ function OverviewInner({
             }
           }}
         >
+          <label htmlFor="overview-hero-input" className="sr-only">Describe what you want Odin to do</label>
           <textarea
+            id="overview-hero-input"
             ref={inputRef}
             className="overview-input-hero"
             placeholder="e.g. Implement user authentication with email + password, including registration, login, password reset, and integration tests. Use Bcrypt, JWT tokens, and the existing API style."
             disabled={submitting}
+            aria-label="Describe what you want Odin to do"
           />
           <div style={{ display: 'flex', gap: 'var(--space-2)', alignItems: 'center', flexWrap: 'wrap' }}>
             <Button
@@ -366,22 +370,28 @@ function OverviewInner({
             No activity yet. Use the chat above or invoke a Bizar command to start a feed.
           </div>
         ) : (
-          <div className={cn('activity-feed-list-wrap', !activityExpanded && 'activity-feed-list-wrap-collapsed')}>
-            <div className="activity-feed-list">
-              {activityItems.slice(0, 30).map((it, idx) => {
-                const k = itemKey(it, idx);
-                if (hiddenKeys.has(k)) return null;
+          <div
+            className={cn('activity-feed-list-wrap', !activityExpanded && 'activity-feed-list-wrap-collapsed')}
+            aria-live="polite"
+            aria-relevant="additions"
+          >
+            <VirtualList
+              items={activityItems.slice(0, 30).filter((it, idx) => !hiddenKeys.has(itemKey(it, idx)))}
+              itemHeight={60}
+              height={Math.min(activityItems.filter((it, idx) => !hiddenKeys.has(itemKey(it, idx))).length * 60, 480)}
+              className="activity-feed-list"
+              renderItem={(it, vlIdx) => {
+                const originalIdx = activityItems.slice(0, 30).findIndex((a) => a === it);
                 return (
                   <ActivityFeedItem
-                    key={`${it.ts}-${idx}`}
                     item={it}
-                    activityKey={k}
+                    activityKey={itemKey(it, originalIdx)}
                     onNavigate={setActiveTab}
                     onHide={onHide}
                   />
                 );
-              })}
-            </div>
+              }}
+            />
             {!activityExpanded && activityItems.length > 8 && <div className="activity-feed-fade" aria-hidden="true" />}
           </div>
         )}

package/bizar-dash/src/web/views/Providers.tsx

@@ -75,14 +75,14 @@ export function Providers({ snapshot, settings, refreshSnapshot }: Props) {
       title: 'Add Provider',
       children: (
         <div className="provider-form">
-          <label className="field-label">Provider name</label>
-          <input ref={(el) => { nameEl = el; }} className="input" type="text" placeholder="e.g. Anthropic, OpenAI" autoFocus />
-          <label className="field-label">Base URL</label>
-          <input ref={(el) => { urlEl = el; }} className="input" type="text" placeholder="https://api.openai.com/v1" />
-          <label className="field-label">API Key</label>
-          <input ref={(el) => { keyEl = el; }} className="input" type="password" placeholder="sk-..." />
-          <label className="field-label">Models (one per line)</label>
-          <textarea ref={(el) => { modelsEl = el; }} className="input" rows={4} placeholder="gpt-4o&#10;gpt-4o-mini&#10;..." />
+          <label className="field-label" htmlFor="provider-new-name">Provider name</label>
+          <input id="provider-new-name" ref={(el) => { nameEl = el; }} className="input" type="text" placeholder="e.g. Anthropic, OpenAI" autoFocus />
+          <label className="field-label" htmlFor="provider-new-url">Base URL</label>
+          <input id="provider-new-url" ref={(el) => { urlEl = el; }} className="input" type="text" placeholder="https://api.openai.com/v1" />
+          <label className="field-label" htmlFor="provider-new-key">API Key</label>
+          <input id="provider-new-key" ref={(el) => { keyEl = el; }} className="input" type="password" placeholder="sk-..." />
+          <label className="field-label" htmlFor="provider-new-models">Models (one per line)</label>
+          <textarea id="provider-new-models" ref={(el) => { modelsEl = el; }} className="input" rows={4} placeholder="gpt-4o&#10;gpt-4o-mini&#10;..." />
         </div>
       ),
       footer: (
@@ -118,14 +118,14 @@ export function Providers({ snapshot, settings, refreshSnapshot }: Props) {
       title: `Edit "${provider.name}"`,
       children: (
         <div className="provider-form">
-          <label className="field-label">Provider name</label>
-          <input ref={(el) => { nameEl = el; }} className="input" type="text" defaultValue={provider.name} />
-          <label className="field-label">Base URL</label>
-          <input ref={(el) => { urlEl = el; }} className="input" type="text" defaultValue={provider.baseURL} />
-          <label className="field-label">API Key (leave blank to keep current)</label>
-          <input ref={(el) => { keyEl = el; }} className="input" type="password" placeholder="sk-..." />
-          <label className="field-label">Models (one per line)</label>
-          <textarea ref={(el) => { modelsEl = el; }} className="input" rows={4} defaultValue={(provider.models || []).join('\n')} />
+          <label className="field-label" htmlFor="provider-edit-name">Provider name</label>
+          <input id="provider-edit-name" ref={(el) => { nameEl = el; }} className="input" type="text" defaultValue={provider.name} />
+          <label className="field-label" htmlFor="provider-edit-url">Base URL</label>
+          <input id="provider-edit-url" ref={(el) => { urlEl = el; }} className="input" type="text" defaultValue={provider.baseURL} />
+          <label className="field-label" htmlFor="provider-edit-key">API Key (leave blank to keep current)</label>
+          <input id="provider-edit-key" ref={(el) => { keyEl = el; }} className="input" type="password" placeholder="sk-..." />
+          <label className="field-label" htmlFor="provider-edit-models">Models (one per line)</label>
+          <textarea id="provider-edit-models" ref={(el) => { modelsEl = el; }} className="input" rows={4} defaultValue={(provider.models || []).join('\n')} />
         </div>
       ),
       footer: (