promptarchitect 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscodeignore +7 -0
- package/CHANGELOG.md +28 -0
- package/LICENSE +44 -0
- package/README.md +200 -0
- package/docs/CHAT_UI_REDESIGN_PLAN.md +371 -0
- package/images/hub-icon.svg +6 -0
- package/images/prompt-lab-icon.svg +11 -0
- package/package.json +519 -0
- package/src/agentPrompts.ts +278 -0
- package/src/agentService.ts +630 -0
- package/src/api.ts +223 -0
- package/src/authService.ts +556 -0
- package/src/chatPanel.ts +979 -0
- package/src/extension.ts +822 -0
- package/src/providers/aiChatViewProvider.ts +1023 -0
- package/src/providers/environmentTreeProvider.ts +311 -0
- package/src/providers/index.ts +9 -0
- package/src/providers/notesTreeProvider.ts +301 -0
- package/src/providers/quickAccessTreeProvider.ts +328 -0
- package/src/providers/scriptsTreeProvider.ts +324 -0
- package/src/refinerPanel.ts +620 -0
- package/src/templates.ts +61 -0
- package/src/workspaceIndexer.ts +766 -0
- package/tsconfig.json +16 -0
package/.vscodeignore
ADDED
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to the "promptarchitect" extension will be documented in this file.
|
|
4
|
+
|
|
5
|
+
## [0.6.0] - 2025-12-22
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
- Published to npm registry for programmatic access
|
|
9
|
+
- Improved stability and performance
|
|
10
|
+
|
|
11
|
+
### Changed
|
|
12
|
+
- Enhanced build and deployment pipeline
|
|
13
|
+
|
|
14
|
+
## [0.5.1] - 2025-12-21
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
- Fixed authentication flow: users can now easily find the "Create Account" option which directs to the web portal.
|
|
18
|
+
- Fixed OAuth redirect URL issues for Google and GitHub sign-in.
|
|
19
|
+
- Fixed issue where generated prompts included conversational filler (e.g., "Here is the prompt..."). Output is now strictly the prompt content, ready for copy-pasting.
|
|
20
|
+
- Fixed 404 errors when using the chat feature by implementing proper API handlers in the local server.
|
|
21
|
+
|
|
22
|
+
## [0.5.0] - 2025-12-15
|
|
23
|
+
|
|
24
|
+
### Added
|
|
25
|
+
- Initial release of PromptArchitect VS Code extension.
|
|
26
|
+
- Chat with AI interface.
|
|
27
|
+
- Prompt generation, refinement, and analysis.
|
|
28
|
+
- Workspace indexing for context-aware prompts.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
PromptArchitect Proprietary License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Meraby Labs. All Rights Reserved.
|
|
4
|
+
|
|
5
|
+
This software and associated documentation files (the "Software") are proprietary
|
|
6
|
+
and confidential. Unauthorized copying, modification, distribution, or use of this
|
|
7
|
+
Software, via any medium, is strictly prohibited.
|
|
8
|
+
|
|
9
|
+
TERMS OF USE:
|
|
10
|
+
|
|
11
|
+
1. LICENSE GRANT
|
|
12
|
+
Subject to the terms of this license, Meraby Labs grants you a limited,
|
|
13
|
+
non-exclusive, non-transferable license to use the Software solely for your
|
|
14
|
+
personal or internal business purposes.
|
|
15
|
+
|
|
16
|
+
2. RESTRICTIONS
|
|
17
|
+
You may NOT:
|
|
18
|
+
- Copy, modify, or distribute the Software
|
|
19
|
+
- Reverse engineer, decompile, or disassemble the Software
|
|
20
|
+
- Remove or alter any proprietary notices or labels
|
|
21
|
+
- Sublicense, sell, rent, or lease the Software
|
|
22
|
+
- Use the Software to create competing products or services
|
|
23
|
+
|
|
24
|
+
3. INTELLECTUAL PROPERTY
|
|
25
|
+
The Software and all copies thereof are proprietary to Meraby Labs and
|
|
26
|
+
title thereto remains exclusively with Meraby Labs. All rights not
|
|
27
|
+
specifically granted in this license are reserved by Meraby Labs.
|
|
28
|
+
|
|
29
|
+
4. DISCLAIMER OF WARRANTIES
|
|
30
|
+
THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
31
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
32
|
+
FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT.
|
|
33
|
+
|
|
34
|
+
5. LIMITATION OF LIABILITY
|
|
35
|
+
IN NO EVENT SHALL MERABY LABS BE LIABLE FOR ANY INDIRECT, INCIDENTAL,
|
|
36
|
+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OF THE
|
|
37
|
+
SOFTWARE.
|
|
38
|
+
|
|
39
|
+
6. TERMINATION
|
|
40
|
+
This license is effective until terminated. It will terminate automatically
|
|
41
|
+
if you fail to comply with any term of this license.
|
|
42
|
+
|
|
43
|
+
For licensing inquiries, contact: support@merabylabs.com
|
|
44
|
+
|
package/README.md
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
# PromptArchitect for VS Code
|
|
2
|
+
|
|
3
|
+
> **Prompt Lab** — Craft, Polish, Execute. Your ideas, perfected.
|
|
4
|
+
|
|
5
|
+
[](https://marketplace.visualstudio.com/items?itemName=MerabyLabs.promptarchitect)
|
|
6
|
+
[](https://marketplace.visualstudio.com/items?itemName=MerabyLabs.promptarchitect)
|
|
7
|
+
[](https://marketplace.visualstudio.com/items?itemName=MerabyLabs.promptarchitect)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## ⚡ NEW: Prompt Lab — 3-Step Workflow
|
|
12
|
+
|
|
13
|
+
Transform rough ideas into AI-ready prompts with our guided workflow:
|
|
14
|
+
|
|
15
|
+
| Step | Action | What Happens |
|
|
16
|
+
|------|--------|--------------|
|
|
17
|
+
| **1. Craft** | Write your prompt | Express your intent, attach code/files |
|
|
18
|
+
| **2. Polish** | One-click refinement | Choose Clarity, Detail, Concise, or Technical |
|
|
19
|
+
| **3. Execute** | Send to AI agent | Get results instantly |
|
|
20
|
+
|
|
21
|
+
> **Look for the ⚡ icon in your Activity Bar** to open Prompt Lab!
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## 🎯 **Zero Impact on Your AI Usage**
|
|
26
|
+
|
|
27
|
+
**PromptArchitect uses its own AI backend** — your Copilot, ChatGPT, or Claude usage is never touched.
|
|
28
|
+
|
|
29
|
+
| ✅ What We Do | ❌ What We DON'T Do |
|
|
30
|
+
|--------------|-------------------|
|
|
31
|
+
| Use our own Gemini API | Use your Copilot credits |
|
|
32
|
+
| Process on our servers | Count against your AI quota |
|
|
33
|
+
| Work instantly — no setup | Require any API key from you |
|
|
34
|
+
| Keep your prompts private | Store or log your content |
|
|
35
|
+
|
|
36
|
+
> **💡 The Result:** Unlimited prompt refinement without burning through your paid AI subscriptions.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## ✨ Features
|
|
41
|
+
|
|
42
|
+
### ⚡ Prompt Lab Panel
|
|
43
|
+
The complete prompt engineering workspace in your sidebar:
|
|
44
|
+
- **3-Step Workflow** — Craft → Polish → Execute
|
|
45
|
+
- **Smart Refinement** — Four modes to perfect your prompts
|
|
46
|
+
- **Context Attachments** — Add code from editor or files
|
|
47
|
+
- **Quick Actions** — Refactor, Test, Improve, Debug shortcuts
|
|
48
|
+
- **Chat History** — Full conversation with export support
|
|
49
|
+
|
|
50
|
+
### 📁 Workspace Indexing (NEW in 0.4.0!)
|
|
51
|
+
Index your workspace for context-aware prompt refinement:
|
|
52
|
+
- **Smart Project Understanding** — Automatically detects languages, frameworks, and patterns
|
|
53
|
+
- **Context-Aware Refinement** — Prompts refined with knowledge of your codebase
|
|
54
|
+
- **Lightweight & Fast** — Scans structure without reading all file contents
|
|
55
|
+
- **Privacy-First** — Index stored locally, never uploaded
|
|
56
|
+
|
|
57
|
+
| Status Bar | Meaning |
|
|
58
|
+
|------------|---------|
|
|
59
|
+
| `$(database) Indexed` | Workspace is indexed, ready for smart refinement |
|
|
60
|
+
| `$(database) Not indexed` | Click to index for better context |
|
|
61
|
+
|
|
62
|
+
### 🔧 Refinement Modes
|
|
63
|
+
| Mode | Icon | What It Does |
|
|
64
|
+
|------|------|--------------|
|
|
65
|
+
| Clarity | ✨ | Removes ambiguity, improves understanding |
|
|
66
|
+
| Detail | 📝 | Adds specificity and requirements |
|
|
67
|
+
| Concise | ✂️ | Shortens without losing meaning |
|
|
68
|
+
| Technical | ⚙️ | Adds precision for developers |
|
|
69
|
+
|
|
70
|
+
### 🚀 Generate Prompts
|
|
71
|
+
Transform rough ideas into well-structured, actionable prompts optimized for AI assistants.
|
|
72
|
+
|
|
73
|
+
### ✏️ Refine Prompts
|
|
74
|
+
Iteratively improve existing prompts with targeted feedback. Select text, provide feedback, get refined results.
|
|
75
|
+
|
|
76
|
+
### 📊 Analyze Quality
|
|
77
|
+
Get instant quality scores and improvement suggestions for any prompt:
|
|
78
|
+
- **Clarity** — How clear are the instructions?
|
|
79
|
+
- **Specificity** — How specific are the requirements?
|
|
80
|
+
- **Structure** — How well-organized is the prompt?
|
|
81
|
+
- **Actionability** — How actionable is the output?
|
|
82
|
+
|
|
83
|
+
### 📚 Template Library
|
|
84
|
+
Choose from optimized templates:
|
|
85
|
+
- **Coding** — Programming & development tasks
|
|
86
|
+
- **Writing** — Content creation & copywriting
|
|
87
|
+
- **Research** — Investigation & discovery
|
|
88
|
+
- **Analysis** — Data & business analysis
|
|
89
|
+
- **Fact Check** — Verification & validation
|
|
90
|
+
- **General** — Versatile all-purpose template
|
|
91
|
+
|
|
92
|
+
## Recent Updates (v0.5.1)
|
|
93
|
+
|
|
94
|
+
- **Improved Authentication**: Easier sign-up and sign-in flow with Google and GitHub.
|
|
95
|
+
- **Cleaner Outputs**: Generated prompts are now strictly formatted and ready for copy-pasting, with no conversational filler.
|
|
96
|
+
- **Bug Fixes**: Resolved connectivity issues with the chat interface.
|
|
97
|
+
|
|
98
|
+
## 🎯 Why PromptArchitect?
|
|
99
|
+
|
|
100
|
+
### 🔥 **Your AI Credits Stay Untouched**
|
|
101
|
+
|
|
102
|
+
Unlike tools that consume your GitHub Copilot, ChatGPT, or Claude quota, PromptArchitect runs on **our own infrastructure**. Refine 100 prompts a day — your subscriptions won't notice.
|
|
103
|
+
|
|
104
|
+
| Feature | PromptArchitect | Other Tools |
|
|
105
|
+
|---------|-----------------|-------------|
|
|
106
|
+
| **Uses Your AI Quota** | ❌ Never | ✅ Every request |
|
|
107
|
+
| **API Key Required** | ❌ No setup | ✅ Bring your own |
|
|
108
|
+
| **Unlimited Refinements** | ✅ Yes | ❌ Quota limited |
|
|
109
|
+
| **3-Step Workflow** | ✅ Guided experience | ❌ No guidance |
|
|
110
|
+
| **Quality Scoring** | ✅ Built-in | ❌ Not available |
|
|
111
|
+
| **Template Library** | ✅ 6 optimized templates | ❌ Limited |
|
|
112
|
+
|
|
113
|
+
## ⚡ Quick Start
|
|
114
|
+
|
|
115
|
+
1. **Install** from VS Code Marketplace
|
|
116
|
+
2. **Click the ⚡ icon** in the Activity Bar (left sidebar)
|
|
117
|
+
3. **Craft** your prompt in the text area
|
|
118
|
+
4. **Polish** with one-click refinement (optional)
|
|
119
|
+
5. **Execute** and get AI-powered results!
|
|
120
|
+
|
|
121
|
+
## 🎹 Keyboard Shortcuts
|
|
122
|
+
|
|
123
|
+
| Action | Windows/Linux | Mac |
|
|
124
|
+
|--------|--------------|-----|
|
|
125
|
+
| Open Prompt Lab | `Ctrl+Shift+C` | `Cmd+Shift+C` |
|
|
126
|
+
| Index Workspace | `Ctrl+Shift+I` | `Cmd+Shift+I` |
|
|
127
|
+
| Execute Prompt | `Enter` | `Enter` |
|
|
128
|
+
| New Line | `Shift+Enter` | `Shift+Enter` |
|
|
129
|
+
| Generate Prompt | `Ctrl+Shift+G` | `Cmd+Shift+G` |
|
|
130
|
+
| Refine Selection | `Ctrl+Shift+R` | `Cmd+Shift+R` |
|
|
131
|
+
| Analyze Prompt | `Ctrl+Shift+A` | `Cmd+Shift+A` |
|
|
132
|
+
|
|
133
|
+
## 🔧 Commands
|
|
134
|
+
|
|
135
|
+
All commands available via Command Palette (`Ctrl+Shift+P`):
|
|
136
|
+
|
|
137
|
+
- `PromptArchitect: Open Prompt Lab` — Opens the Prompt Lab panel
|
|
138
|
+
- `PromptArchitect: Index Workspace for Context` — Index workspace for better refinement
|
|
139
|
+
- `PromptArchitect: Clear Workspace Index` — Clear the workspace index
|
|
140
|
+
- `PromptArchitect: Generate Prompt from Idea`
|
|
141
|
+
- `PromptArchitect: Refine Selected Prompt`
|
|
142
|
+
- `PromptArchitect: Quick Refine Selection` — Instantly refine selected text
|
|
143
|
+
- `PromptArchitect: Analyze Prompt Quality`
|
|
144
|
+
- `PromptArchitect: Browse Prompt Templates`
|
|
145
|
+
|
|
146
|
+
## ⚙️ Settings
|
|
147
|
+
|
|
148
|
+
| Setting | Default | Description |
|
|
149
|
+
|---------|---------|-------------|
|
|
150
|
+
| `promptarchitect.defaultTemplate` | `general` | Default template for generation |
|
|
151
|
+
| `promptarchitect.targetModel` | `general` | Target AI model to optimize for |
|
|
152
|
+
| `promptarchitect.showStatusBar` | `true` | Show status bar item |
|
|
153
|
+
| `promptarchitect.useWorkspaceContext` | `true` | Include workspace context in refinements |
|
|
154
|
+
| `promptarchitect.autoPromptIndex` | `true` | Auto-prompt to index when workspace not indexed |
|
|
155
|
+
|
|
156
|
+
## 🔒 Privacy & Usage
|
|
157
|
+
|
|
158
|
+
- **🚫 No API key required** — We handle all AI processing on our servers
|
|
159
|
+
- **🚫 No impact on your AI subscriptions** — Copilot, ChatGPT, Claude credits untouched
|
|
160
|
+
- **🚫 No prompts stored** — Your content is processed and immediately discarded
|
|
161
|
+
- **🚫 No telemetry** — We don't track your usage patterns, except tracking cost for internal billing & optimization
|
|
162
|
+
|
|
163
|
+
## 📝 Examples
|
|
164
|
+
|
|
165
|
+
### The 3-Step Workflow in Action
|
|
166
|
+
|
|
167
|
+
**Step 1 - Craft:**
|
|
168
|
+
```
|
|
169
|
+
write a function to validate email addresses
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
**Step 2 - Polish (Clarity mode):**
|
|
173
|
+
```
|
|
174
|
+
Implement a robust email validation function that:
|
|
175
|
+
- Validates standard email format (RFC 5322)
|
|
176
|
+
- Handles international domain names
|
|
177
|
+
- Returns detailed validation result with error messages
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
**Step 3 - Execute:**
|
|
181
|
+
AI responds with complete implementation including tests!
|
|
182
|
+
|
|
183
|
+
---
|
|
184
|
+
|
|
185
|
+
## 🔗 Related Products
|
|
186
|
+
|
|
187
|
+
| Product | Description |
|
|
188
|
+
|---------|-------------|
|
|
189
|
+
| **[PromptArchitect MCP](https://www.npmjs.com/package/@merabylabs/promptarchitect-mcp)** | MCP server for Claude Desktop, Cursor, Windsurf & more |
|
|
190
|
+
| **[PromptArchitect Web](https://promptarchitectlabs.com)** | Full-featured web application |
|
|
191
|
+
|
|
192
|
+
## 🤝 Support
|
|
193
|
+
|
|
194
|
+
- [Website](https://promptarchitectlabs.com)
|
|
195
|
+
- [Support](https://promptarchitectlabs.com/support)
|
|
196
|
+
- [GitHub Issues](https://github.com/merabylabs/promptarchitect/issues)
|
|
197
|
+
|
|
198
|
+
## 📄 License
|
|
199
|
+
|
|
200
|
+
Proprietary © Meraby Labs. All Rights Reserved.
|
|
@@ -0,0 +1,371 @@
|
|
|
1
|
+
# PromptArchitect Chat UI Redesign Plan
|
|
2
|
+
|
|
3
|
+
## Current Issues Identified
|
|
4
|
+
|
|
5
|
+
1. **Input Area Too Small** - The textarea has `min-height: 50px` and `max-height: 120px`, cramped for complex prompts
|
|
6
|
+
2. **Cluttered Layout** - Three workflow steps stacked vertically take up significant space
|
|
7
|
+
3. **Feature Discoverability** - Polish options buried in middle section
|
|
8
|
+
4. **Visual Hierarchy** - All elements compete for attention equally
|
|
9
|
+
5. **Mobile/Narrow Panel Issues** - Components don't adapt well to narrow sidebar widths
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Redesign Goals
|
|
14
|
+
|
|
15
|
+
| Goal | Description |
|
|
16
|
+
|------|-------------|
|
|
17
|
+
| **Spacious Input** | 3-4x larger input area that expands naturally |
|
|
18
|
+
| **Clean Interface** | Remove visual clutter, use progressive disclosure |
|
|
19
|
+
| **Feature Discovery** | Key features visible but not overwhelming |
|
|
20
|
+
| **Responsive** | Works in narrow sidebar and wide panel modes |
|
|
21
|
+
| **Modern Feel** | Contemporary design with subtle animations |
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Proposed Layout: "Floating Composer" Design
|
|
26
|
+
|
|
27
|
+
### Concept
|
|
28
|
+
Replace the rigid 3-step vertical stack with a **floating composer** that dominates the view when active, with features revealed contextually.
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
┌──────────────────────────────────────┐
|
|
32
|
+
│ ⚡ Architect [🗒️] [📤] │ ← Minimal header
|
|
33
|
+
├──────────────────────────────────────┤
|
|
34
|
+
│ │
|
|
35
|
+
│ [Empty state / Chat messages] │ ← Chat area (scrollable)
|
|
36
|
+
│ │
|
|
37
|
+
│ │
|
|
38
|
+
├──────────────────────────────────────┤
|
|
39
|
+
│ ┌──────────────────────────────────┐ │
|
|
40
|
+
│ │ │ │
|
|
41
|
+
│ │ [Large textarea - 6+ lines] │ │ ← Expanded input
|
|
42
|
+
│ │ │ │
|
|
43
|
+
│ │ │ │
|
|
44
|
+
│ └──────────────────────────────────┘ │
|
|
45
|
+
│ │
|
|
46
|
+
│ [📎 Code] [📄 File] [📁 Indexed] │ ← Inline attachment bar
|
|
47
|
+
│ │
|
|
48
|
+
│ ┌──────────────────────────────────┐ │
|
|
49
|
+
│ │ ✨ Polish: [Clarity] [Detail] │ │ ← Collapsed by default
|
|
50
|
+
│ │ [Concise] [Technical] │ │ Expands on hover/click
|
|
51
|
+
│ └──────────────────────────────────┘ │
|
|
52
|
+
│ │
|
|
53
|
+
│ [========== ⚡ Execute ==========] │ ← Full-width execute button
|
|
54
|
+
│ │
|
|
55
|
+
│ ↵ send · ⇧↵ new line │ ← Keyboard hints
|
|
56
|
+
└──────────────────────────────────────┘
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Component Specifications
|
|
62
|
+
|
|
63
|
+
### 1. Input Textarea (Priority: HIGH)
|
|
64
|
+
|
|
65
|
+
**Current:**
|
|
66
|
+
```css
|
|
67
|
+
.chat-input {
|
|
68
|
+
min-height: 50px;
|
|
69
|
+
max-height: 120px;
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Proposed:**
|
|
74
|
+
```css
|
|
75
|
+
.chat-input {
|
|
76
|
+
min-height: 100px; /* 2x current minimum */
|
|
77
|
+
max-height: 300px; /* 2.5x current maximum */
|
|
78
|
+
height: auto; /* Grows with content */
|
|
79
|
+
font-size: 13px; /* Slightly larger */
|
|
80
|
+
line-height: 1.6; /* Better readability */
|
|
81
|
+
padding: 14px 16px; /* More breathing room */
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
**Behavior:**
|
|
86
|
+
- Auto-expands as user types
|
|
87
|
+
- Shrinks back when content deleted
|
|
88
|
+
- Smooth height transition animation
|
|
89
|
+
- Scroll appears only when max-height reached
|
|
90
|
+
|
|
91
|
+
### 2. Attachments Bar (Priority: MEDIUM)
|
|
92
|
+
|
|
93
|
+
**New Design:**
|
|
94
|
+
- Horizontal inline bar below input
|
|
95
|
+
- Shows workspace index status as a badge
|
|
96
|
+
- Compact chips for attached files/code
|
|
97
|
+
- One-click to remove attachments
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<div class="attachments-bar">
|
|
101
|
+
<button class="attach-btn"><span>📎</span> Code</button>
|
|
102
|
+
<button class="attach-btn"><span>📄</span> File</button>
|
|
103
|
+
<span class="index-badge indexed">📁 Indexed</span>
|
|
104
|
+
<!-- Dynamic chips appear here -->
|
|
105
|
+
<div class="attachment-chip">App.tsx <button>×</button></div>
|
|
106
|
+
</div>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### 3. Polish Section (Priority: HIGH)
|
|
110
|
+
|
|
111
|
+
**New Design: Collapsible Toolbar**
|
|
112
|
+
- Collapsed by default showing just "✨ Polish"
|
|
113
|
+
- Expands on hover/click to show refinement modes
|
|
114
|
+
- Visual indicator when polished
|
|
115
|
+
- Auto-collapses after selection
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<div class="polish-toolbar collapsed">
|
|
119
|
+
<button class="polish-toggle">
|
|
120
|
+
<span>✨</span> Polish your prompt
|
|
121
|
+
<span class="chevron">▼</span>
|
|
122
|
+
</button>
|
|
123
|
+
<div class="polish-options">
|
|
124
|
+
<button data-mode="clarity">✨ Clarity</button>
|
|
125
|
+
<button data-mode="detailed">📝 Detail</button>
|
|
126
|
+
<button data-mode="concise">✂️ Concise</button>
|
|
127
|
+
<button data-mode="technical">⚙️ Technical</button>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
**CSS:**
|
|
133
|
+
```css
|
|
134
|
+
.polish-toolbar {
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
transition: max-height 0.2s ease;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.polish-toolbar.collapsed {
|
|
140
|
+
max-height: 36px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.polish-toolbar.expanded {
|
|
144
|
+
max-height: 100px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.polish-options {
|
|
148
|
+
display: flex;
|
|
149
|
+
gap: 6px;
|
|
150
|
+
flex-wrap: wrap;
|
|
151
|
+
padding: 8px 0;
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### 4. Execute Button (Priority: HIGH)
|
|
156
|
+
|
|
157
|
+
**New Design:**
|
|
158
|
+
- Full-width prominent button
|
|
159
|
+
- Gradient background with animation on hover
|
|
160
|
+
- Clear icon and text
|
|
161
|
+
- Disabled state during execution
|
|
162
|
+
|
|
163
|
+
```css
|
|
164
|
+
.execute-btn {
|
|
165
|
+
width: 100%;
|
|
166
|
+
padding: 14px 20px;
|
|
167
|
+
font-size: 14px;
|
|
168
|
+
font-weight: 600;
|
|
169
|
+
background: linear-gradient(135deg, #0078d4, #106ebe);
|
|
170
|
+
border-radius: 8px;
|
|
171
|
+
box-shadow: 0 2px 8px rgba(0,120,212,0.3);
|
|
172
|
+
transition: all 0.2s ease;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.execute-btn:hover {
|
|
176
|
+
transform: translateY(-2px);
|
|
177
|
+
box-shadow: 0 4px 12px rgba(0,120,212,0.4);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.execute-btn:active {
|
|
181
|
+
transform: translateY(0);
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### 5. Remove Step Numbers
|
|
186
|
+
|
|
187
|
+
**Rationale:** The numbered steps (1, 2, 3) add visual clutter without much benefit. Users understand the flow without explicit numbering.
|
|
188
|
+
|
|
189
|
+
**Change:**
|
|
190
|
+
- Remove `<span class="step-number">1</span>` etc.
|
|
191
|
+
- Use subtle section dividers instead
|
|
192
|
+
- Keep labels: "Write", "Polish", "Execute"
|
|
193
|
+
|
|
194
|
+
### 6. Keyboard Shortcuts Section
|
|
195
|
+
|
|
196
|
+
**New Design:**
|
|
197
|
+
- Subtle, de-emphasized text
|
|
198
|
+
- Only appears when input focused
|
|
199
|
+
- Fades out after 3 seconds
|
|
200
|
+
|
|
201
|
+
```css
|
|
202
|
+
.keyboard-hints {
|
|
203
|
+
opacity: 0;
|
|
204
|
+
transition: opacity 0.3s;
|
|
205
|
+
font-size: 10px;
|
|
206
|
+
color: var(--vscode-descriptionForeground);
|
|
207
|
+
text-align: center;
|
|
208
|
+
padding: 6px 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.input-focused .keyboard-hints {
|
|
212
|
+
opacity: 0.6;
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
## Mobile/Narrow Sidebar Adaptations
|
|
219
|
+
|
|
220
|
+
```css
|
|
221
|
+
/* When sidebar is narrow (<300px) */
|
|
222
|
+
@media (max-width: 300px) {
|
|
223
|
+
.polish-options {
|
|
224
|
+
flex-direction: column;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.polish-options button {
|
|
228
|
+
width: 100%;
|
|
229
|
+
justify-content: flex-start;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.attachments-bar {
|
|
233
|
+
flex-wrap: wrap;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
## Color & Theme Considerations
|
|
241
|
+
|
|
242
|
+
**Light Theme:**
|
|
243
|
+
- Input background: `var(--vscode-input-background)`
|
|
244
|
+
- Execute button: VS Code blue (`#0078d4`)
|
|
245
|
+
- Polish buttons: Secondary background with border
|
|
246
|
+
|
|
247
|
+
**Dark Theme:**
|
|
248
|
+
- Input background: Slightly lighter than sidebar
|
|
249
|
+
- Execute button: Brighter blue (`#3794ff`)
|
|
250
|
+
- Polish buttons: Darker background with subtle border
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
254
|
+
## Animation & Microinteractions
|
|
255
|
+
|
|
256
|
+
1. **Input Focus:**
|
|
257
|
+
- Border color transitions to `--vscode-focusBorder`
|
|
258
|
+
- Subtle glow effect
|
|
259
|
+
|
|
260
|
+
2. **Polish Selection:**
|
|
261
|
+
- Button pulses briefly when clicked
|
|
262
|
+
- Checkmark appears momentarily
|
|
263
|
+
|
|
264
|
+
3. **Execute:**
|
|
265
|
+
- Button scales down on click
|
|
266
|
+
- Spinner replaces icon during execution
|
|
267
|
+
|
|
268
|
+
4. **Attachment Added:**
|
|
269
|
+
- Chip slides in from left
|
|
270
|
+
- Gentle bounce animation
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
## Implementation Phases
|
|
275
|
+
|
|
276
|
+
### Phase 1: Input Area Expansion (1 hour)
|
|
277
|
+
- [x] Increase min-height to 100px
|
|
278
|
+
- [x] Increase max-height to 300px
|
|
279
|
+
- [x] Add auto-resize behavior
|
|
280
|
+
- [x] Update padding and font size
|
|
281
|
+
|
|
282
|
+
### Phase 2: Simplify Layout (2 hours)
|
|
283
|
+
- [x] Remove step numbers
|
|
284
|
+
- [x] Merge attachment buttons into input footer
|
|
285
|
+
- [x] Make polish section collapsible
|
|
286
|
+
- [x] Streamline execute section
|
|
287
|
+
|
|
288
|
+
### Phase 3: Visual Polish (1 hour)
|
|
289
|
+
- [x] Update button styles
|
|
290
|
+
- [x] Add hover/focus states
|
|
291
|
+
- [x] Implement animations
|
|
292
|
+
- [x] Test in light/dark themes
|
|
293
|
+
|
|
294
|
+
### Phase 4: Responsive Testing (30 mins)
|
|
295
|
+
- [x] Test narrow sidebar
|
|
296
|
+
- [x] Test wide panel mode
|
|
297
|
+
- [x] Adjust breakpoints as needed
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
## Success Metrics
|
|
302
|
+
|
|
303
|
+
| Metric | Current | Target |
|
|
304
|
+
|--------|---------|--------|
|
|
305
|
+
| Input visible lines | 2-3 | 5-8 |
|
|
306
|
+
| Steps to execute | 3 clicks | 1-2 clicks |
|
|
307
|
+
| Visual elements in input area | 15+ | 8-10 |
|
|
308
|
+
| Time to understand UI | ~10s | ~3s |
|
|
309
|
+
|
|
310
|
+
---
|
|
311
|
+
|
|
312
|
+
## Mockup Comparison
|
|
313
|
+
|
|
314
|
+
### Before (Current)
|
|
315
|
+
```
|
|
316
|
+
[1] Craft - Write your prompt
|
|
317
|
+
┌─────────────────────────┐
|
|
318
|
+
│ [tiny textarea] │
|
|
319
|
+
└─────────────────────────┘
|
|
320
|
+
[📎 Code] [📄 File]
|
|
321
|
+
|
|
322
|
+
[2] Polish - Optional
|
|
323
|
+
[✨ Clarity] [📝 Detail] [✂️ Concise] [⚙️ Tech] [📋]
|
|
324
|
+
|
|
325
|
+
[3] Execute
|
|
326
|
+
[======= ⚡ Execute Prompt =======]
|
|
327
|
+
|
|
328
|
+
↵ execute · ⇧↵ new line
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
### After (Redesigned)
|
|
332
|
+
```
|
|
333
|
+
┌─────────────────────────────────┐
|
|
334
|
+
│ │
|
|
335
|
+
│ [LARGE textarea area] │
|
|
336
|
+
│ - Auto expands with content │
|
|
337
|
+
│ - 5-8 visible lines │
|
|
338
|
+
│ │
|
|
339
|
+
│ [📎 Code] [📄 File] [📁 Indexed]│
|
|
340
|
+
└─────────────────────────────────┘
|
|
341
|
+
|
|
342
|
+
[✨ Polish ▼] ← expands on click
|
|
343
|
+
[Clarity] [Detail] [Concise] [Technical]
|
|
344
|
+
|
|
345
|
+
[============ ⚡ Execute ============]
|
|
346
|
+
↵ send
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
351
|
+
## Files to Modify
|
|
352
|
+
|
|
353
|
+
1. `vscode-extension/src/providers/aiChatViewProvider.ts`
|
|
354
|
+
- Update `getHtmlContent()` method
|
|
355
|
+
- Modify CSS styles
|
|
356
|
+
- Update JavaScript handlers
|
|
357
|
+
|
|
358
|
+
2. `vscode-extension/src/refinerPanel.ts`
|
|
359
|
+
- Sync design language if needed
|
|
360
|
+
|
|
361
|
+
3. `vscode-extension/package.json`
|
|
362
|
+
- Bump version to 0.5.0
|
|
363
|
+
|
|
364
|
+
---
|
|
365
|
+
|
|
366
|
+
## Notes
|
|
367
|
+
|
|
368
|
+
- Keep all existing functionality intact
|
|
369
|
+
- Ensure backward compatibility with saved chat history
|
|
370
|
+
- Test with screen readers for accessibility
|
|
371
|
+
- Consider adding a "compact mode" setting for users who prefer dense UI
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
2
|
+
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
|
|
3
|
+
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
|
|
4
|
+
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
|
|
5
|
+
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
2
|
+
<!-- Document base -->
|
|
3
|
+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
4
|
+
<polyline points="14 2 14 8 20 8"/>
|
|
5
|
+
<!-- Prompt lines -->
|
|
6
|
+
<line x1="8" y1="13" x2="16" y2="13"/>
|
|
7
|
+
<line x1="8" y1="17" x2="12" y2="17"/>
|
|
8
|
+
<!-- Magic sparkles -->
|
|
9
|
+
<path d="M18 3l1 2 2 1-2 1-1 2-1-2-2-1 2-1z" fill="currentColor" stroke="none"/>
|
|
10
|
+
<circle cx="20" cy="13" r="1" fill="currentColor" stroke="none"/>
|
|
11
|
+
</svg>
|