feat(web): add PR-comment toggle, back link, chart tooltip

- SettingsView: toggle for post_results_to_pr (calls PUT /post-results)
- SkillSelector: back link to installation detail in top-left
- ActivityChart: custom styled hover tooltip replacing native title

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mariuspruvot

apps/web/src/features/dashboard/ActivityChart.tsx

@@ -3,6 +3,8 @@
  * 30 bars with 3px gap, 120px height, accent color with active highlight.
  */
 
+import { useState } from 'react'
+
 interface DailyCount {
   date: string
   count: number
@@ -26,33 +28,57 @@ function fillToThirtyDays(data: DailyCount[]): DailyCount[] {
   return result
 }
 
+function formatDate(iso: string): string {
+  const d = new Date(`${iso}T00:00:00Z`)
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
 export default function ActivityChart({ data }: ActivityChartProps) {
   const days = fillToThirtyDays(data)
   const maxCount = Math.max(...days.map((d) => d.count), 1)
+  const [hoverIdx, setHoverIdx] = useState<number | null>(null)
 
   return (
     <div>
-      <div className="flex items-end gap-[3px]" style={{ height: 120 }}>
+      <div className="relative flex items-end gap-[3px]" style={{ height: 120 }}>
         {days.map((d, i) => {
           const heightPx = d.count === 0 ? 2 : Math.max(4, (d.count / maxCount) * 110)
           const isRecent = i >= 23
           const isEmpty = d.count === 0
+          const isHovered = hoverIdx === i
 
           return (
             <div
               key={d.date}
-              className="flex-1 rounded-[2px] transition-opacity hover:opacity-100"
+              onMouseEnter={() => setHoverIdx(i)}
+              onMouseLeave={() => setHoverIdx((prev) => (prev === i ? null : prev))}
+              className="relative flex-1 rounded-[2px] transition-all"
               style={{
                 height: heightPx,
                 backgroundColor: isEmpty
                   ? 'var(--color-rule)'
                   : isRecent
                     ? 'var(--color-accent)'
                     : 'rgba(226,160,57,0.35)',
-                opacity: isEmpty ? 0.5 : isRecent ? 1 : 0.85,
+                opacity: isHovered ? 1 : isEmpty ? 0.5 : isRecent ? 1 : 0.85,
+                outline: isHovered ? '1px solid var(--color-accent)' : 'none',
+                outlineOffset: 1,
               }}
-              title={`${d.date}: ${d.count} session${d.count !== 1 ? 's' : ''}`}
-            />
+            >
+              {isHovered && (
+                <div
+                  className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 rounded-default bg-bg2 border border-rule-str shadow-card whitespace-nowrap pointer-events-none z-10"
+                  role="tooltip"
+                >
+                  <div className="font-mono text-[11px] text-ink font-semibold leading-tight">
+                    {d.count} session{d.count !== 1 ? 's' : ''}
+                  </div>
+                  <div className="font-mono text-[10px] text-dim leading-tight">
+                    {formatDate(d.date)}
+                  </div>
+                </div>
+              )}
+            </div>
           )
         })}
       </div>

apps/web/src/features/installation/SettingsView.tsx

@@ -14,6 +14,7 @@ interface InstallationDetail {
   byok_key_status: string | null
   byok_validated_at: string | null
   suppression_labels: string[]
+  post_results_to_pr: boolean
 }
 
 const GITHUB_APP_SLUG = import.meta.env.VITE_GITHUB_APP_SLUG ?? 'helprs'
@@ -35,6 +36,10 @@ export default function SettingsView() {
   const [labelsLoading, setLabelsLoading] = useState(false)
   const [labelsError, setLabelsError] = useState<string | null>(null)
 
+  const [postResults, setPostResults] = useState(false)
+  const [postResultsLoading, setPostResultsLoading] = useState(false)
+  const [postResultsError, setPostResultsError] = useState<string | null>(null)
+
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
   const fetchInstallation = useCallback(async () => {
@@ -48,6 +53,7 @@ export default function SettingsView() {
       const data = await resp.json() as InstallationDetail
       setInstallation(data)
       setLabels(data.suppression_labels)
+      setPostResults(data.post_results_to_pr)
     } finally {
       setLoading(false)
     }
@@ -148,6 +154,27 @@ export default function SettingsView() {
     saveLabels(updated)
   }
 
+  const togglePostResults = async (enabled: boolean) => {
+    const previous = postResults
+    setPostResults(enabled)
+    setPostResultsLoading(true)
+    setPostResultsError(null)
+    try {
+      const resp = await apiFetch(`/api/v1/installations/${installationId}/post-results`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ post_results_to_pr: enabled }),
+      })
+      if (!resp.ok) {
+        const data = await resp.json() as { message?: string }
+        setPostResultsError(data.message ?? 'Failed to update setting')
+        setPostResults(previous)
+      }
+    } finally {
+      setPostResultsLoading(false)
+    }
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -334,6 +361,38 @@ export default function SettingsView() {
         </a>
       </Card>
 
+      {/* PR Integration */}
+      <Card className="mb-6">
+        <Overline className="mb-4">PR Integration</Overline>
+        <label className="flex items-start gap-3 cursor-pointer select-none">
+          <button
+            type="button"
+            role="switch"
+            aria-checked={postResults}
+            onClick={() => togglePostResults(!postResults)}
+            disabled={postResultsLoading}
+            className={`relative mt-0.5 shrink-0 w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-50 ${
+              postResults ? 'bg-accent' : 'bg-rule-str'
+            }`}
+          >
+            <span
+              className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-bg transition-transform ${
+                postResults ? 'translate-x-4' : 'translate-x-0'
+              }`}
+            />
+          </button>
+          <div>
+            <p className="text-ink text-sm font-sans">Post results to PR</p>
+            <p className="text-dim text-xs font-mono mt-0.5">
+              // after each challenge-me session, post the scorecard as a PR comment
+            </p>
+          </div>
+        </label>
+        {postResultsError && (
+          <p className="text-danger text-sm mt-3">{postResultsError}</p>
+        )}
+      </Card>
+
       {/* Danger Zone */}
       <Card className="border-danger/20">
         <Overline className="mb-4 text-danger">Danger Zone</Overline>

apps/web/src/features/session/SkillSelector.test.tsx

@@ -1,7 +1,12 @@
 import { cleanup, render, screen, fireEvent } from '@testing-library/react'
 import { afterEach, describe, expect, test, vi } from 'vitest'
+import { MemoryRouter } from 'react-router'
 import SkillSelector, { SKILLS } from './SkillSelector'
 
+function renderWithRouter(ui: React.ReactElement) {
+  return render(<MemoryRouter>{ui}</MemoryRouter>)
+}
+
 afterEach(() => {
   cleanup()
 })
@@ -14,7 +19,7 @@ describe('SkillSelector', () => {
   }
 
   test('renders all skill cards', () => {
-    render(<SkillSelector {...defaultProps} />)
+    renderWithRouter(<SkillSelector {...defaultProps} />)
 
     for (const skill of SKILLS) {
       expect(screen.getByTestId(`skill-card-${skill.name}`)).toBeTruthy()
@@ -24,7 +29,7 @@ describe('SkillSelector', () => {
   })
 
   test('renders repo and PR info in header', () => {
-    render(<SkillSelector {...defaultProps} />)
+    renderWithRouter(<SkillSelector {...defaultProps} />)
 
     expect(screen.getByTestId('skill-selector')).toBeTruthy()
     const repoElements = screen.getAllByText('acme/helprs')
@@ -35,15 +40,15 @@ describe('SkillSelector', () => {
 
   test('calls onSelectSkill when challenge-me card is clicked', () => {
     const onSelectSkill = vi.fn()
-    render(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} />)
+    renderWithRouter(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} />)
 
     fireEvent.click(screen.getByTestId('skill-card-challenge-me'))
     expect(onSelectSkill).toHaveBeenCalledWith('challenge-me')
   })
 
   test('does not call onSelectSkill for coming-soon skills', () => {
     const onSelectSkill = vi.fn()
-    render(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} />)
+    renderWithRouter(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} />)
 
     fireEvent.click(screen.getByTestId('skill-card-eli5'))
     fireEvent.click(screen.getByTestId('skill-card-pair-debug'))
@@ -53,19 +58,19 @@ describe('SkillSelector', () => {
   })
 
   test('shows "soon" badge for unreleased skills', () => {
-    render(<SkillSelector {...defaultProps} />)
+    renderWithRouter(<SkillSelector {...defaultProps} />)
 
     const badges = screen.getAllByText('soon')
     expect(badges.length).toBe(4)
   })
 
   test('shows DEFAULT badge for challenge-me', () => {
-    render(<SkillSelector {...defaultProps} />)
+    renderWithRouter(<SkillSelector {...defaultProps} />)
     expect(screen.getByText('DEFAULT')).toBeTruthy()
   })
 
   test('disables cards when disabled prop is true', () => {
-    render(<SkillSelector {...defaultProps} disabled={true} />)
+    renderWithRouter(<SkillSelector {...defaultProps} disabled={true} />)
 
     for (const skill of SKILLS) {
       const card = screen.getByTestId(`skill-card-${skill.name}`) as HTMLButtonElement
@@ -75,14 +80,14 @@ describe('SkillSelector', () => {
 
   test('does not call onSelectSkill when disabled', () => {
     const onSelectSkill = vi.fn()
-    render(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} disabled={true} />)
+    renderWithRouter(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} disabled={true} />)
 
     fireEvent.click(screen.getByTestId('skill-card-challenge-me'))
     expect(onSelectSkill).not.toHaveBeenCalled()
   })
 
   test('renders helPRs branding', () => {
-    render(<SkillSelector {...defaultProps} />)
+    renderWithRouter(<SkillSelector {...defaultProps} />)
     const brandElements = screen.getAllByText('helPRs')
     expect(brandElements.length).toBeGreaterThan(0)
   })

apps/web/src/features/session/SkillSelector.tsx

@@ -3,6 +3,7 @@
  * Skills per spec: challenge-me (active), eli5/pair-debug/hot-seat/test-me (coming soon).
  */
 
+import { Link, useParams } from 'react-router'
 import { Card, Chip, Overline } from '../../shared/components'
 import type { Skill } from './containerTypes'
 
@@ -58,11 +59,22 @@ export default function SkillSelector({
   onSelectSkill,
   disabled = false,
 }: SkillSelectorProps) {
+  const { installationId } = useParams<{ installationId: string }>()
+  const installationUrl = installationId ? `/installations/${installationId}` : '/installations'
+
   return (
     <div
       data-testid="skill-selector"
       className="min-h-screen bg-bg text-ink font-sans flex flex-col items-center justify-center px-6 py-12"
     >
+      {/* Back to installation */}
+      <Link
+        to={installationUrl}
+        className="absolute top-5 left-5 font-mono text-xs text-dim hover:text-ink2 transition-colors"
+      >
+        {'\u2190'} installation
+      </Link>
+
       {/* Header */}
       <div className="text-center mb-10 max-w-lg">
         <h1 className="font-mono text-lg font-bold text-accent mb-2">helPRs</h1>