feat: TASK-006 left panel redesign — 5-section layout with attunement status and activity log, remove CalendarDisplay

docs/project-structure.txt

@@ -182,6 +182,8 @@ Mana-Loop/
 │   │   │   │   └── index.ts
 │   │   │   ├── AchievementsDisplay.tsx
 │   │   │   ├── ActionButtons.tsx
+│   │   │   ├── ActivityLogPanel.tsx
+│   │   │   ├── AttunementStatus.tsx
 │   │   │   ├── CalendarDisplay.tsx
 │   │   │   ├── ConfirmDialog.tsx
 │   │   │   ├── CraftingProgress.tsx

src/app/components/LeftPanel.tsx

@@ -3,9 +3,11 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Mountain } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
 import { ManaDisplay } from '@/components/game';
 import { ActionButtons } from '@/components/game';
-import { CalendarDisplay } from '@/components/game';
+import { AttunementStatus } from '@/components/game/AttunementStatus';
+import { ActivityLogPanel } from '@/components/game/ActivityLogPanel';
 import { DebugName } from '@/lib/game/debug-context';
 import { useGameStore, useManaStore, useSkillStore, useCombatStore, useCraftingStore, usePrestigeStore } from '@/lib/game/stores';
 import { getUnifiedEffects } from '@/lib/game/effects';
