Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 9c30e4e

Browse filesBrowse files
breaking-brakeclaude
breaking-brake
and
claude
authored
improvement: refine AI editing panel layout with overlay separation (#321)
* improvement: refine AI editing panel layout and move button to toolbar - Change AI editing panel to fixed width with slide animation (Radix Collapsible) - Move PropertyPanel to canvas overlay (allows coexistence with AI panel) - Move AI edit button from canvas to toolbar (Other group) - Reduce AI panel header height and update close button style 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * refactor: rename PropertyPanel to PropertyOverlay - Rename component and file to reflect overlay behavior - Update store state: isPropertyPanelOpen → isPropertyOverlayOpen - Update store actions: openPropertyPanel/closePropertyPanel → openPropertyOverlay/closePropertyOverlay 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * improvement: apply panel separation to SubAgentFlowDialog - Move AI edit button to header (left of submit button) - Make PropertyOverlay canvas overlay (like main workflow) - Use Radix Collapsible for RefinementChatPanel slide animation - Use store's isRefinementPanelOpen instead of local state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 4138d9c commit 9c30e4e
Copy full SHA for 9c30e4e

9 files changed

+284-169Lines changed: 284 additions & 169 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎src/webview/src/App.tsx‎

Copy file name to clipboardExpand all lines: src/webview/src/App.tsx
+64-8Lines changed: 64 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { SubAgentFlowDialog } from './components/dialogs/SubAgentFlowDialog';
2525
import { TermsOfUseDialog } from './components/dialogs/TermsOfUseDialog';
2626
import { ErrorNotification } from './components/ErrorNotification';
2727
import { NodePalette } from './components/NodePalette';
28-
import { PropertyPanel } from './components/PropertyPanel';
28+
import { PropertyOverlay } from './components/PropertyOverlay';
2929
import { Toolbar } from './components/Toolbar';
3030
import { Tour } from './components/Tour';
3131
import { WorkflowEditor } from './components/WorkflowEditor';
@@ -48,7 +48,7 @@ const App: React.FC = () => {
4848
setEdges,
4949
setWorkflowName,
5050
setActiveWorkflow,
51-
isPropertyPanelOpen,
51+
isPropertyOverlayOpen,
5252
selectedNodeId,
5353
activeSubAgentFlowId,
5454
setActiveSubAgentFlowId,
@@ -241,14 +241,31 @@ const App: React.FC = () => {
241241
/>
242242
{/* Processing overlay for canvas area only (with message centered in canvas) */}
243243
<ProcessingOverlay isVisible={isProcessing} message={t('refinement.processingOverlay')} />
244+
245+
{/* Property Overlay - overlay on canvas right side */}
246+
{selectedNodeId && isPropertyOverlayOpen && (
247+
<div
248+
style={{
249+
position: 'absolute',
250+
top: 5,
251+
right: 5,
252+
bottom: 5,
253+
zIndex: 10,
254+
}}
255+
>
256+
<PropertyOverlay />
257+
</div>
258+
)}
244259
</div>
245260

246-
{/* Right Panel: Property Panel (when node selected) > Refinement Chat Panel > none (canvas expands) */}
247-
{selectedNodeId && isPropertyPanelOpen ? (
248-
<PropertyPanel />
249-
) : isRefinementPanelOpen ? (
250-
<RefinementChatPanel />
251-
) : null}
261+
{/* Refinement Panel with Radix Collapsible for slide animation */}
262+
<Collapsible.Root open={isRefinementPanelOpen}>
263+
<Collapsible.Content
264+
className={`refinement-panel-collapsible${isCompact ? ' compact' : ''}`}
265+
>
266+
<RefinementChatPanel />
267+
</Collapsible.Content>
268+
</Collapsible.Root>
252269
</div>
253270

254271
{/* Error Notification Overlay */}
@@ -393,6 +410,45 @@ const App: React.FC = () => {
393410
width: 0px;
394411
}
395412
}
413+
414+
/* Refinement Panel Collapsible Animation */
415+
.refinement-panel-collapsible {
416+
--refinement-width: 320px;
417+
overflow: hidden;
418+
height: 100%;
419+
}
420+
421+
.refinement-panel-collapsible.compact {
422+
--refinement-width: 280px;
423+
}
424+
425+
.refinement-panel-collapsible[data-state='open'] {
426+
width: var(--refinement-width);
427+
animation: slideOpenFromRight 150ms ease-out;
428+
}
429+
430+
.refinement-panel-collapsible[data-state='closed'] {
431+
width: 0px;
432+
animation: slideCloseToRight 150ms ease-out;
433+
}
434+
435+
@keyframes slideOpenFromRight {
436+
from {
437+
width: 0px;
438+
}
439+
to {
440+
width: var(--refinement-width);
441+
}
442+
}
443+
444+
@keyframes slideCloseToRight {
445+
from {
446+
width: var(--refinement-width);
447+
}
448+
to {
449+
width: 0px;
450+
}
451+
}
396452
`}
397453
</style>
398454
</div>
Collapse file

‎…webview/src/components/PropertyPanel.tsx‎ ‎…bview/src/components/PropertyOverlay.tsx‎src/webview/src/components/PropertyPanel.tsx renamed to src/webview/src/components/PropertyOverlay.tsx src/webview/src/components/PropertyPanel.tsx renamed to src/webview/src/components/PropertyOverlay.tsx

Copy file name to clipboardExpand all lines: src/webview/src/components/PropertyOverlay.tsx
+9-7Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
2-
* Claude Code Workflow Studio - Property Panel Component
2+
* Claude Code Workflow Studio - Property Overlay Component
33
*
4-
* Property editor for selected nodes
4+
* Property editor for selected nodes (displayed as overlay on canvas)
55
* Based on: /specs/001-cc-wf-studio/plan.md
66
* Updated: Phase 3.3 - Added resizable width functionality
77
*/
@@ -30,11 +30,11 @@ import { ResizeHandle } from './common/ResizeHandle';
3030
import { McpNodeEditDialog } from './dialogs/McpNodeEditDialog';
3131

3232
/**
33-
* PropertyPanel Component
33+
* PropertyOverlay Component
3434
*/
35-
export const PropertyPanel: React.FC = () => {
35+
export const PropertyOverlay: React.FC = () => {
3636
const { t } = useTranslation();
37-
const { nodes, selectedNodeId, updateNodeData, setNodes, closePropertyPanel, subAgentFlows } =
37+
const { nodes, selectedNodeId, updateNodeData, setNodes, closePropertyOverlay, subAgentFlows } =
3838
useWorkflowStore();
3939
const { width, handleMouseDown } = useResizablePanel();
4040

@@ -49,9 +49,11 @@ export const PropertyPanel: React.FC = () => {
4949
width: `${width}px`,
5050
height: '100%',
5151
backgroundColor: 'var(--vscode-sideBar-background)',
52-
borderLeft: '1px solid var(--vscode-panel-border)',
52+
border: '1px solid var(--vscode-panel-border)',
53+
borderRadius: '4px',
5354
padding: '16px',
5455
overflowY: 'auto',
56+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
5557
}}
5658
>
5759
<ResizeHandle onMouseDown={handleMouseDown} />
@@ -77,7 +79,7 @@ export const PropertyPanel: React.FC = () => {
7779
</div>
7880
<button
7981
type="button"
80-
onClick={closePropertyPanel}
82+
onClick={closePropertyOverlay}
8183
style={{
8284
padding: '4px 8px',
8385
backgroundColor: 'transparent',
Collapse file

‎src/webview/src/components/Toolbar.tsx‎

Copy file name to clipboardExpand all lines: src/webview/src/components/Toolbar.tsx
+93-10Lines changed: 93 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66

77
import type { Workflow } from '@shared/types/messages';
8-
import { FileDown, Play, Save, SquareSlash } from 'lucide-react';
8+
import { FileDown, Play, Save, Sparkles, SquareSlash } from 'lucide-react';
99
import type React from 'react';
1010
import { useCallback, useEffect, useRef, useState } from 'react';
1111
import { useIsCompactMode } from '../hooks/useWindowWidth';
@@ -56,8 +56,17 @@ export const Toolbar: React.FC<ToolbarProps> = ({
5656
workflowName,
5757
setWorkflowName,
5858
clearWorkflow,
59+
subAgentFlows,
5960
} = useWorkflowStore();
60-
const { isProcessing, clearHistory } = useRefinementStore();
61+
const {
62+
isProcessing,
63+
clearHistory,
64+
isOpen: isRefinementOpen,
65+
openChat,
66+
closeChat,
67+
initConversation,
68+
loadConversationHistory,
69+
} = useRefinementStore();
6170
const [isSaving, setIsSaving] = useState(false);
6271
const [isExporting, setIsExporting] = useState(false);
6372
const [isRunning, setIsRunning] = useState(false);
@@ -349,6 +358,49 @@ export const Toolbar: React.FC<ToolbarProps> = ({
349358
setIsGeneratingName(false);
350359
}, []);
351360

361+
// Handle toggling AI refinement chat
362+
const handleOpenRefinementChat = useCallback(() => {
363+
// If already open, just close it
364+
if (isRefinementOpen) {
365+
closeChat();
366+
return;
367+
}
368+
369+
// Serialize current workflow state to set as active workflow
370+
// Include subAgentFlows to preserve SubAgentFlow references
371+
const currentWorkflow = serializeWorkflow(
372+
nodes,
373+
edges,
374+
workflowName || 'Untitled',
375+
'Created with Workflow Studio',
376+
activeWorkflow?.conversationHistory,
377+
subAgentFlows
378+
);
379+
setActiveWorkflow(currentWorkflow);
380+
381+
// Load or initialize conversation history
382+
if (activeWorkflow?.conversationHistory) {
383+
loadConversationHistory(activeWorkflow.conversationHistory);
384+
} else {
385+
initConversation();
386+
}
387+
388+
// Open chat
389+
openChat();
390+
}, [
391+
isRefinementOpen,
392+
closeChat,
393+
nodes,
394+
edges,
395+
workflowName,
396+
activeWorkflow?.conversationHistory,
397+
subAgentFlows,
398+
setActiveWorkflow,
399+
loadConversationHistory,
400+
initConversation,
401+
openChat,
402+
]);
403+
352404
return (
353405
<StyledTooltipProvider>
354406
<div
@@ -588,14 +640,45 @@ export const Toolbar: React.FC<ToolbarProps> = ({
588640
Other
589641
</span>
590642

591-
{/* More Actions Dropdown */}
592-
<MoreActionsDropdown
593-
onShareToSlack={onShareToSlack}
594-
onResetWorkflow={() => setShowResetConfirm(true)}
595-
onStartTour={onStartTour}
596-
open={moreActionsOpen}
597-
onOpenChange={onMoreActionsOpenChange}
598-
/>
643+
{/* Button Group */}
644+
<div
645+
style={{
646+
display: 'flex',
647+
gap: '8px',
648+
}}
649+
>
650+
{/* AI Edit Button */}
651+
<button
652+
type="button"
653+
onClick={handleOpenRefinementChat}
654+
data-tour="ai-refine-button"
655+
style={{
656+
display: 'flex',
657+
alignItems: 'center',
658+
gap: isCompact ? '0' : '4px',
659+
padding: isCompact ? '4px 8px' : '4px 12px',
660+
backgroundColor: 'var(--vscode-button-background)',
661+
color: 'var(--vscode-button-foreground)',
662+
border: 'none',
663+
borderRadius: '2px',
664+
cursor: 'pointer',
665+
fontSize: '13px',
666+
whiteSpace: 'nowrap',
667+
}}
668+
>
669+
<Sparkles size={14} />
670+
{!isCompact && t('toolbar.refineWithAI')}
671+
</button>
672+
673+
{/* More Actions Dropdown */}
674+
<MoreActionsDropdown
675+
onShareToSlack={onShareToSlack}
676+
onResetWorkflow={() => setShowResetConfirm(true)}
677+
onStartTour={onStartTour}
678+
open={moreActionsOpen}
679+
onOpenChange={onMoreActionsOpenChange}
680+
/>
681+
</div>
599682
</div>
600683

601684
{/* Processing Overlay (Phase 3.10) */}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.