Interactive AI-powered framework to evaluate, prioritize, and execute on opportunities with clarity and precision
Size
44.5 KB
Version
1.0.1
Created
Oct 26, 2025
Updated
20 days ago
1// ==UserScript==
2// @name Opportunity Execution Engine - AI Decision Framework
3// @description Interactive AI-powered framework to evaluate, prioritize, and execute on opportunities with clarity and precision
4// @version 1.0.1
5// @match https://*/*
6// @match http://*/*
7// @icon https://taaft.notion.site/images/favicon.ico
8// ==/UserScript==
9(function() {
10 'use strict';
11
12 console.log('Opportunity Execution Engine initialized');
13
14 // State management
15 let currentSession = {
16 step: 0,
17 opportunity: '',
18 commitments: '',
19 urgency: '',
20 responses: {},
21 sessionId: Date.now()
22 };
23
24 // Framework steps
25 const STEPS = {
26 0: 'WELCOME',
27 1: 'OPPORTUNITY_INPUT',
28 2: 'RESTATE_CONFIRM',
29 3: 'COMMITMENTS',
30 4: 'URGENCY',
31 5: 'GENERATING_REPORT',
32 6: 'SHOW_REPORT'
33 };
34
35 // Utility: Debounce function
36 function debounce(func, wait) {
37 let timeout;
38 return function executedFunction(...args) {
39 const later = () => {
40 clearTimeout(timeout);
41 func(...args);
42 };
43 clearTimeout(timeout);
44 timeout = setTimeout(later, wait);
45 };
46 }
47
48 // Create floating activation button
49 function createActivationButton() {
50 const button = document.createElement('button');
51 button.id = 'oee-activation-btn';
52 button.innerHTML = '⚡';
53 button.title = 'Open Opportunity Execution Engine';
54 button.style.cssText = `
55 position: fixed;
56 bottom: 30px;
57 right: 30px;
58 width: 60px;
59 height: 60px;
60 border-radius: 50%;
61 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
62 color: white;
63 border: none;
64 font-size: 28px;
65 cursor: pointer;
66 box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
67 z-index: 999999;
68 transition: all 0.3s ease;
69 display: flex;
70 align-items: center;
71 justify-content: center;
72 `;
73
74 button.addEventListener('mouseenter', () => {
75 button.style.transform = 'scale(1.1)';
76 button.style.boxShadow = '0 6px 30px rgba(102, 126, 234, 0.6)';
77 });
78
79 button.addEventListener('mouseleave', () => {
80 button.style.transform = 'scale(1)';
81 button.style.boxShadow = '0 4px 20px rgba(102, 126, 234, 0.4)';
82 });
83
84 button.addEventListener('click', () => {
85 openFramework();
86 });
87
88 document.body.appendChild(button);
89 console.log('Activation button created');
90 }
91
92 // Create main framework interface
93 function createFrameworkUI() {
94 const overlay = document.createElement('div');
95 overlay.id = 'oee-overlay';
96 overlay.style.cssText = `
97 position: fixed;
98 top: 0;
99 left: 0;
100 width: 100%;
101 height: 100%;
102 background: rgba(0, 0, 0, 0.7);
103 z-index: 1000000;
104 display: none;
105 align-items: center;
106 justify-content: center;
107 backdrop-filter: blur(5px);
108 `;
109
110 const container = document.createElement('div');
111 container.id = 'oee-container';
112 container.style.cssText = `
113 background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
114 border-radius: 20px;
115 width: 90%;
116 max-width: 800px;
117 max-height: 85vh;
118 overflow-y: auto;
119 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
120 position: relative;
121 color: #e0e0e0;
122 `;
123
124 const closeBtn = document.createElement('button');
125 closeBtn.innerHTML = '×';
126 closeBtn.style.cssText = `
127 position: absolute;
128 top: 20px;
129 right: 20px;
130 background: rgba(255, 255, 255, 0.1);
131 border: none;
132 color: #e0e0e0;
133 font-size: 32px;
134 width: 40px;
135 height: 40px;
136 border-radius: 50%;
137 cursor: pointer;
138 transition: all 0.3s ease;
139 display: flex;
140 align-items: center;
141 justify-content: center;
142 line-height: 1;
143 `;
144 closeBtn.addEventListener('mouseenter', () => {
145 closeBtn.style.background = 'rgba(255, 255, 255, 0.2)';
146 });
147 closeBtn.addEventListener('mouseleave', () => {
148 closeBtn.style.background = 'rgba(255, 255, 255, 0.1)';
149 });
150 closeBtn.addEventListener('click', closeFramework);
151
152 const content = document.createElement('div');
153 content.id = 'oee-content';
154 content.style.cssText = `
155 padding: 50px 40px;
156 `;
157
158 container.appendChild(closeBtn);
159 container.appendChild(content);
160 overlay.appendChild(container);
161 document.body.appendChild(overlay);
162 console.log('Framework UI created');
163 }
164
165 // Open framework
166 async function openFramework() {
167 const overlay = document.getElementById('oee-overlay');
168 if (!overlay) {
169 createFrameworkUI();
170 }
171
172 // Load saved session if exists
173 const savedSession = await GM.getValue('oee_current_session');
174 if (savedSession) {
175 currentSession = JSON.parse(savedSession);
176 console.log('Loaded saved session:', currentSession);
177 } else {
178 currentSession = {
179 step: 0,
180 opportunity: '',
181 commitments: '',
182 urgency: '',
183 responses: {},
184 sessionId: Date.now()
185 };
186 }
187
188 document.getElementById('oee-overlay').style.display = 'flex';
189 renderStep();
190 }
191
192 // Close framework
193 function closeFramework() {
194 document.getElementById('oee-overlay').style.display = 'none';
195 }
196
197 // Save session
198 async function saveSession() {
199 await GM.setValue('oee_current_session', JSON.stringify(currentSession));
200 console.log('Session saved');
201 }
202
203 // Render current step
204 function renderStep() {
205 const content = document.getElementById('oee-content');
206 const step = STEPS[currentSession.step];
207
208 switch(step) {
209 case 'WELCOME':
210 renderWelcome(content);
211 break;
212 case 'OPPORTUNITY_INPUT':
213 renderOpportunityInput(content);
214 break;
215 case 'RESTATE_CONFIRM':
216 renderRestateConfirm(content);
217 break;
218 case 'COMMITMENTS':
219 renderCommitments(content);
220 break;
221 case 'URGENCY':
222 renderUrgency(content);
223 break;
224 case 'GENERATING_REPORT':
225 renderGeneratingReport(content);
226 break;
227 case 'SHOW_REPORT':
228 renderReport(content);
229 break;
230 }
231 }
232
233 // Render welcome screen
234 function renderWelcome(content) {
235 content.innerHTML = `
236 <div style="text-align: center;">
237 <h1 style="font-size: 42px; margin-bottom: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
238 ⚡ Opportunity Execution Engine
239 </h1>
240 <p style="font-size: 18px; line-height: 1.8; color: #b0b0b0; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto;">
241 A rapid decision and action framework that helps you evaluate, prioritize, and act on opportunities with clarity and precision.
242 </p>
243 <div style="background: rgba(102, 126, 234, 0.1); border-left: 4px solid #667eea; padding: 20px; margin: 30px 0; text-align: left; border-radius: 8px;">
244 <h3 style="margin-top: 0; color: #667eea;">What This Framework Does:</h3>
245 <ul style="line-height: 2; color: #c0c0c0;">
246 <li>Helps you articulate opportunities clearly</li>
247 <li>Evaluates potential based on fit, timing, and expected return</li>
248 <li>Diagnoses risks, dependencies, and opportunity costs</li>
249 <li>Builds a structured Opportunity Matrix</li>
250 <li>Translates analysis into focused action plans</li>
251 <li>Provides a repeatable framework for future decisions</li>
252 </ul>
253 </div>
254 <button id="oee-start-btn" style="
255 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
256 color: white;
257 border: none;
258 padding: 18px 50px;
259 font-size: 18px;
260 border-radius: 30px;
261 cursor: pointer;
262 margin-top: 20px;
263 transition: all 0.3s ease;
264 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
265 ">
266 Begin Evaluation
267 </button>
268 </div>
269 `;
270
271 const startBtn = document.getElementById('oee-start-btn');
272 startBtn.addEventListener('mouseenter', () => {
273 startBtn.style.transform = 'translateY(-2px)';
274 startBtn.style.boxShadow = '0 6px 20px rgba(102, 126, 234, 0.6)';
275 });
276 startBtn.addEventListener('mouseleave', () => {
277 startBtn.style.transform = 'translateY(0)';
278 startBtn.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.4)';
279 });
280 startBtn.addEventListener('click', () => {
281 currentSession.step = 1;
282 saveSession();
283 renderStep();
284 });
285 }
286
287 // Render opportunity input
288 function renderOpportunityInput(content) {
289 content.innerHTML = `
290 <div>
291 <h2 style="font-size: 32px; margin-bottom: 20px; color: #667eea;">
292 Step 1: Describe Your Opportunity
293 </h2>
294 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
295 Describe the opportunity or idea you are considering. Include what it is, what attracted you to it, and what outcome you hope to achieve.
296 </p>
297
298 <div style="background: rgba(102, 126, 234, 0.1); border-left: 4px solid #667eea; padding: 20px; margin: 25px 0; border-radius: 8px;">
299 <h4 style="margin-top: 0; color: #667eea;">Examples to guide your input:</h4>
300 <ul style="line-height: 2; color: #c0c0c0; font-size: 14px;">
301 <li><strong>Business:</strong> "I'm considering launching a subscription box service for eco-friendly office supplies. I'm attracted to the recurring revenue model and growing sustainability market. I hope to build a $50k/month business within 18 months."</li>
302 <li><strong>Career:</strong> "I received a job offer to lead a new AI division at a startup. The equity package is compelling and aligns with my technical skills. I hope to gain executive experience and potentially 10x my compensation if they exit."</li>
303 <li><strong>Creative:</strong> "I want to write a book about decision-making frameworks for entrepreneurs. I'm drawn to establishing thought leadership and creating a passive income stream. I hope to publish within 12 months and generate speaking opportunities."</li>
304 <li><strong>Investment:</strong> "I'm considering investing $25k in a friend's SaaS startup. The product solves a real problem I've experienced, and early traction looks promising. I hope to 5-10x my investment in 3-5 years."</li>
305 </ul>
306 </div>
307
308 <textarea id="oee-opportunity-input" placeholder="Describe your opportunity in detail..." style="
309 width: 100%;
310 min-height: 200px;
311 padding: 20px;
312 font-size: 16px;
313 border: 2px solid rgba(102, 126, 234, 0.3);
314 border-radius: 12px;
315 background: rgba(255, 255, 255, 0.05);
316 color: #e0e0e0;
317 font-family: inherit;
318 resize: vertical;
319 box-sizing: border-box;
320 margin-bottom: 20px;
321 ">${currentSession.opportunity}</textarea>
322
323 <div style="display: flex; gap: 15px; justify-content: flex-end;">
324 <button id="oee-back-btn" style="
325 background: rgba(255, 255, 255, 0.1);
326 color: #e0e0e0;
327 border: none;
328 padding: 14px 30px;
329 font-size: 16px;
330 border-radius: 25px;
331 cursor: pointer;
332 transition: all 0.3s ease;
333 ">
334 Back
335 </button>
336 <button id="oee-next-btn" style="
337 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
338 color: white;
339 border: none;
340 padding: 14px 40px;
341 font-size: 16px;
342 border-radius: 25px;
343 cursor: pointer;
344 transition: all 0.3s ease;
345 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
346 ">
347 Continue
348 </button>
349 </div>
350 </div>
351 `;
352
353 const textarea = document.getElementById('oee-opportunity-input');
354 const nextBtn = document.getElementById('oee-next-btn');
355 const backBtn = document.getElementById('oee-back-btn');
356
357 textarea.addEventListener('input', debounce(() => {
358 currentSession.opportunity = textarea.value;
359 saveSession();
360 }, 500));
361
362 nextBtn.addEventListener('click', async () => {
363 if (!textarea.value.trim()) {
364 alert('Please describe your opportunity before continuing.');
365 return;
366 }
367 currentSession.opportunity = textarea.value;
368 currentSession.step = 2;
369 await saveSession();
370 renderStep();
371 });
372
373 backBtn.addEventListener('click', () => {
374 currentSession.step = 0;
375 saveSession();
376 renderStep();
377 });
378 }
379
380 // Render restate and confirm
381 function renderRestateConfirm(content) {
382 content.innerHTML = `
383 <div>
384 <h2 style="font-size: 32px; margin-bottom: 20px; color: #667eea;">
385 Step 2: Confirm Understanding
386 </h2>
387 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
388 Let me restate what I understand about your opportunity:
389 </p>
390
391 <div id="oee-restatement" style="
392 background: rgba(102, 126, 234, 0.1);
393 border-left: 4px solid #667eea;
394 padding: 25px;
395 margin: 25px 0;
396 border-radius: 8px;
397 line-height: 1.8;
398 color: #c0c0c0;
399 ">
400 <div style="text-align: center; padding: 40px;">
401 <div style="font-size: 48px; margin-bottom: 15px;">🤔</div>
402 <p style="color: #667eea;">Analyzing your opportunity...</p>
403 </div>
404 </div>
405
406 <div style="display: flex; gap: 15px; justify-content: flex-end; margin-top: 30px;">
407 <button id="oee-back-btn" style="
408 background: rgba(255, 255, 255, 0.1);
409 color: #e0e0e0;
410 border: none;
411 padding: 14px 30px;
412 font-size: 16px;
413 border-radius: 25px;
414 cursor: pointer;
415 transition: all 0.3s ease;
416 ">
417 Back to Edit
418 </button>
419 <button id="oee-confirm-btn" style="
420 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
421 color: white;
422 border: none;
423 padding: 14px 40px;
424 font-size: 16px;
425 border-radius: 25px;
426 cursor: pointer;
427 transition: all 0.3s ease;
428 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
429 opacity: 0.5;
430 pointer-events: none;
431 ">
432 Yes, That's Correct
433 </button>
434 </div>
435 </div>
436 `;
437
438 const backBtn = document.getElementById('oee-back-btn');
439 const confirmBtn = document.getElementById('oee-confirm-btn');
440
441 backBtn.addEventListener('click', () => {
442 currentSession.step = 1;
443 saveSession();
444 renderStep();
445 });
446
447 // Generate AI restatement
448 generateRestatement();
449
450 async function generateRestatement() {
451 try {
452 const prompt = `You are analyzing an opportunity described by a user. Restate their opportunity clearly and neutrally. Identify:
4531. The opportunity itself (what it is)
4542. Its category (business, career, creative, investment, etc.)
4553. The desired result or outcome
456
457User's description:
458"${currentSession.opportunity}"
459
460Provide a clear, structured restatement that confirms understanding. Be concise but thorough. Format your response in a friendly, professional tone.`;
461
462 const restatement = await RM.aiCall(prompt);
463
464 currentSession.responses.restatement = restatement;
465 await saveSession();
466
467 document.getElementById('oee-restatement').innerHTML = `
468 <div style="white-space: pre-wrap;">${restatement}</div>
469 `;
470
471 confirmBtn.style.opacity = '1';
472 confirmBtn.style.pointerEvents = 'auto';
473
474 confirmBtn.addEventListener('click', async () => {
475 currentSession.step = 3;
476 await saveSession();
477 renderStep();
478 });
479
480 } catch (error) {
481 console.error('Error generating restatement:', error);
482 document.getElementById('oee-restatement').innerHTML = `
483 <div style="color: #ff6b6b;">
484 <strong>Error generating analysis.</strong> Please check your connection and try again.
485 </div>
486 `;
487 }
488 }
489 }
490
491 // Render commitments
492 function renderCommitments(content) {
493 content.innerHTML = `
494 <div>
495 <h2 style="font-size: 32px; margin-bottom: 20px; color: #667eea;">
496 Step 3: Current Commitments
497 </h2>
498 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
499 What other commitments or projects do you currently have running? This helps contextualize your capacity and opportunity cost.
500 </p>
501
502 <div style="background: rgba(102, 126, 234, 0.1); border-left: 4px solid #667eea; padding: 20px; margin: 25px 0; border-radius: 8px;">
503 <h4 style="margin-top: 0; color: #667eea;">Examples:</h4>
504 <ul style="line-height: 2; color: #c0c0c0; font-size: 14px;">
505 <li>"Full-time job (40 hrs/week), side consulting project (10 hrs/week), training for a marathon (8 hrs/week)"</li>
506 <li>"Running my e-commerce store (30 hrs/week), managing rental property (5 hrs/week), family commitments (evenings and weekends)"</li>
507 <li>"Finishing my master's degree (20 hrs/week), part-time freelancing (15 hrs/week), building my portfolio website"</li>
508 <li>"Leading a team at work (50 hrs/week), mentoring two junior developers (3 hrs/week), learning Spanish (2 hrs/week)"</li>
509 </ul>
510 </div>
511
512 <textarea id="oee-commitments-input" placeholder="List your current commitments and time allocations..." style="
513 width: 100%;
514 min-height: 180px;
515 padding: 20px;
516 font-size: 16px;
517 border: 2px solid rgba(102, 126, 234, 0.3);
518 border-radius: 12px;
519 background: rgba(255, 255, 255, 0.05);
520 color: #e0e0e0;
521 font-family: inherit;
522 resize: vertical;
523 box-sizing: border-box;
524 margin-bottom: 20px;
525 ">${currentSession.commitments}</textarea>
526
527 <div style="display: flex; gap: 15px; justify-content: flex-end;">
528 <button id="oee-back-btn" style="
529 background: rgba(255, 255, 255, 0.1);
530 color: #e0e0e0;
531 border: none;
532 padding: 14px 30px;
533 font-size: 16px;
534 border-radius: 25px;
535 cursor: pointer;
536 transition: all 0.3s ease;
537 ">
538 Back
539 </button>
540 <button id="oee-next-btn" style="
541 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
542 color: white;
543 border: none;
544 padding: 14px 40px;
545 font-size: 16px;
546 border-radius: 25px;
547 cursor: pointer;
548 transition: all 0.3s ease;
549 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
550 ">
551 Continue
552 </button>
553 </div>
554 </div>
555 `;
556
557 const textarea = document.getElementById('oee-commitments-input');
558 const nextBtn = document.getElementById('oee-next-btn');
559 const backBtn = document.getElementById('oee-back-btn');
560
561 textarea.addEventListener('input', debounce(() => {
562 currentSession.commitments = textarea.value;
563 saveSession();
564 }, 500));
565
566 nextBtn.addEventListener('click', async () => {
567 if (!textarea.value.trim()) {
568 alert('Please describe your current commitments before continuing.');
569 return;
570 }
571 currentSession.commitments = textarea.value;
572 currentSession.step = 4;
573 await saveSession();
574 renderStep();
575 });
576
577 backBtn.addEventListener('click', () => {
578 currentSession.step = 2;
579 saveSession();
580 renderStep();
581 });
582 }
583
584 // Render urgency
585 function renderUrgency(content) {
586 content.innerHTML = `
587 <div>
588 <h2 style="font-size: 32px; margin-bottom: 20px; color: #667eea;">
589 Step 4: Timing & Urgency
590 </h2>
591 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
592 Rate the opportunity's urgency and timing. Is now the best moment, or would later yield better conditions?
593 </p>
594
595 <div style="background: rgba(102, 126, 234, 0.1); border-left: 4px solid #667eea; padding: 20px; margin: 25px 0; border-radius: 8px;">
596 <h4 style="margin-top: 0; color: #667eea;">Consider:</h4>
597 <ul style="line-height: 2; color: #c0c0c0; font-size: 14px;">
598 <li>Are there time-sensitive factors (market window, competition, deadlines)?</li>
599 <li>Do you have the necessary skills and resources now, or do you need to prepare?</li>
600 <li>Would waiting improve your position or cause you to miss the opportunity?</li>
601 <li>What's the cost of acting now vs. waiting 3-6 months?</li>
602 </ul>
603 </div>
604
605 <textarea id="oee-urgency-input" placeholder="Describe the timing considerations and urgency level..." style="
606 width: 100%;
607 min-height: 180px;
608 padding: 20px;
609 font-size: 16px;
610 border: 2px solid rgba(102, 126, 234, 0.3);
611 border-radius: 12px;
612 background: rgba(255, 255, 255, 0.05);
613 color: #e0e0e0;
614 font-family: inherit;
615 resize: vertical;
616 box-sizing: border-box;
617 margin-bottom: 20px;
618 ">${currentSession.urgency}</textarea>
619
620 <div style="display: flex; gap: 15px; justify-content: flex-end;">
621 <button id="oee-back-btn" style="
622 background: rgba(255, 255, 255, 0.1);
623 color: #e0e0e0;
624 border: none;
625 padding: 14px 30px;
626 font-size: 16px;
627 border-radius: 25px;
628 cursor: pointer;
629 transition: all 0.3s ease;
630 ">
631 Back
632 </button>
633 <button id="oee-generate-btn" style="
634 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
635 color: white;
636 border: none;
637 padding: 14px 40px;
638 font-size: 16px;
639 border-radius: 25px;
640 cursor: pointer;
641 transition: all 0.3s ease;
642 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
643 ">
644 Generate Report
645 </button>
646 </div>
647 </div>
648 `;
649
650 const textarea = document.getElementById('oee-urgency-input');
651 const generateBtn = document.getElementById('oee-generate-btn');
652 const backBtn = document.getElementById('oee-back-btn');
653
654 textarea.addEventListener('input', debounce(() => {
655 currentSession.urgency = textarea.value;
656 saveSession();
657 }, 500));
658
659 generateBtn.addEventListener('click', async () => {
660 if (!textarea.value.trim()) {
661 alert('Please describe the timing considerations before continuing.');
662 return;
663 }
664 currentSession.urgency = textarea.value;
665 currentSession.step = 5;
666 await saveSession();
667 renderStep();
668 });
669
670 backBtn.addEventListener('click', () => {
671 currentSession.step = 3;
672 saveSession();
673 renderStep();
674 });
675 }
676
677 // Render generating report
678 function renderGeneratingReport(content) {
679 content.innerHTML = `
680 <div style="text-align: center; padding: 60px 20px;">
681 <div style="font-size: 72px; margin-bottom: 30px; animation: pulse 2s infinite;">⚡</div>
682 <h2 style="font-size: 32px; margin-bottom: 20px; color: #667eea;">
683 Generating Your Execution Report
684 </h2>
685 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
686 Analyzing your opportunity through the framework...
687 </p>
688 <div style="width: 300px; height: 4px; background: rgba(102, 126, 234, 0.2); border-radius: 2px; margin: 30px auto; overflow: hidden;">
689 <div style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); animation: loading 2s infinite;"></div>
690 </div>
691 </div>
692 `;
693
694 // Add animations
695 const style = document.createElement('style');
696 style.textContent = `
697 @keyframes pulse {
698 0%, 100% { transform: scale(1); opacity: 1; }
699 50% { transform: scale(1.1); opacity: 0.8; }
700 }
701 @keyframes loading {
702 0% { transform: translateX(-100%); }
703 100% { transform: translateX(100%); }
704 }
705 `;
706 document.head.appendChild(style);
707
708 // Generate the full report
709 generateFullReport();
710 }
711
712 // Generate full report using AI
713 async function generateFullReport() {
714 try {
715 const prompt = `You are the Opportunity Execution Engine, an AI decision framework that helps users evaluate and execute on opportunities with clarity and precision.
716
717Generate a comprehensive Opportunity Execution Report based on the following user inputs:
718
719OPPORTUNITY DESCRIPTION:
720${currentSession.opportunity}
721
722CURRENT COMMITMENTS:
723${currentSession.commitments}
724
725TIMING & URGENCY:
726${currentSession.urgency}
727
728YOUR RESTATEMENT:
729${currentSession.responses.restatement}
730
731Generate a detailed report following this exact structure:
732
733# OPPORTUNITY EXECUTION REPORT
734
735## 1. OPPORTUNITY OVERVIEW
736Provide a clear 2-3 sentence summary of the opportunity, its purpose, and intended outcome.
737
738## 2. CURRENT COMMITMENTS
739List and analyze the user's major commitments that could impact time, focus, or energy. Assess capacity realistically.
740
741## 3. OPPORTUNITY FIT ASSESSMENT
742
743### Alignment (Does it match goals, strengths, and values?)
744Provide detailed analysis with specific reasoning.
745
746### Feasibility (Can it realistically be done with available time, skill, and resources?)
747Provide detailed analysis with specific reasoning.
748
749### Leverage (Does it create disproportionate impact or unlock future advantages?)
750Provide detailed analysis with specific reasoning.
751
752## 4. TIMING AND URGENCY
753Analyze whether the opportunity should be acted on immediately, prepared for, or delayed. Explain the reasoning clearly with specific factors.
754
755## 5. OPPORTUNITY MATRIX
756Place the opportunity in one of these four quadrants and explain why:
757- **High Impact, High Readiness** → Act immediately
758- **High Impact, Low Readiness** → Prepare or partner
759- **Low Impact, High Readiness** → Delegate or systematize
760- **Low Impact, Low Readiness** → Discard or delay
761
762Provide the quadrant placement and strategic implications.
763
764## 6. EXECUTION PLAN
765
766### Phase 1: Validation
767List 3-5 specific steps to test the opportunity's core assumptions quickly (within 1-2 weeks).
768
769### Phase 2: Action
770List 3-5 specific steps to execute with minimal viable effort (within 1-3 months).
771
772### Phase 3: Optimization
773List 3-5 specific steps to refine systems and scale results (3-12 months).
774
775## 7. RISK MANAGEMENT
776Identify 3-5 potential challenges, dependencies, or opportunity costs. For each, provide a specific mitigation tactic.
777
778## 8. REFLECTION PROMPTS
779Provide 3 open-ended questions that encourage continued learning and better opportunity recognition in the future.
780
781## 9. CLOSING ENCOURAGEMENT
782End with 2-3 sentences that reinforce that opportunities reward speed and clarity, not perfection, and that decisive action creates momentum while overthinking drains it.
783
784---
785
786Make the report highly specific to the user's situation. Use their exact details. Be strategic, practical, and empowering. Exceed typical decision-making frameworks with depth and actionability.`;
787
788 const report = await RM.aiCall(prompt);
789
790 currentSession.responses.fullReport = report;
791 currentSession.responses.generatedAt = new Date().toISOString();
792 currentSession.step = 6;
793 await saveSession();
794
795 // Save to history
796 const history = await GM.getValue('oee_history', '[]');
797 const historyArray = JSON.parse(history);
798 historyArray.unshift({
799 sessionId: currentSession.sessionId,
800 opportunity: currentSession.opportunity.substring(0, 100) + '...',
801 generatedAt: currentSession.responses.generatedAt,
802 fullData: currentSession
803 });
804 // Keep only last 10 reports
805 if (historyArray.length > 10) {
806 historyArray.pop();
807 }
808 await GM.setValue('oee_history', JSON.stringify(historyArray));
809
810 renderStep();
811
812 } catch (error) {
813 console.error('Error generating report:', error);
814 const content = document.getElementById('oee-content');
815 content.innerHTML = `
816 <div style="text-align: center; padding: 60px 20px;">
817 <div style="font-size: 72px; margin-bottom: 30px;">⚠️</div>
818 <h2 style="font-size: 32px; margin-bottom: 20px; color: #ff6b6b;">
819 Error Generating Report
820 </h2>
821 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
822 There was an error generating your report. Please check your connection and try again.
823 </p>
824 <button id="oee-retry-btn" style="
825 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
826 color: white;
827 border: none;
828 padding: 14px 40px;
829 font-size: 16px;
830 border-radius: 25px;
831 cursor: pointer;
832 transition: all 0.3s ease;
833 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
834 ">
835 Try Again
836 </button>
837 </div>
838 `;
839
840 document.getElementById('oee-retry-btn').addEventListener('click', () => {
841 renderGeneratingReport(content);
842 });
843 }
844 }
845
846 // Render final report
847 function renderReport(content) {
848 const report = currentSession.responses.fullReport;
849
850 // Convert markdown-style formatting to HTML
851 let htmlReport = report
852 .replace(/^# (.+)$/gm, '<h1 style="font-size: 36px; margin: 30px 0 20px 0; color: #667eea;">$1</h1>')
853 .replace(/^## (.+)$/gm, '<h2 style="font-size: 28px; margin: 25px 0 15px 0; color: #8b9dc3;">$1</h2>')
854 .replace(/^### (.+)$/gm, '<h3 style="font-size: 22px; margin: 20px 0 10px 0; color: #a0aec0;">$1</h3>')
855 .replace(/^\*\*(.+?)\*\*/gm, '<strong style="color: #667eea;">$1</strong>')
856 .replace(/\*\*(.+?)\*\*/g, '<strong style="color: #667eea;">$1</strong>')
857 .replace(/^- (.+)$/gm, '<li style="margin: 8px 0; line-height: 1.6;">$1</li>')
858 .replace(/\n\n/g, '</p><p style="line-height: 1.8; color: #c0c0c0; margin: 15px 0;">')
859 .replace(/^(?!<[h|l|p])/gm, '<p style="line-height: 1.8; color: #c0c0c0; margin: 15px 0;">');
860
861 // Wrap lists
862 htmlReport = htmlReport.replace(/(<li[^>]*>.*<\/li>)/gs, '<ul style="margin: 15px 0; padding-left: 25px;">$1</ul>');
863
864 content.innerHTML = `
865 <div>
866 <div style="text-align: center; margin-bottom: 30px;">
867 <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
868 <h1 style="font-size: 36px; margin-bottom: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
869 Your Execution Report is Ready
870 </h1>
871 <p style="color: #b0b0b0; font-size: 14px;">Generated on ${new Date(currentSession.responses.generatedAt).toLocaleString()}</p>
872 </div>
873
874 <div id="oee-report-content" style="
875 background: rgba(255, 255, 255, 0.03);
876 border-radius: 12px;
877 padding: 40px;
878 margin: 30px 0;
879 line-height: 1.8;
880 ">
881 ${htmlReport}
882 </div>
883
884 <div style="display: flex; gap: 15px; justify-content: center; margin-top: 30px; flex-wrap: wrap;">
885 <button id="oee-copy-btn" style="
886 background: rgba(102, 126, 234, 0.2);
887 color: #667eea;
888 border: 2px solid #667eea;
889 padding: 14px 30px;
890 font-size: 16px;
891 border-radius: 25px;
892 cursor: pointer;
893 transition: all 0.3s ease;
894 ">
895 📋 Copy Report
896 </button>
897 <button id="oee-history-btn" style="
898 background: rgba(102, 126, 234, 0.2);
899 color: #667eea;
900 border: 2px solid #667eea;
901 padding: 14px 30px;
902 font-size: 16px;
903 border-radius: 25px;
904 cursor: pointer;
905 transition: all 0.3s ease;
906 ">
907 📚 View History
908 </button>
909 <button id="oee-new-btn" style="
910 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
911 color: white;
912 border: none;
913 padding: 14px 40px;
914 font-size: 16px;
915 border-radius: 25px;
916 cursor: pointer;
917 transition: all 0.3s ease;
918 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
919 ">
920 🚀 New Evaluation
921 </button>
922 </div>
923 </div>
924 `;
925
926 // Copy button
927 document.getElementById('oee-copy-btn').addEventListener('click', async () => {
928 try {
929 await GM.setClipboard(report);
930 const btn = document.getElementById('oee-copy-btn');
931 btn.textContent = '✅ Copied!';
932 setTimeout(() => {
933 btn.textContent = '📋 Copy Report';
934 }, 2000);
935 } catch (error) {
936 console.error('Error copying to clipboard:', error);
937 alert('Failed to copy report. Please try selecting and copying manually.');
938 }
939 });
940
941 // History button
942 document.getElementById('oee-history-btn').addEventListener('click', () => {
943 showHistory();
944 });
945
946 // New evaluation button
947 document.getElementById('oee-new-btn').addEventListener('click', async () => {
948 currentSession = {
949 step: 0,
950 opportunity: '',
951 commitments: '',
952 urgency: '',
953 responses: {},
954 sessionId: Date.now()
955 };
956 await saveSession();
957 renderStep();
958 });
959 }
960
961 // Show history
962 async function showHistory() {
963 const history = await GM.getValue('oee_history', '[]');
964 const historyArray = JSON.parse(history);
965
966 const content = document.getElementById('oee-content');
967
968 if (historyArray.length === 0) {
969 content.innerHTML = `
970 <div style="text-align: center; padding: 60px 20px;">
971 <div style="font-size: 72px; margin-bottom: 30px;">📚</div>
972 <h2 style="font-size: 32px; margin-bottom: 20px; color: #667eea;">
973 No History Yet
974 </h2>
975 <p style="font-size: 16px; line-height: 1.8; color: #b0b0b0; margin-bottom: 25px;">
976 Your past evaluations will appear here.
977 </p>
978 <button id="oee-back-to-report-btn" style="
979 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
980 color: white;
981 border: none;
982 padding: 14px 40px;
983 font-size: 16px;
984 border-radius: 25px;
985 cursor: pointer;
986 transition: all 0.3s ease;
987 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
988 ">
989 Back to Report
990 </button>
991 </div>
992 `;
993
994 document.getElementById('oee-back-to-report-btn').addEventListener('click', () => {
995 renderStep();
996 });
997 return;
998 }
999
1000 let historyHTML = `
1001 <div>
1002 <h2 style="font-size: 32px; margin-bottom: 30px; color: #667eea;">
1003 📚 Evaluation History
1004 </h2>
1005 <div style="margin-bottom: 30px;">
1006 `;
1007
1008 historyArray.forEach((item, index) => {
1009 const date = new Date(item.generatedAt).toLocaleDateString();
1010 historyHTML += `
1011 <div style="
1012 background: rgba(255, 255, 255, 0.05);
1013 border-radius: 12px;
1014 padding: 20px;
1015 margin-bottom: 15px;
1016 cursor: pointer;
1017 transition: all 0.3s ease;
1018 border: 2px solid transparent;
1019 " class="history-item" data-index="${index}">
1020 <div style="display: flex; justify-content: space-between; align-items: start;">
1021 <div style="flex: 1;">
1022 <div style="color: #667eea; font-size: 14px; margin-bottom: 8px;">${date}</div>
1023 <div style="color: #e0e0e0; line-height: 1.6;">${item.opportunity}</div>
1024 </div>
1025 <div style="color: #667eea; font-size: 24px; margin-left: 15px;">→</div>
1026 </div>
1027 </div>
1028 `;
1029 });
1030
1031 historyHTML += `
1032 </div>
1033 <button id="oee-back-to-report-btn" style="
1034 background: rgba(255, 255, 255, 0.1);
1035 color: #e0e0e0;
1036 border: none;
1037 padding: 14px 30px;
1038 font-size: 16px;
1039 border-radius: 25px;
1040 cursor: pointer;
1041 transition: all 0.3s ease;
1042 ">
1043 Back to Current Report
1044 </button>
1045 </div>
1046 `;
1047
1048 content.innerHTML = historyHTML;
1049
1050 // Add hover effects and click handlers
1051 document.querySelectorAll('.history-item').forEach(item => {
1052 item.addEventListener('mouseenter', () => {
1053 item.style.background = 'rgba(102, 126, 234, 0.1)';
1054 item.style.borderColor = '#667eea';
1055 });
1056 item.addEventListener('mouseleave', () => {
1057 item.style.background = 'rgba(255, 255, 255, 0.05)';
1058 item.style.borderColor = 'transparent';
1059 });
1060 item.addEventListener('click', () => {
1061 const index = parseInt(item.dataset.index);
1062 loadHistoryItem(historyArray[index]);
1063 });
1064 });
1065
1066 document.getElementById('oee-back-to-report-btn').addEventListener('click', () => {
1067 renderStep();
1068 });
1069 }
1070
1071 // Load history item
1072 async function loadHistoryItem(item) {
1073 currentSession = item.fullData;
1074 await saveSession();
1075 renderStep();
1076 }
1077
1078 // Initialize
1079 function init() {
1080 console.log('Initializing Opportunity Execution Engine...');
1081
1082 // Wait for body to be ready
1083 if (document.body) {
1084 createActivationButton();
1085 } else {
1086 const observer = new MutationObserver((mutations, obs) => {
1087 if (document.body) {
1088 createActivationButton();
1089 obs.disconnect();
1090 }
1091 });
1092 observer.observe(document.documentElement, { childList: true, subtree: true });
1093 }
1094 }
1095
1096 // Start when DOM is ready
1097 if (document.readyState === 'loading') {
1098 document.addEventListener('DOMContentLoaded', init);
1099 } else {
1100 init();
1101 }
1102
1103})();