@@ -15,52 +17,34 @@ import { computeTotalMaxMana, computeTotalRegen, computeTotalClickMana } from '@
 export function LeftPanel() {
   const [isGathering, setIsGathering] = useState(false);
 
-  // Get state from modular stores
   const rawMana = useManaStore((s) => s.rawMana);
   const elements = useManaStore((s) => s.elements);
   const meditateTicks = useManaStore((s) => s.meditateTicks);
-
   const skills = useSkillStore((s) => s.skills);
   const skillTiers = useSkillStore((s) => s.skillTiers);
   const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
-
   const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
-
   const equippedInstances = useCraftingStore((s) => s.equippedInstances);
   const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
-
   const gatherMana = useGameStore((s) => s.gatherMana);
-  const day = useGameStore((s) => s.day);
-  const hour = useGameStore((s) => s.hour);
-
   const spireMode = useCombatStore((s) => s.spireMode);
   const enterSpireMode = useCombatStore((s) => s.enterSpireMode);
   const currentAction = useCombatStore((s) => s.currentAction);
-
   const currentStudyTarget = useSkillStore((s) => s.currentStudyTarget);
-
   const designProgress = useCraftingStore((s) => s.designProgress);
   const designProgress2 = useCraftingStore((s) => s.designProgress2);
   const preparationProgress = useCraftingStore((s) => s.preparationProgress);
   const applicationProgress = useCraftingStore((s) => s.applicationProgress);
   const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
 
-  const handleGatherStart = () => {
+  const handleGatherStart = () => { setIsGathering(true); gatherMana(); };
-    setIsGathering(true);
+  const handleGatherEnd = () => { setIsGathering(false); };
-    gatherMana();
-  };
-
-  const handleGatherEnd = () => {
-    setIsGathering(false);
-  };
 
   useEffect(() => {
     if (!isGathering) return;
-
     let lastGatherTime = 0;
     const minGatherInterval = 100;
     let animationFrameId: number;
-
     const gatherLoop = (timestamp: number) => {
       if (timestamp - lastGatherTime >= minGatherInterval) {
         gatherMana();
@@ -68,36 +52,21 @@ export function LeftPanel() {
       }
       animationFrameId = requestAnimationFrame(gatherLoop);
     };
-
     animationFrameId = requestAnimationFrame(gatherLoop);
     return () => cancelAnimationFrame(animationFrameId);
   }, [isGathering, gatherMana]);
 
-  const upgradeEffects = getUnifiedEffects({
+  const upgradeEffects = getUnifiedEffects({ skillUpgrades, skillTiers, equippedInstances, equipmentInstances });
-    skillUpgrades,
+  const maxMana = computeTotalMaxMana({ skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances }, upgradeEffects);
-    skillTiers,
+  const baseRegen = computeTotalRegen({ skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances }, upgradeEffects);
-    equippedInstances,
+  const clickMana = computeTotalClickMana({ skills, skillUpgrades, skillTiers, equippedInstances, equipmentInstances }, upgradeEffects);
-    equipmentInstances,
-  });
-
-  const maxMana = computeTotalMaxMana(
-    { skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances },
-    upgradeEffects
-  );
-  const baseRegen = computeTotalRegen(
-    { skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances },
-    upgradeEffects
-  );
-  const clickMana = computeTotalClickMana(
-    { skills, skillUpgrades, skillTiers, equippedInstances, equipmentInstances },
-    upgradeEffects
-  );
   const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
-  const incursionStrength = getIncursionStrength(day, hour);
+  const incursionStrength = getIncursionStrength(useGameStore((s) => s.day), useGameStore((s) => s.hour));
   const effectiveRegen = baseRegen * (1 - incursionStrength) * meditationMultiplier;
 
   return (
-    <div className="md:w-80 space-y-4 flex-shrink-0">
+    <div className="md:w-80 space-y-3 flex-shrink-0 p-1">
+      {/* 1. Mana Display */}
       <DebugName name="ManaDisplay">
         <ManaDisplay
           rawMana={rawMana}
@@ -112,21 +81,21 @@ export function LeftPanel() {
         />
       </DebugName>
 
+      {/* 2. Spire Entry */}
       {!spireMode && (
         <DebugName name="ClimbSpireButton">
-          <Button
+          <Button className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white" size="lg" onClick={enterSpireMode}>
-            className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
-            size="lg"
-            onClick={enterSpireMode}
-          >
             <Mountain className="w-5 h-5 mr-2" />
             Climb the Spire
           </Button>
         </DebugName>
       )}
 
+      {/* 3. Current Action */}
       {!spireMode && (
         <DebugName name="ActionButtons">
+          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
+            <CardContent className="pt-3">
               <ActionButtons
                 currentAction={currentAction}
                 currentStudyTarget={currentStudyTarget as any}
@@ -136,15 +105,25 @@ export function LeftPanel() {
                 applicationProgress={applicationProgress}
                 equipmentCraftingProgress={equipmentCraftingProgress}
               />
+            </CardContent>
+          </Card>
         </DebugName>
       )}
 
-      <DebugName name="CalendarDisplay">
+      {/* 4. Attunement Status */}
-        <CalendarDisplay
+      {!spireMode && (
-          day={day}
+        <DebugName name="AttunementStatus">
-          hour={hour}
+          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
-          incursionStrength={0} // Now calculated in page.tsx and passed
+            <CardContent className="pt-3">
-        />
+              <AttunementStatus />
+            </CardContent>
+          </Card>
+        </DebugName>
+      )}
+
+      {/* 5. Activity Log */}
+      <DebugName name="ActivityLogPanel">
+        <ActivityLogPanel />
       </DebugName>
     </div>
   );

src/components/game/ActivityLogPanel.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useCombatStore } from '@/lib/game/stores';
+import { ActivityLog } from './tabs/ActivityLog';
+
+/**
+ * Activity log panel for the left sidebar.
+ * Wraps the existing ActivityLog tab component with store integration,
+ * showing only the most recent 20 entries.
+ */
+export function ActivityLogPanel() {
+  const activityLog = useCombatStore((s) => s.activityLog);
+
+  return (
+    <ActivityLog activityLog={activityLog} maxEntries={20} />
+  );
+}
+
+ActivityLogPanel.displayName = 'ActivityLogPanel';

src/components/game/AttunementStatus.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useAttunementStore } from '@/lib/game/stores';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+const SLOT_LABELS: Record<string, string> = {
+  rightHand: 'R. Hand',
+  leftHand: 'L. Hand',
+  head: 'Head',
+  back: 'Back',
+  chest: 'Chest',
+  leftLeg: 'L. Leg',
+  rightLeg: 'R. Leg',
+};
+
+export function AttunementStatus() {
+  const attunements = useAttunementStore((s) => s.attunements);
+
+  const activeAttunements = Object.entries(attunements)
+    .filter(([, state]) => state.active)
+    .sort(([, a], [, b]) => {
+      const orderA = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === a.id);
+      const orderB = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === b.id);
+      return orderA - orderB;
+    });
+
+  const xpForNext = (level: number) => {
+    if (level <= 1) return 0;
+    if (level === 2) return 1000;
+    return Math.floor(1000 * Math.pow(2, level - 2) * (level >= 3 ? 1.25 : 1));
+  };
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-bold">Attunements</span>
+        <span className="text-[10px] text-[var(--text-muted)]">{activeAttunements.length} active</span>
+      </div>
+      <Separator className="bg-[var(--border-subtle)]" />
+      <div className="space-y-1.5">
+        {activeAttunements.length === 0 ? (
+          <div className="text-[10px] text-[var(--text-muted)] italic">No attunements active</div>
+        ) : (
+          activeAttunements.map(([id, state]) => {
+            const def = ATTUNEMENTS_DEF[id];
+            if (!def) return null;
+            const nextXp = xpForNext(state.level);
+            const xpProgress = nextXp > 0 ? (state.experience / nextXp) * 100 : 0;
+
+            return (
+              <TooltipProvider key={id}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-2 p-1.5 rounded bg-[var(--bg-sunken)]/50 border border-[var(--border-subtle)]">
+                      <span className="text-sm">{def.icon}</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-[11px] font-medium text-[var(--text-primary)] truncate">
+                            {def.name}
+                          </span>
+                          <span className="text-[10px] text-[var(--text-secondary)] font-mono">
+                            Lv.{state.level}
+                          </span>
+                        </div>
+                        <div className="text-[10px] text-[var(--text-muted)]">
+                          <span className="capitalize">{SLOT_LABELS[def.slot] || def.slot}</span>
+                          {nextXp > 0 && (
+                            <span className="ml-1.5 font-mono">
+                              {Math.floor(state.experience).toLocaleString()}/{nextXp.toLocaleString()} XP
+                            </span>
+                          )}
+                        </div>
+                        {nextXp > 0 && (
+                          <div className="w-full h-0.5 bg-[var(--border-subtle)] rounded-full mt-0.5 overflow-hidden">
+                            <div
+                              className="h-full transition-all duration-500"
+                              style={{
+                                width: `${Math.min(100, xpProgress)}%`,
+                                backgroundColor: def.color,
+                                opacity: 0.7,
+                              }}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">
+                    <p className="text-xs max-w-[220px]">{def.desc}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
+AttunementStatus.displayName = 'AttunementStatus';

src/components/game/index.ts

@@ -16,3 +16,5 @@ export { StudyProgress } from './StudyProgress';
 export { ManaDisplay } from './ManaDisplay';
 export { TimeDisplay } from './TimeDisplay';
 export { UpgradeDialog } from './UpgradeDialog';
+export { AttunementStatus } from './AttunementStatus';
+export { ActivityLogPanel } from './ActivityLogPanel';

src/components/game/tabs/ActivityLog.tsx

@@ -6,9 +6,10 @@ import type { ActivityLogEntry } from '@/lib/game/types';
 
 interface ActivityLogProps {
   activityLog?: ActivityLogEntry[];
+  maxEntries?: number;
 }
 
-export function ActivityLog({ activityLog }: ActivityLogProps) {
+export function ActivityLog({ activityLog, maxEntries = 50 }: ActivityLogProps) {
   const entries = activityLog || [];
 
   return (
@@ -19,7 +20,7 @@ export function ActivityLog({ activityLog }: ActivityLogProps) {
       <CardContent>
         <ScrollArea className="h-48">
           <div className="space-y-1">
-            {entries.slice(0, 50).map((entry, i) => {
+            {entries.slice(0, maxEntries).map((entry, i) => {
               const isLatest = i === 0;
               const color = getEventStyle(entry.eventType);
               return (