feat(aiPlugin): make build work and various improvements

packages/plugin-dev/ai-productivity-prompts/scripts/watch-and-build.js

@@ -27,7 +27,7 @@ const rebuildPackage = () => {
   buildTimeout = setTimeout(async () => {
     console.log('\n📦 Building plugin package...');
 
-    const buildProcess = spawn('npm', ['run', 'package'], {
+    const buildProcess = spawn('npm', ['run', 'build'], {
       cwd: projectRoot,
       stdio: 'inherit',
       shell: true,

packages/plugin-dev/ai-productivity-prompts/src/App.css

@@ -74,7 +74,7 @@ body {
 
 .back-button:hover {
   background: var(--c-primary);
-  color: white;
+  color: var(--c-contrast);
 }
 
 .main {
@@ -151,6 +151,7 @@ body {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
+  color: var(--text-color);
 }
 
 /* Prompt View */
@@ -200,32 +201,53 @@ body {
 .prompt-actions {
   margin-top: 1rem;
   display: flex;
+  gap: 0.75rem;
   justify-content: center;
+  flex-wrap: wrap;
 }
 
-.copy-button {
-  padding: 0.75rem 1.5rem;
-  background: var(--c-primary);
-  color: white;
+.action-button {
+  padding: 0.75rem 1rem;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-family: inherit;
   transition: all 0.2s;
+  font-weight: 600;
+  min-width: 80px;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
 }
 
-.copy-button:hover {
+.action-button:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
-.copy-button:disabled {
+.action-button:disabled {
   opacity: 0.7;
   transform: none;
   cursor: not-allowed;
 }
 
+/* Copy button */
+.copy-button {
+  background: var(--c-primary);
+  color: var(--c-contrast);
+}
+
+/* ChatGPT button */
+.chatgpt-button {
+  background: #10a37f;
+  color: white;
+}
+
+.chatgpt-button:hover {
+  background: #0d8c6b;
+}
+
 /* Simple page transition */
 .page-fade {
   animation: fadeIn 0.3s ease;

packages/plugin-dev/ai-productivity-prompts/src/App.tsx

@@ -78,6 +78,15 @@ const App: Component = () => {
     }
   };
 
+  const getChatGPTUrl = () => {
+    const prompt = generatedPrompt().replace(/\./g, ' ').replace(/-/g, ' ');
+    const encodedPrompt = encodeURI(prompt);
+    const url = `https://chat.openai.com/?q=${encodedPrompt}`;
+    console.log('Generated ChatGPT URL:', url);
+    console.log('Prompt length:', prompt.length);
+    return url;
+  };
+
   return (
     <div class="app">
       <Show when={currentView() !== 'home'}>
@@ -156,11 +165,19 @@ const App: Component = () => {
               />
               <div class="prompt-actions">
                 <button
-                  class="copy-button"
+                  class="action-button copy-button"
                   onClick={copyToClipboard}
                 >
                   📋 Copy to clipboard
                 </button>
+                <a
+                  class="action-button chatgpt-button"
+                  href={getChatGPTUrl()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  🤖 Open in ChatGPT
+                </a>
               </div>
             </div>
           </div>

packages/plugin-dev/ai-productivity-prompts/src/assets/icon.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
-  <g transform="translate(50,50)">
-    <!-- Full size star shape -->
-    <path d="M 0,-45 L 11.25,-11.25 L 45,-13.5 L 15.75,6.75 L 22.5,40.5 L 0,13.5 L -22.5,40.5 L -15.75,6.75 L -45,-13.5 L -11.25,-11.25 Z" fill="currentColor" stroke="currentColor" stroke-width="2"/>
+  <!-- Robot icon (scaled up from 24x24 to fit in 100x100) -->
+  <g transform="translate(50, 50) scale(2.5) translate(-12, -12)" fill="white">
+    <path d="M20,9V7c0-1.1-0.9-2-2-2h-3c0-1.66-1.34-3-3-3S9,3.34,9,5H6C4.9,5,4,5.9,4,7v2c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3v4 c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-4c1.66,0,3-1.34,3-3C23,10.34,21.66,9,20,9z M7.5,11.5C7.5,10.67,8.17,10,9,10 s1.5,0.67,1.5,1.5S9.83,13,9,13S7.5,12.33,7.5,11.5z M16,17H8v-2h8V17z M15,13c-0.83,0-1.5-0.67-1.5-1.5S14.17,10,15,10 s1.5,0.67,1.5,1.5S15.83,13,15,13z"/>
   </g>
 </svg>

src/styles/_css-variables.scss

@@ -116,6 +116,7 @@
   --c-primary: var(--palette-primary-500);
   --c-accent: var(--palette-accent-500);
   --c-warn: var(--palette-warn-500);
+  --c-contrast: var(--palette-primary-contrast-500);
 
   // ===============================
   // SHADOWS & ELEVATION