37ac70f720
* feat: AI agent panel UI — 3-layer panel with action cards and WebSocket activity hook * style: rustfmt mcp.rs --------- Co-authored-by: Test <test@test.com>
341 lines
10 KiB
Plaintext
341 lines
10 KiB
Plaintext
{
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_panel_closed",
|
|
"name": "AI Agent Panel — Closed (trigger button in toolbar)",
|
|
"x": 0,
|
|
"y": 0,
|
|
"width": 1280,
|
|
"height": 800,
|
|
"fill": "$--background",
|
|
"layout": "horizontal",
|
|
"theme": { "Mode": "Light" },
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "ai_closed_editor",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "$--muted",
|
|
"cornerRadius": 4
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_closed_toolbar",
|
|
"name": "Right Toolbar",
|
|
"layout": "vertical",
|
|
"width": 36,
|
|
"height": "fill_container",
|
|
"fill": "$--background",
|
|
"padding": [8, 4],
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_trigger_btn",
|
|
"name": "AI Trigger Button",
|
|
"width": 28,
|
|
"height": 28,
|
|
"cornerRadius": 6,
|
|
"fill": "$--muted",
|
|
"layout": "horizontal",
|
|
"padding": [6, 6],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ai_trigger_icon",
|
|
"content": "✦",
|
|
"fill": "$--muted-foreground",
|
|
"fontSize": 14
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_panel_open_idle",
|
|
"name": "AI Agent Panel — Open, Idle (empty state)",
|
|
"x": 1320,
|
|
"y": 0,
|
|
"width": 1280,
|
|
"height": 800,
|
|
"fill": "$--background",
|
|
"layout": "horizontal",
|
|
"theme": { "Mode": "Light" },
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "ai_open_editor",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "$--muted",
|
|
"cornerRadius": 4
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_panel_sidebar",
|
|
"name": "AI Panel Sidebar",
|
|
"layout": "vertical",
|
|
"width": 320,
|
|
"height": "fill_container",
|
|
"fill": "$--background",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_panel_header",
|
|
"name": "Panel Header",
|
|
"layout": "horizontal",
|
|
"width": "fill_container",
|
|
"height": 45,
|
|
"padding": [0, 12],
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ai_header_label",
|
|
"content": "AI",
|
|
"fontSize": 13,
|
|
"fontWeight": "600",
|
|
"fill": "$--muted-foreground",
|
|
"width": "fill_container"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "ai_close_icon",
|
|
"content": "✕",
|
|
"fontSize": 12,
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_empty_state",
|
|
"name": "Empty State",
|
|
"layout": "vertical",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"padding": [24, 24],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ai_empty_hint",
|
|
"content": "Ask the AI agent to work on your vault…",
|
|
"fontSize": 13,
|
|
"fill": "$--muted-foreground",
|
|
"textAlign": "center",
|
|
"width": "fill_container"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_input_row",
|
|
"name": "Input Row",
|
|
"layout": "horizontal",
|
|
"width": "fill_container",
|
|
"padding": [8, 12],
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "ai_input_field",
|
|
"width": "fill_container",
|
|
"height": 32,
|
|
"cornerRadius": 6,
|
|
"fill": "$--muted"
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_send_btn",
|
|
"name": "Send Button",
|
|
"width": 28,
|
|
"height": 28,
|
|
"cornerRadius": 6,
|
|
"fill": "$--primary",
|
|
"layout": "horizontal",
|
|
"padding": [6, 6],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ai_send_icon",
|
|
"content": "→",
|
|
"fontSize": 12,
|
|
"fill": "$--primary-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_panel_active",
|
|
"name": "AI Agent Panel — Active (streaming, action cards visible)",
|
|
"x": 2640,
|
|
"y": 0,
|
|
"width": 1280,
|
|
"height": 800,
|
|
"fill": "$--background",
|
|
"layout": "horizontal",
|
|
"theme": { "Mode": "Light" },
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "ai_active_editor",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"fill": "$--muted",
|
|
"cornerRadius": 4
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_active_panel",
|
|
"name": "AI Panel — With Messages",
|
|
"layout": "vertical",
|
|
"width": 320,
|
|
"height": "fill_container",
|
|
"fill": "$--background",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_active_header",
|
|
"name": "Panel Header",
|
|
"layout": "horizontal",
|
|
"width": "fill_container",
|
|
"height": 45,
|
|
"padding": [0, 12],
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "ai_active_label",
|
|
"content": "AI",
|
|
"fontSize": 13,
|
|
"fontWeight": "600",
|
|
"fill": "$--muted-foreground",
|
|
"width": "fill_container"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_message_thread",
|
|
"name": "Message Thread",
|
|
"layout": "vertical",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"padding": [12, 12],
|
|
"gap": 16,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_user_msg",
|
|
"name": "User Message",
|
|
"layout": "vertical",
|
|
"width": "fill_container",
|
|
"gap": 4,
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "You",
|
|
"fontSize": 11,
|
|
"fontWeight": "600",
|
|
"fill": "$--muted-foreground"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Crea una nota evento per la riunione con Marco domani",
|
|
"fontSize": 13,
|
|
"fill": "$--foreground",
|
|
"width": "fill_container"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_agent_msg",
|
|
"name": "Agent Message + Actions",
|
|
"layout": "vertical",
|
|
"width": "fill_container",
|
|
"gap": 8,
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_action_done",
|
|
"name": "Action Card — Done",
|
|
"layout": "horizontal",
|
|
"width": "fill_container",
|
|
"height": 28,
|
|
"padding": [0, 8],
|
|
"gap": 6,
|
|
"cornerRadius": 4,
|
|
"fill": "$--muted",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "✓",
|
|
"fontSize": 12,
|
|
"fill": "$--primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Loaded vault context",
|
|
"fontSize": 12,
|
|
"fill": "$--foreground",
|
|
"width": "fill_container"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "ai_action_progress",
|
|
"name": "Action Card — In Progress",
|
|
"layout": "horizontal",
|
|
"width": "fill_container",
|
|
"height": 28,
|
|
"padding": [0, 8],
|
|
"gap": 6,
|
|
"cornerRadius": 4,
|
|
"fill": "$--muted",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"content": "◌",
|
|
"fontSize": 12,
|
|
"fill": "$--primary"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Creating: 2026-03-01-meeting-marco.md",
|
|
"fontSize": 12,
|
|
"fill": "$--foreground",
|
|
"width": "fill_container"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"content": "Ho creato la nota evento e linkato Marco come partecipante. La trovi già aperta in un nuovo tab.",
|
|
"fontSize": 13,
|
|
"fill": "$--foreground",
|
|
"width": "fill_container"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|