@polderlabs/bizar 4.7.0 → 4.7.2

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

@@ -144,16 +144,18 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
       width: 640,
       children: (
         <div className="agent-form">
-          <label className="field-label">Name (a-z, 0-9, dashes)</label>
+          <label className="field-label" htmlFor="agent-new-name">Name (a-z, 0-9, dashes)</label>
           <input
+            id="agent-new-name"
             ref={(el) => (nameEl = el)}
             className="input"
             type="text"
             placeholder="my-agent"
             autoFocus
           />
-          <label className="field-label">Description</label>
+          <label className="field-label" htmlFor="agent-new-desc">Description</label>
           <input
+            id="agent-new-desc"
             ref={(el) => { descEl = el; }}
             className="input"
             type="text"
@@ -161,8 +163,8 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
           />
           <div className="task-form-row">
             <div className="task-form-field">
-              <label className="field-label">Model</label>
-              <select ref={(el) => (modelEl = el)} className="select" defaultValue="">
+              <label className="field-label" htmlFor="agent-new-model">Model</label>
+              <select id="agent-new-model" ref={(el) => (modelEl = el)} className="select" defaultValue="">
                 <option value="">(provider default)</option>
                 {MODELS.map((m) => (
                   <option key={m} value={m}>{m}</option>
@@ -170,22 +172,22 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
               </select>
             </div>
             <div className="task-form-field">
-              <label className="field-label">Mode</label>
-              <select ref={(el) => (modeEl = el)} className="select" defaultValue="subagent">
+              <label className="field-label" htmlFor="agent-new-mode">Mode</label>
+              <select id="agent-new-mode" ref={(el) => (modeEl = el)} className="select" defaultValue="subagent">
                 <option value="primary">primary</option>
                 <option value="subagent">subagent</option>
                 <option value="all">all</option>
               </select>
             </div>
             <div className="task-form-field" style={{ flex: '0 0 80px' }}>
-              <label className="field-label">Color</label>
-              <input ref={(el) => (colorEl = el)} className="input" type="color" defaultValue="#8b5cf6" />
+              <label className="field-label" htmlFor="agent-new-color">Color</label>
+              <input id="agent-new-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue="#8b5cf6" />
             </div>
           </div>
           <div className="task-form-row">
             <div className="task-form-field" style={{ flex: 1 }}>
-              <label className="field-label">Category</label>
-              <select ref={(el) => (categoryEl = el)} className="select" defaultValue="">
+              <label className="field-label" htmlFor="agent-new-category">Category</label>
+              <select id="agent-new-category" ref={(el) => (categoryEl = el)} className="select" defaultValue="">
                 <option value="">(none)</option>
                 {CATEGORIES.map((c) => (
                   <option key={c.id} value={c.id}>{c.label}</option>
@@ -193,21 +195,24 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
               </select>
             </div>
             <div className="task-form-field" style={{ flex: 2 }}>
-              <label className="field-label">Tags (comma-separated)</label>
-              <input ref={(el) => (tagsEl = el)} className="input" type="text" placeholder="reasoning, code, planning" />
+              <label className="field-label" htmlFor="agent-new-tags">Tags (comma-separated)</label>
+              <input id="agent-new-tags" ref={(el) => (tagsEl = el)} className="input" type="text" placeholder="reasoning, code, planning" />
             </div>
           </div>
-          <label className="field-label">Tools</label>
-          <div ref={(el) => (toolsContainer = el)} className="agent-tools">
-            {TOOL_OPTIONS.map((t) => (
-              <label key={t} className="checkbox-row">
-                <input type="checkbox" value={t} />
-                <span>{t}</span>
-              </label>
-            ))}
-          </div>
-          <label className="field-label">System prompt</label>
+          <fieldset>
+            <legend className="field-label" style={{ padding: 0 }}>Tools</legend>
+            <div ref={(el) => (toolsContainer = el)} className="agent-tools">
+              {TOOL_OPTIONS.map((t) => (
+                <label key={t} className="checkbox-row">
+                  <input type="checkbox" value={t} aria-label={t} />
+                  <span>{t}</span>
+                </label>
+              ))}
+            </div>
+          </fieldset>
+          <label className="field-label" htmlFor="agent-new-prompt">System prompt</label>
           <textarea
+            id="agent-new-prompt"
             ref={(el) => (promptEl = el)}
             className="textarea"
             rows={6}
@@ -280,8 +285,9 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
             <div className="muted">
               File: <code>{full.path}</code>
             </div>
-            <label className="field-label">Description</label>
+            <label className="field-label" htmlFor="agent-edit-desc">Description</label>
             <input
+              id="agent-edit-desc"
               ref={(el) => { descEl = el; }}
               className="input"
               type="text"
@@ -289,8 +295,8 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
             />
             <div className="task-form-row">
               <div className="task-form-field">
-                <label className="field-label">Model</label>
-                <select ref={(el) => (modelEl = el)} className="select" defaultValue={full.model}>
+                <label className="field-label" htmlFor="agent-edit-model">Model</label>
+                <select id="agent-edit-model" ref={(el) => (modelEl = el)} className="select" defaultValue={full.model}>
                   <option value="">(provider default)</option>
                   {MODELS.map((m) => (
                     <option key={m} value={m}>{m}</option>
@@ -298,22 +304,22 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
                 </select>
               </div>
               <div className="task-form-field">
-                <label className="field-label">Mode</label>
-                <select ref={(el) => (modeEl = el)} className="select" defaultValue={full.mode || 'subagent'}>
+                <label className="field-label" htmlFor="agent-edit-mode">Mode</label>
+                <select id="agent-edit-mode" ref={(el) => (modeEl = el)} className="select" defaultValue={full.mode || 'subagent'}>
                   <option value="primary">primary</option>
                   <option value="subagent">subagent</option>
                   <option value="all">all</option>
                 </select>
               </div>
               <div className="task-form-field" style={{ flex: '0 0 80px' }}>
-                <label className="field-label">Color</label>
-                <input ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={full.color || '#8b5cf6'} />
+                <label className="field-label" htmlFor="agent-edit-color">Color</label>
+                <input id="agent-edit-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={full.color || '#8b5cf6'} />
               </div>
             </div>
             <div className="task-form-row">
               <div className="task-form-field" style={{ flex: 1 }}>
-                <label className="field-label">Category</label>
-                <select ref={(el) => (categoryEl = el)} className="select" defaultValue={full.category || ''}>
+                <label className="field-label" htmlFor="agent-edit-category">Category</label>
+                <select id="agent-edit-category" ref={(el) => (categoryEl = el)} className="select" defaultValue={full.category || ''}>
                   <option value="">(none)</option>
                   {CATEGORIES.map((c) => (
                     <option key={c.id} value={c.id}>{c.label}</option>
@@ -321,8 +327,9 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
                 </select>
               </div>
               <div className="task-form-field" style={{ flex: 2 }}>
-                <label className="field-label">Tags (comma-separated)</label>
+                <label className="field-label" htmlFor="agent-edit-tags">Tags (comma-separated)</label>
                 <input
+                  id="agent-edit-tags"
                   ref={(el) => (tagsEl = el)}
                   className="input"
                   type="text"
@@ -330,17 +337,20 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
                 />
               </div>
             </div>
-            <label className="field-label">Tools</label>
-            <div ref={(el) => (toolsContainer = el)} className="agent-tools">
-              {TOOL_OPTIONS.map((t) => (
-                <label key={t} className="checkbox-row">
-                  <input type="checkbox" value={t} defaultChecked={full.tools?.includes(t)} />
-                  <span>{t}</span>
-                </label>
-              ))}
-            </div>
-            <label className="field-label">System prompt</label>
+            <fieldset>
+              <legend className="field-label" style={{ padding: 0 }}>Tools</legend>
+              <div ref={(el) => (toolsContainer = el)} className="agent-tools">
+                {TOOL_OPTIONS.map((t) => (
+                  <label key={t} className="checkbox-row">
+                    <input type="checkbox" value={t} aria-label={t} defaultChecked={full.tools?.includes(t)} />
+                    <span>{t}</span>
+                  </label>
+                ))}
+              </div>
+            </fieldset>
+            <label className="field-label" htmlFor="agent-edit-prompt">System prompt</label>
             <textarea
+              id="agent-edit-prompt"
               ref={(el) => (promptEl = el)}
               className="textarea"
               rows={8}
@@ -483,15 +493,20 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
         </div>
         <div className="view-actions">
           <div className="search-input">
+            <label htmlFor="agents-search" className="sr-only">Search agents</label>
             <input
+              id="agents-search"
               className="input"
               type="text"
               placeholder="Search…"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
+              aria-label="Search agents"
             />
           </div>
+          <label htmlFor="agents-category-filter" className="sr-only">Filter by category</label>
           <select
+            id="agents-category-filter"
             className="select select-sm"
             value={categoryFilter}
             onChange={(e) => setCategoryFilter(e.target.value)}

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

@@ -234,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>

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

@@ -288,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
@@ -367,7 +370,11 @@ 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={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}

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: (