f6c422bb14
Epic 4 Story 2 compleet: Meerdere artifacts met open/close/switch werken!
E4.S2 - Artifact Lifecycle Management (3 SP)
- Store state: openArtifacts[], activeArtifactId
- Store actions met max 3 artifacts logica
- ArtifactArea refactor naar ArtifactContainer
- CommandCenter integration met nieuwe artifact system
Store Updates (stores/swift-store.ts):
- openArtifacts: Artifact[] — Array van open artifacts
- activeArtifactId: string | null — Currently active artifact
- Initial state: [], null
Store Actions:
```typescript
openArtifact(artifact: Omit<Artifact, 'id' | 'createdAt'>) {
// Auto-generate ID + timestamp
// Max 3 artifacts: remove oldest if at capacity
// Set new artifact as active
}
closeArtifact(id: string) {
// Filter out artifact
// Auto-switch to last remaining if closing active
}
switchArtifact(id: string) {
// Verify artifact exists
// Set activeArtifactId
}
closeAllArtifacts() {
// Clear all artifacts + active ID
}
```
Features:
- Max 3 artifacts enforced (oldest removed at capacity)
- Auto-switch when closing active artifact
- Console logging voor debugging
- ID generation met crypto.randomUUID()
- Timestamp tracking met createdAt
Components Updated:
- components/swift/artifacts/artifact-area.tsx (30 regels)
- Simplified: alleen ArtifactContainer rendering
- Props: openArtifacts, activeArtifactId, switchArtifact, closeArtifact
- components/swift/command-center/command-center.tsx
- openArtifact() i.p.v. openBlock()
- getArtifactTitle() voor dynamic titles
- Escape: closeAllArtifacts() i.p.v. closeBlock()
- Artifact opening met title generation
Integration Flow:
1. Chat: AI genereert action met artifact data
2. ChatPanel: setPendingAction(action)
3. CommandCenter: useEffect detecteert pendingAction
4. CommandCenter: getArtifactTitle(type, prefill)
5. CommandCenter: openArtifact({ type, prefill, title })
6. Store: Auto-generate ID, check max 3, add to array
7. ArtifactArea: Renders ArtifactContainer met artifacts
8. ArtifactContainer: Shows tabs (if >1), renders active block
Console Logging:
- "[Store] Max 3 artifacts reached, removing oldest"
- "[Store] Opening artifact: dagnotitie Dagnotitie - Jan"
- "[Store] Closing artifact: [id] New active: [id]"
- "[Store] Switching to artifact: [id]"
- "[Store] Cannot switch to artifact: [id] (not found)"
Build Status:
- ✅ pnpm build succesvol (geen type errors)
- Alleen bekende warnings (Supabase realtime, useCallback)
Voortgang: 56 SP / 85 SP (66%) - 18/31 stories compleet, 2 geskipt
Next: E4.S3 (Slide-in animatie) - 200ms ease-out transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Command Center (v3.0)
|
|
*
|
|
* Main container for the Swift interface.
|
|
* Split-screen layout: Chat Panel (40%) | Artifact Area (60%)
|
|
*
|
|
* Layout specs:
|
|
* - Context Bar: 48px (h-12) - UNCHANGED
|
|
* - Split container: flex-1 (fills remaining space)
|
|
* - Chat Panel: 40% width (desktop), 100% (mobile)
|
|
* - Artifact Area: 60% width (desktop), 100% (mobile)
|
|
*
|
|
* Epic: E1 (Foundation)
|
|
* Stories: E1.S2 (Split-screen layout), E1.S3 (Placeholders), E1.S4 (Responsive)
|
|
*/
|
|
|
|
import { useEffect, useCallback, useRef } from 'react';
|
|
import { useSwiftStore } from '@/stores/swift-store';
|
|
import { ContextBar } from './context-bar';
|
|
import { OfflineBanner } from './offline-banner';
|
|
import { ChatPanel } from '../chat/chat-panel';
|
|
import { ArtifactArea } from '../artifacts/artifact-area';
|
|
import { getArtifactTitle } from '../artifacts/artifact-container';
|
|
|
|
export function CommandCenter() {
|
|
const { closeAllArtifacts, openArtifacts, openArtifact, pendingAction, setPendingAction } = useSwiftStore();
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Global keyboard shortcuts
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
// Escape: close all artifacts
|
|
if (e.key === 'Escape' && openArtifacts.length > 0) {
|
|
e.preventDefault();
|
|
closeAllArtifacts();
|
|
}
|
|
|
|
// Cmd/Ctrl + K: focus input (chat input in v3.0)
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
inputRef.current?.focus();
|
|
}
|
|
},
|
|
[openArtifacts, closeAllArtifacts]
|
|
);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [handleKeyDown]);
|
|
|
|
// E3.S6 + E4.S2: Handle pending actions from chat (artifact opening)
|
|
useEffect(() => {
|
|
if (!pendingAction) return;
|
|
|
|
console.log('[CommandCenter] Processing pending action:', pendingAction);
|
|
|
|
// Check if action has artifact data
|
|
if (pendingAction.artifact) {
|
|
const { type, prefill } = pendingAction.artifact;
|
|
|
|
// Generate title for the artifact
|
|
const title = getArtifactTitle(type, prefill);
|
|
|
|
console.log('[CommandCenter] Opening artifact:', type, title);
|
|
|
|
// Open the artifact (E4.S2 - new artifact system)
|
|
openArtifact({
|
|
type,
|
|
prefill,
|
|
title,
|
|
});
|
|
|
|
// Clear pending action after processing
|
|
setPendingAction(null);
|
|
} else {
|
|
console.log('[CommandCenter] Action has no artifact, skipping');
|
|
setPendingAction(null);
|
|
}
|
|
}, [pendingAction, openArtifact, setPendingAction]);
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen overflow-hidden">
|
|
{/* Offline Banner */}
|
|
<OfflineBanner />
|
|
|
|
{/* Context Bar - 48px (unchanged) */}
|
|
<ContextBar />
|
|
|
|
{/* Split-screen container - flex-1 */}
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Chat Panel - 40% (desktop), 100% (mobile) */}
|
|
<div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col">
|
|
<ChatPanel />
|
|
</div>
|
|
|
|
{/* Artifact Area - 60% (desktop), hidden on mobile */}
|
|
<div className="hidden lg:flex lg:w-[60%] flex-col">
|
|
<ArtifactArea />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|