feat(companion): Migrate Companion from admin-v2 to studio-v2 as pure lesson tool

Remove Companion module entirely from admin-v2. Rebuild in studio-v2 as a
focused lesson timer (no dashboard mode). Direct flow: start → active → ended.
Fix timer bug where lastTickRef reset prevented countdown. Add companion link
to Sidebar and i18n translations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

studio-v2/components/companion/lesson-mode/PhaseTimeline.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { Check } from 'lucide-react'
+import { formatMinutes } from '@/lib/companion/constants'
+
+interface PhaseTimelinePhase {
+  id: string
+  shortName: string
+  displayName: string
+  duration: number
+  status: string
+  actualTime?: number
+  color: string
+}
+
+interface PhaseTimelineDetailedProps {
+  phases: PhaseTimelinePhase[]
+  currentPhaseIndex: number
+  onPhaseClick?: (index: number) => void
+}
+
+export function PhaseTimelineDetailed({
+  phases,
+  currentPhaseIndex,
+  onPhaseClick,
+}: PhaseTimelineDetailedProps) {
+  return (
+    <div className="bg-white border border-slate-200 rounded-xl p-6">
+      <h3 className="text-sm font-medium text-slate-500 mb-4">Unterrichtsphasen</h3>
+
+      <div className="flex items-start justify-between">
+        {phases.map((phase, index) => {
+          const isActive = index === currentPhaseIndex
+          const isCompleted = phase.status === 'completed'
+          const isPast = index < currentPhaseIndex
+
+          return (
+            <div key={phase.id} className="flex flex-col items-center flex-1">
+              {/* Top connector line */}
+              <div className="w-full flex items-center mb-2">
+                {index > 0 && (
+                  <div
+                    className="flex-1 h-1"
+                    style={{
+                      background: isPast || isCompleted
+                        ? phases[index - 1].color
+                        : '#e2e8f0',
+                    }}
+                  />
+                )}
+                {index === 0 && <div className="flex-1" />}
+
+                {/* Phase Circle */}
+                <button
+                  onClick={() => onPhaseClick?.(index)}
+                  disabled={!onPhaseClick}
+                  className={`
+                    relative w-12 h-12 rounded-full
+                    flex items-center justify-center
+                    font-bold text-lg
+                    transition-all duration-300
+                    ${onPhaseClick ? 'cursor-pointer hover:scale-110' : 'cursor-default'}
+                    ${isActive ? 'ring-4 ring-offset-2 shadow-lg' : ''}
+                  `}
+                  style={{
+                    backgroundColor: isActive || isCompleted || isPast ? phase.color : '#e2e8f0',
+                    color: isActive || isCompleted || isPast ? 'white' : '#64748b',
+                    '--tw-ring-color': isActive ? `${phase.color}40` : undefined,
+                  } as React.CSSProperties}
+                >
+                  {isCompleted ? (
+                    <Check className="w-6 h-6" />
+                  ) : (
+                    phase.shortName
+                  )}
+
+                  {isActive && (
+                    <span
+                      className="absolute inset-0 rounded-full animate-ping opacity-20"
+                      style={{ backgroundColor: phase.color }}
+                    />
+                  )}
+                </button>
+
+                {index < phases.length - 1 && (
+                  <div
+                    className="flex-1 h-1"
+                    style={{
+                      background: isCompleted ? phase.color : '#e2e8f0',
+                    }}
+                  />
+                )}
+                {index === phases.length - 1 && <div className="flex-1" />}
+              </div>
+
+              {/* Phase Label */}
+              <span
+                className={`
+                  text-sm font-medium mt-2
+                  ${isActive ? 'text-slate-900' : 'text-slate-500'}
+                `}
+              >
+                {phase.displayName}
+              </span>
+
+              {/* Duration */}
+              <span
+                className={`
+                  text-xs mt-1
+                  ${isActive ? 'text-slate-700' : 'text-slate-400'}
+                `}
+              >
+                {formatMinutes(phase.duration)}
+              </span>
+
+              {/* Actual time if completed */}
+              {phase.actualTime !== undefined && phase.actualTime > 0 && (
+                <span className="text-xs text-slate-400 mt-0.5">
+                  (tatsaechlich: {Math.round(phase.actualTime / 60)} Min)
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}