mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-15 02:42:45 +08:00
Refactor Terminal Dashboard: Remove Sessions Panel, Update Toolbar and Page Layout
- Removed the Sessions panel from the DashboardToolbar component, making the Sessions sidebar always visible. - Updated the TerminalDashboardPage layout to include a fixed session sidebar alongside the terminal grid. - Adjusted related imports and state management for session counts. - Added new document standards for YAML frontmatter schema, naming conventions, and content structure. - Introduced quality gates for spec-generator outputs, detailing scoring dimensions and per-phase criteria. - Created templates for architecture documents, epics & stories, product briefs, and requirements PRD.
This commit is contained in:
@@ -2,13 +2,12 @@
|
||||
// DashboardToolbar Component
|
||||
// ========================================
|
||||
// Top toolbar for Terminal Dashboard V2.
|
||||
// Provides toggle buttons for floating panels (Sessions/Issues/Queue/Inspector)
|
||||
// and layout preset controls.
|
||||
// Provides toggle buttons for floating panels (Issues/Queue/Inspector)
|
||||
// and layout preset controls. Sessions sidebar is always visible.
|
||||
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import {
|
||||
FolderTree,
|
||||
AlertCircle,
|
||||
ListChecks,
|
||||
Info,
|
||||
@@ -19,22 +18,16 @@ import {
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import {
|
||||
useSessionManagerStore,
|
||||
selectGroups,
|
||||
selectTerminalMetas,
|
||||
} from '@/stores/sessionManagerStore';
|
||||
import {
|
||||
useIssueQueueIntegrationStore,
|
||||
selectAssociationChain,
|
||||
} from '@/stores/issueQueueIntegrationStore';
|
||||
import { useIssues, useIssueQueue } from '@/hooks/useIssues';
|
||||
import { useTerminalGridStore } from '@/stores/terminalGridStore';
|
||||
import type { TerminalStatus } from '@/types/terminal-dashboard';
|
||||
|
||||
// ========== Types ==========
|
||||
|
||||
export type PanelId = 'sessions' | 'issues' | 'queue' | 'inspector';
|
||||
export type PanelId = 'issues' | 'queue' | 'inspector';
|
||||
|
||||
interface DashboardToolbarProps {
|
||||
activePanel: PanelId | null;
|
||||
@@ -55,20 +48,6 @@ const LAYOUT_PRESETS = [
|
||||
export function DashboardToolbar({ activePanel, onTogglePanel }: DashboardToolbarProps) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
// Session count
|
||||
const groups = useSessionManagerStore(selectGroups);
|
||||
const terminalMetas = useSessionManagerStore(selectTerminalMetas);
|
||||
const sessionCount = useMemo(() => {
|
||||
const allSessionIds = groups.flatMap((g) => g.sessionIds);
|
||||
let activeCount = 0;
|
||||
for (const sid of allSessionIds) {
|
||||
const meta = terminalMetas[sid];
|
||||
const status: TerminalStatus = meta?.status ?? 'idle';
|
||||
if (status === 'active') activeCount++;
|
||||
}
|
||||
return activeCount > 0 ? activeCount : allSessionIds.length;
|
||||
}, [groups, terminalMetas]);
|
||||
|
||||
// Issues count
|
||||
const { openCount } = useIssues();
|
||||
|
||||
@@ -100,13 +79,6 @@ export function DashboardToolbar({ activePanel, onTogglePanel }: DashboardToolba
|
||||
return (
|
||||
<div className="flex items-center gap-1 px-2 h-[40px] border-b border-border bg-muted/30 shrink-0">
|
||||
{/* Panel toggle buttons */}
|
||||
<ToolbarButton
|
||||
icon={FolderTree}
|
||||
label={formatMessage({ id: 'terminalDashboard.toolbar.sessions' })}
|
||||
isActive={activePanel === 'sessions'}
|
||||
onClick={() => onTogglePanel('sessions')}
|
||||
badge={sessionCount > 0 ? sessionCount : undefined}
|
||||
/>
|
||||
<ToolbarButton
|
||||
icon={AlertCircle}
|
||||
label={formatMessage({ id: 'terminalDashboard.toolbar.issues' })}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
// ========================================
|
||||
// Terminal Dashboard Page (V2)
|
||||
// ========================================
|
||||
// Terminal-first layout with floating panels.
|
||||
// Terminal-first layout with fixed session sidebar + floating panels.
|
||||
// Left sidebar: SessionGroupTree + AgentList (always visible)
|
||||
// Main area: TerminalGrid (tmux-style split panes)
|
||||
// Top: DashboardToolbar with panel toggles and layout presets
|
||||
// Floating panels: Sessions, Issues, Queue, Inspector (overlay, mutually exclusive)
|
||||
// Floating panels: Issues, Queue, Inspector (overlay, mutually exclusive)
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
@@ -33,7 +34,7 @@ export function TerminalDashboardPage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[calc(100vh-56px)] overflow-hidden">
|
||||
<div className="-m-4 md:-m-6 flex flex-col h-[calc(100vh-56px)] overflow-hidden">
|
||||
<AssociationHighlightProvider>
|
||||
{/* Global toolbar */}
|
||||
<DashboardToolbar
|
||||
@@ -41,20 +42,10 @@ export function TerminalDashboardPage() {
|
||||
onTogglePanel={togglePanel}
|
||||
/>
|
||||
|
||||
{/* Terminal grid (flex-1, takes all remaining space) */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<TerminalGrid />
|
||||
</div>
|
||||
|
||||
{/* Floating panels (conditional, overlay) */}
|
||||
<FloatingPanel
|
||||
isOpen={activePanel === 'sessions'}
|
||||
onClose={closePanel}
|
||||
title={formatMessage({ id: 'terminalDashboard.toolbar.sessions' })}
|
||||
side="left"
|
||||
width={280}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Main content: session sidebar + terminal grid */}
|
||||
<div className="flex flex-1 min-h-0">
|
||||
{/* Fixed session sidebar */}
|
||||
<div className="w-[240px] shrink-0 flex flex-col">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<SessionGroupTree />
|
||||
</div>
|
||||
@@ -62,8 +53,14 @@ export function TerminalDashboardPage() {
|
||||
<AgentList />
|
||||
</div>
|
||||
</div>
|
||||
</FloatingPanel>
|
||||
|
||||
{/* Terminal grid (takes remaining space) */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<TerminalGrid />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating panels (conditional, overlay) */}
|
||||
<FloatingPanel
|
||||
isOpen={activePanel === 'issues'}
|
||||
onClose={closePanel}
|
||||
|
||||
Reference in New Issue
Block a user