- index.html: add #btnMic (hidden by default, shown if browser supports
SpeechRecognition) and #micStatus listening indicator inside .composer-box
- boot.js: IIFE-scoped mic handler wired to Web Speech API
* recognition.continuous=false (auto-stops after ~2s silence)
* recognition.interimResults=true (live transcript preview in textarea)
* Toggles .recording class + shows #micStatus while active
* Handles 'not-allowed', 'no-speech', 'network' errors via showToast()
* btnSend.onclick stops active recognition before sending
* Entire feature disabled/hidden gracefully when API unavailable
- style.css: .mic-btn, .mic-btn.recording (red pulse animation),
.mic-status, .mic-dot, @keyframes mic-pulse
- tests/test_sprint20.py: 46 tests covering HTML structure, CSS rules,
JS logic, error handling, and regression checks (376 total, all pass)
No API keys, no external libraries, no server changes. Browser-only.
Works in Chrome, Edge, Safari (partial). Firefox unsupported (hides button).
- File preview auto-close: clearPreview() extracted as named function
and called from loadDir(). Navigating directories (breadcrumbs, up
button, folder clicks) now automatically closes the right panel
file preview instead of leaving stale content visible.
- Thinking/reasoning display: assistant messages with structured content
arrays containing type=thinking or type=reasoning blocks now render
as collapsible gold-themed cards above the response text. Collapsed
by default, click header to expand. Works with Claude extended thinking
and o3 reasoning tokens when preserved in the message array.
- Workspace tree view (Issue #22): directories expand/collapse in-place
with toggle arrows. Single-click toggles, double-click navigates
(breadcrumb view). Subdirectory contents fetched lazily and cached.
Indentation shows nesting depth. Empty directories show "(empty)".
S._expandedDirs tracks open state, S._dirCache caches fetched entries.
Tests: 295 passed, 23 pre-existing failures, 0 regressions.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Track A: Workspace breadcrumb navigation
- Breadcrumb path bar with clickable segments when inside subdirectories
- Up button in panel header for parent directory navigation
- S.currentDir state tracking; file ops stay in current directory
- New file/folder creation respects current subdirectory
Track B: Slash commands foundation
- New commands.js module (7th JS module) with command registry and parser
- Built-in commands: /help, /clear, /model, /workspace, /new
- Autocomplete dropdown on / input with arrow/tab/enter/escape navigation
- Unrecognized commands pass through to agent normally
Track C: Send key setting (closes#26)
- send_key added to settings defaults in api/config.py
- Settings panel dropdown: Enter (default) vs Ctrl/Cmd+Enter
- Keydown handler rewritten for autocomplete + send key preference
- Setting loaded on boot, persisted to settings.json
5 new tests, 242 total (219 passing, 22 pre-existing failures, 0 regressions).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
renderMd() now correctly renders safe inline HTML tags that AI models
emit in their responses:
Pre-pass (ui.js):
Converts <strong>, <b>, <em>, <i>, <code>, <br> to their markdown
equivalents (**text**, *text*, `text`, newline) before the pipeline
runs. Code blocks and backtick spans are stashed first so their content
is never modified.
inlineMd() helper (ui.js):
New helper for processing inline formatting inside list items,
blockquotes, and headings. Previously these used esc() directly, which
escaped <strong>/<code> tags that had already been converted from HTML
by the pre-pass — causing them to appear as literal <strong> text
instead of rendering as bold. inlineMd() applies bold/italic/code
processing and then escapes only unknown tags.
Safety net (ui.js):
After the full pipeline, any HTML tags NOT emitted by our own renderer
(i.e. <img>, <script>, <iframe>, <svg>, <object>, etc.) are escaped
via esc(). The SAFE_TAGS allowlist covers every tag the pipeline itself
produces. XSS is fully blocked.
Active session gold style (sessions.js, style.css):
Active session item now uses gold/amber (#e8a030) instead of blue,
matching the logo gradient color for better visual hierarchy.
Project color border-left is skipped when the session is active
(gold always wins). Session items get border-radius: 0 8px 8px 0
to complement the left border indicator.
Tests (tests/test_sprint16.py — 74 tests):
- Static analysis: pre-pass, SAFE_TAGS, SAFE_INLINE, inlineMd present
- Behavioural: all safe tags render in paragraphs, list items (ul+ol),
blockquotes, headings (h1/h2/h3)
- Exact screenshot regression: the 4-item list with <strong> labels
and <code> values that was showing as literal text
- XSS: 7 attack vectors blocked (<img>, <script>, <iframe>, <svg>,
<object>, XSS inside bold, XSS nested inside <strong>)
- Edge cases: code block protection, double-escaping guards, br tag,
mixed markdown+HTML, inlineMd called in list/blockquote handlers
Tests: 312 passed, 0 failed.
- Action buttons overlay: wrap pin/move/archive/dup/trash in a
.session-actions container with position:absolute. Titles now use
full available width. Actions appear on hover with gradient fade
from the right edge. Overlay auto-hides during inline rename.
- SVG line icons: replace all emoji HTML entities with monochrome
SVGs that inherit currentColor. Consistent across all platforms.
- Pin indicator: small gold star rendered inline only when pinned.
Unpinned sessions get full title width (zero space reservation).
- Project border: sessions assigned to a project show a colored
left border matching the project color, replacing the old
always-visible blue folder button.
Fixes both BUGS.md items (title truncation + sticky folder button).
Tests: 214 passed, 23 pre-existing failures, 0 regressions.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Five fixes to the Sprint 15 Move to Project picker:
1. CRITICAL: Picker was invisible (overflow:hidden clipping)
Appended to document.body + positioned with fixed/getBoundingClientRect
instead of inside .session-item (overflow:hidden). Flips above button
when near bottom of viewport.
2. CRITICAL: Picker stretched full screen width
position:fixed removed the containing block width constraint. Added
max-width:220px; width:max-content to .project-picker.
3. UX: No way to create a project from the picker
Added '+ New project': creates project and moves session in one click.
4. UX: Feature was undiscoverable
Folder button shows persistently (blue, 60% opacity) when session
has a project.
5. Minor: Event listener leak
removeEventListener was missing from picker item onclick handlers.
Tests: 237 passed (7 pre-existing failures from unrelated logger bug).
- Picker dropdown: append to document.body with fixed positioning instead
of inside the session-item (which has overflow:hidden). Flips above
when near bottom of viewport.
- Add "+ New project" item at bottom of picker so users can create a
project and assign in one flow.
- Folder button stays visible (blue, 60% opacity) when session belongs
to a project, instead of only appearing on hover.
- Clean up document click listener in all picker item onclick handlers
to prevent stale listener accumulation.
Tests: 214 passed, 23 pre-existing failures, 0 regressions.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Session projects: named groups for organizing sessions. Project filter
bar with chips between search and session list. Create/rename/delete
projects, assign sessions via folder icon dropdown. Stored in
projects.json, project_id on Session model. 5 new API endpoints.
Code block copy button: every code block gets a Copy button in the
language header (or top-right for plain blocks). Clipboard API with
"Copied!" feedback.
Tool card expand/collapse: messages with 2+ tool cards get an
"Expand all / Collapse all" toggle above the card group.
13 new tests (237 total), all passing. No regressions.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Resolved path was not checked against the static/ directory, allowing
GET /static/../../../../etc/passwd to serve arbitrary files.
Fix: resolve the path and call relative_to(static_root) before serving.
Returns 404 for any path that escapes the static/ directory.
fix(css): add !important to three dead mobile overrides in @media(640px)
Three @media(max-width:640px) rules added by the mobile responsive PR
were silently overridden by later bare rules in the same stylesheet:
.composer-wrap padding (overridden by line 347)
.suggestion-grid max-width (overridden by line 364)
.tool-card margin-left (overridden by line 460)
Fix: add !important to these three declarations so the mobile overrides
actually fire on narrow screens.
Tests: 224 passed, 0 failed.
- Use 100dvh with 100vh fallback to fix composer being cut off on
mobile browsers where the address bar affects viewport height
- Add comprehensive @media(max-width:640px) rules: topbar wrapping,
compact messages, full-width msg-body, smaller chips and buttons,
responsive composer, approval cards, tool cards, settings modal
- Use font-size:16px on textarea to prevent iOS/Android auto-zoom
on input focus (browsers zoom when font-size < 16px)
- Add .topbar-left class on title wrapper for responsive stacking
