UI/UX Problem of HomePage

[verkyyi]

1. Chat Input not visible on iPhone Browser.
2. Above the conversation Pannel, "This page is an agent — ask it anything about my background, projects, or fit for a role." this is a duplicate than the first greeting, should be removed.
3. The Top Avartar Using First letter of last name and first name can be removed also, making space for the chat Pannel.
4. In Footer, remove Credits to JSONRESUME.
5. Clear Conversation link within the ChatPannel is not needed, if we want, we might use LLM to power this funciton.
6. Should limit the appearing of output response to suit for human reading.
7. should limit the maximum length of one single response, suitable for normal human conversation.

[github-actions]

Spec

Problem: The homepage chat UI has seven UX issues: the chat input is not visible on iPhone Safari; a static tagline above the conversation panel duplicates the opening greeting; name-initials avatar wastes vertical space that the chat panel needs; the footer credits JSON Resume unnecessarily; the "clear conversation" button adds noise without value; and AI responses are both too long and appear too fast for comfortable conversation.

Scope:

• Fix chat input visibility/reachability on iPhone Safari (ChatPanel.tsx, ChatPanel.css)
• Remove .hero-explainer tagline from Hero.tsx (the "This page is an agent..." sentence)
• Remove name-initials avatar from Hero.tsx to reclaim vertical space
• Remove "Resume schema: JSON Resume" credit from Footer.tsx
• Remove the "clear conversation" button from ChatPanel.tsx
• Reduce MAX_RESPONSE_CHARS in ChatPanel.tsx (currently 2 000) to a conversational limit
• Slow or cap the typewriter drip rate so text appears at a comfortable reading pace

Out of scope:

• LLM-powered "clear conversation" feature (mentioned as a future possibility, not this issue)
• Backend/prompt changes to response generation
• Replacing the avatar with a photo (only the initials fallback is removed)
• Dashboard or non-homepage pages

Acceptance criteria:

• On iPhone Safari (iOS 15+), the chat input field is visible, reachable, and tappable; it is not hidden behind the virtual keyboard or clipped by the viewport
• The static tagline "This page is an agent — ask it anything about my background, projects, or fit for a role." no longer appears above the conversation panel
• The name-initials avatar circle is removed from the hero area; the vertical space previously occupied is available to the chat panel
• The footer contains no reference to JSON Resume (link and surrounding text removed)
• The "clear conversation" button does not appear in the chat panel at any point
• MAX_RESPONSE_CHARS is reduced to ≤ 800 characters; the truncation suffix remains functional
• The typewriter drip rate produces readable output — responses do not flash onto the screen faster than a comfortable reading speed (target ≤ 40 ms/character or equivalent)

Open questions:

• Item 1 (iPhone input visibility): the root cause needs investigation — likely an iOS Safari viewport-height bug when the on-screen keyboard opens, possibly fixable via dvh units or a visualViewport scroll listener. The planner should confirm the approach before implementation.
• Item 6 (drip rate): "suit for human reading" is subjective — a sensible default is proposed above (40 ms/char), but the planner may tune this based on the existing adaptive-speed logic in ChatPanel.tsx:232–252.

---

🤖 agent-team / spec

Generated by Spec Agent for issue #115 · ◷

To install this agentic workflow, run

gh aw add verkyyi/github-agent-runner/catalog/agent-team/spec-agent.md@cb66d12806d7f00d220f11e964bc27dfec672913

[github-actions]

Implementation plan

Approach: Seven focused removals and two constant tweaks across four component files, with corresponding test updates. The iOS keyboard fix is the only non-trivial addition: a visualViewport resize listener in ChatPanel.tsx sets a --keyboard-inset CSS variable so that resume-viewport (locked at 100dvh; overflow: hidden) shrinks dynamically when the on-screen keyboard appears on iOS Safari. All other items are straight-line deletes or value changes.

Files to change:

• web/src/components/Hero.tsx — remove .hero-explainer paragraph; skip avatar div when no image (only render for photo case, removing the initials-only circle)
• web/src/components/Hero.css — remove .hero-explainer CSS rule; keep .hero-avatar (still used when a photo is present)
• web/src/components/Footer.tsx — remove the · Resume schema: JSON Resume separator + link
• web/src/components/ChatPanel.tsx — four edits: (a) MAX_RESPONSE_CHARS 2000 → 800, (b) DRIP_TICK_MS 18 → 40, (c) remove reset() and the conditional chatp-header JSX block, (d) add visualViewport resize/scroll listener that writes --keyboard-inset to document.documentElement
• web/src/components/ChatPanel.css — remove .chatp-header, .chatp-clear, .chatp-clear:hover rules
• web/src/styles/global.css — update .resume-viewport height to calc(100dvh - var(--keyboard-inset, 0px)) so the keyboard-inset variable takes effect
• web/src/__tests__/Hero.test.tsx — drop explainer assertions; replace initials assertion with "avatar absent when no image"
• web/src/__tests__/ChatPanel.test.tsx — remove three clear-button tests; update truncation test from 2000 → 800

