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

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 (