Steps:

1. Hero.tsx — Delete the <p className="hero-explainer"> element and change the avatar <div> to only render when image is truthy ({image && <div className="hero-avatar">...</div>}). Remove the now-unused initials() helper.
2. Hero.css — Delete the .hero-explainer { ... } rule (3 lines). Leave .hero-avatar intact for the photo case.
3. Footer.tsx — Delete {' · '}Resume schema:{' '}<a href="(jsonresume.org/redacted) ...>JSON Resume</a> (3 lines inside the FooterWrapper).
4. ChatPanel.tsx — constants & clear button — Change MAX_RESPONSE_CHARS to 800; change DRIP_TICK_MS to 40. Delete the reset() function (lines 192–201). Delete the entire {messages.length > 0 && ( <div className="chatp-header">...</div> )} block (lines 334–340).
5. ChatPanel.tsx — iOS keyboard listener — Add a useEffect (alongside the existing cleanup effect) that attaches to window.visualViewport?.resize and scroll. On fire, compute const inset = Math.max(0, window.innerHeight - (window.visualViewport!.offsetTop + window.visualViewport!.height)) and call document.documentElement.style.setProperty('--keyboard-inset', inset + 'px'). On cleanup, remove listeners and call removeProperty('--keyboard-inset').
6. global.css — In .resume-viewport, change height: 100dvh; to height: calc(100dvh - var(--keyboard-inset, 0px)); (keep the height: 100vh fallback line above it unchanged).
7. ChatPanel.css — Delete .chatp-header { ... }, .chatp-clear { ... }, and .chatp-clear:hover { ... } rules (14 lines, 23–41).
8. Hero.test.tsx — Test 1 ("renders name, tagline, and explainer"): remove the expect(screen.getByText(/This page is an agent/i)) line; rename test to "renders name and tagline". Test 2 ("falls back to initials when no image"): replace body with expect(screen.queryByTestId('hero-avatar')).not.toBeInTheDocument(). Test 3 ("renders without tagline"): remove the expect(screen.getByText(/This page is an agent/i)) line.
9. ChatPanel.test.tsx — Remove tests: "reset link appears only when messages exist" (lines 191–199), "reset link is hidden when there are no messages" (lines 201–205), "reset clears messages and sessionStorage" (lines 313–324). In the truncation test: change 'x'.repeat(1500) (two chunks of 1500) to one chunk of 'x'.repeat(900) and one of 'x'.repeat(100) (total > 800 to trigger truncation), change the x{2000} regex to x{800}, and update the LessThanOrEqual bound to 800 + ' ... (response truncated)'.length.

Tests: 16 test files / 101 tests. The two changed test files are Hero.test.tsx (3 tests updated) and ChatPanel.test.tsx (3 tests deleted, 1 updated). No new test file needed. Run cd web && npx vitest run to verify; the truncation + streaming tests are the main regression risk.

Rollback: Revert the PR; all changes are frontend-only with no data migration, so reverting the merge commit restores the previous behaviour instantly.

---

🤖 agent-team / planner

Generated by Planner Agent · ◷

To install this agentic workflow, run

gh aw add verkyyi/github-agent-runner/catalog/agent-team/planner-agent.md@cb66d12806d7f00d220f11e964bc27dfec672913

[github-actions]

✅ Pipeline complete — ready for human review

Stage	Run
Spec	https://github.com/verkyyi/agentfolio/actions/runs/24714854137
Plan	https://github.com/verkyyi/agentfolio/actions/runs/24715045704
Impl	https://github.com/verkyyi/agentfolio/actions/runs/24715333986
Review	https://github.com/verkyyi/agentfolio/actions/runs/24715991643

PR: #116 — draft, awaiting your merge.
Iterations: 0 (kickback rounds before approval).

🤖 agent-team / reviewer

Generated by Reviewer Agent · ◷

To install this agentic workflow, run

gh aw add verkyyi/github-agent-runner/catalog/agent-team/reviewer-agent.md@cb66d12806d7f00d220f11e964bc27dfec672913