Add social media sharing to Copilot Fluency Score dashboard

README.md

@@ -9,6 +9,8 @@ You can also use a **shared Azure Storage account** (a “shared storage server
 ## Features
 
 - **Real-time Token Tracking**: Displays current day and month token usage in the status bar
+- **Copilot Fluency Score**: Maturity model dashboard with 4 stages across 6 categories to track your Copilot mastery
+- **Social Media Sharing**: Share your Fluency Score achievements on LinkedIn, Bluesky, and Mastodon with #CopilotFluencyScore
 - **Usage Analysis Dashboard**: Comprehensive analytics on how you use Copilot (modes, tool calls, context references, MCP tools)
 - **Copilot Fluency Score**: Evaluate your proficiency across 6 categories with actionable tips for improvement
 - **Fluency Level Viewer**: Debug-only tool to explore all scoring rules and thresholds (requires active debugger)

docs/IMPLEMENTATION-SUMMARY-SOCIAL-SHARE.md

@@ -0,0 +1,248 @@
+# Implementation Summary: Social Media Share Feature
+
+## Overview
+Added social media sharing capabilities to the Copilot Fluency Score dashboard, enabling users to share their achievements on LinkedIn, Bluesky, and Mastodon with a single click.
+
+## Implementation Approach
+
+### 1. User Interface (Frontend)
+**File:** `src/webview/maturity/main.ts`
+
+Added a new share section below the category cards with:
+- 4 share buttons (LinkedIn, Bluesky, Mastodon, Download)
+- Platform-specific icons (💼, 🦋, 🐘, 💾)
+- Event listeners that send messages to the extension host
+
+```typescript
+// Share buttons HTML structure
+<div class="share-section">
+  <div class="share-header">...</div>
+  <div class="share-description">...</div>
+  <div class="share-buttons">
+    <button id="btn-share-linkedin">...</button>
+    <button id="btn-share-bluesky">...</button>
+    <button id="btn-share-mastodon">...</button>
+    <button id="btn-download-image">...</button>
+  </div>
+</div>
+```
+
+### 2. Business Logic (Backend)
+**File:** `src/extension.ts`
+
+Implemented two main methods:
+
+#### `shareToSocialMedia(platform: 'linkedin' | 'bluesky' | 'mastodon')`
+Handles sharing logic for each platform:
+
+**LinkedIn Flow:**
+- Copies pre-formatted text to clipboard
+- Shows notification with "Open LinkedIn" button
+- Opens LinkedIn share page if user clicks the button
+- User pastes clipboard content and adds commentary
+
+**Bluesky Flow:**
+- Opens Bluesky compose intent URL
+- Pre-fills text via URL parameter
+- User can edit before posting
+
+**Mastodon Flow:**
+- Prompts user for their instance (default: mastodon.social)
+- Opens instance-specific share URL
+- Pre-fills text via URL parameter
+
+#### `downloadChartImage()`
+Shows instructional dialog:
+- Explains how to right-click the SVG chart
+- Provides step-by-step instructions
+- Notes that the chart is an SVG graphic
+
+### 3. Styling (CSS)
+**File:** `src/webview/maturity/styles.css`
+
+Added comprehensive styles:
+- `.share-section`: Container with gradient background
+- `.share-btn`: Base button styles
+- Platform-specific classes with brand colors:
+  - LinkedIn: #0a66c2 (professional blue)
+  - Bluesky: #1285fe (bright blue)
+  - Mastodon: #6364ff (purple)
+  - Download: #10b981 (green)
+- Hover effects with elevation and glowing shadows
+- Responsive grid layout using `auto-fit` and `minmax(200px, 1fr)`
+
+### 4. Message Handling
+**File:** `src/extension.ts`
+
+Added message handlers in the maturity panel's `onDidReceiveMessage`:
+```typescript
+case 'shareToLinkedIn':
+  await this.shareToSocialMedia('linkedin');
+  break;
+case 'shareToBluesky':
+  await this.shareToSocialMedia('bluesky');
+  break;
+case 'shareToMastodon':
+  await this.shareToSocialMedia('mastodon');
+  break;
+case 'downloadChartImage':
+  await this.downloadChartImage();
+  break;
+```
+
+## Share Content Template
+
+The generated share text includes:
+```
+🎯 My GitHub Copilot Fluency Score
+
+Overall: [Stage and Label]
+
+💬 Prompt Engineering: Stage X
+📎 Context Engineering: Stage X
+🤖 Agentic: Stage X
+🔧 Tool Usage: Stage X
+⚙️ Customization: Stage X
+🎓 Learning: Stage X
+
+Track your Copilot usage and level up your AI-assisted development skills!
+
+Get the extension: https://marketplace.visualstudio.com/items?itemName=RobBos.copilot-token-tracker
+
+#CopilotFluencyScore
+```
+
+### Key Components:
+1. **Emoji header** (🎯) - Visual appeal
+2. **Overall stage** - High-level achievement
+3. **Category breakdown** - Detailed scores with emojis
+4. **Call to action** - Encourages others to track their usage
+5. **Marketplace link** - Direct install path
+6. **Hashtag** - Community building (#CopilotFluencyScore)
+
+## Technical Decisions
+
+### 1. Platform URL Schemes
+- **LinkedIn**: Used `sharing/share-offsite` with clipboard for better UX
+- **Bluesky**: Used `intent/compose` web intent API
+- **Mastodon**: Used instance-specific `/share` endpoint with user prompt
+
+### 2. Clipboard Integration (LinkedIn)
+Chose to copy text to clipboard rather than using URL parameters because:
+- LinkedIn's share API doesn't support pre-filled text
+- Clipboard approach gives users more control
+- Allows for longer, formatted messages
+
+### 3. SVG Chart Download
+Provided instructions rather than programmatic download because:
+- SVG is already in the DOM and easy to right-click
+- Avoids complex canvas conversion
+- Works across all platforms
+- Users can choose format (PNG, SVG, copy image)
+
+### 4. Responsive Layout
+Used CSS Grid with `auto-fit` for automatic responsive behavior:
+- Desktop: 2x2 grid or 4 columns
+- Tablet: 2 columns
+- Mobile: Single column
+- No media queries needed
+
+## Documentation
+
+Created three documentation files:
+
+1. **SOCIAL-MEDIA-SHARE.md**
+   - Feature overview
+   - Platform-specific behaviors
+   - Share content template
+   - Implementation details
+
+2. **VISUAL-MOCKUP-SHARE-FEATURE.md**
+   - ASCII art mockup of the UI
+   - Button style descriptions
+   - User flow examples for each platform
+   - Responsive design details
+
+3. **Updated README.md**
+   - Added social sharing to features list
+   - Mentioned Fluency Score dashboard
+
+## Quality Assurance
+
+### Linting & Compilation
+- ✅ TypeScript type checking passes (`npm run check-types`)
+- ✅ ESLint passes (`npm run lint`)
+- ✅ Stylelint passes (`npm run lint:css`)
+- ✅ Full compilation succeeds (`npm run compile`)
+
+### Security
+- ✅ CodeQL scan: 0 vulnerabilities
+- ✅ All user inputs are URL-encoded
+- ✅ No external scripts or dependencies added
+- ✅ CSP remains unchanged and secure
+
+### Code Review
+- ✅ Automated code review completed
+- ✅ All suggestions reviewed (CSS color function syntax is correct)
+- ✅ No critical issues found
+
+## Code Statistics
+
+- **Files changed**: 6
+- **Lines added**: ~400
+- **Lines removed**: ~30
+- **Net change**: ~370 lines
+
+**Breakdown:**
+- `src/extension.ts`: +93 lines (share logic)
+- `src/webview/maturity/main.ts`: +44 lines (UI and events)
+- `src/webview/maturity/styles.css`: +131 lines (styling)
+- `docs/`: +3 new documentation files
+- `README.md`: +2 lines (feature mention)
+
+## Future Enhancements
+
+Potential improvements for future iterations:
+
+1. **Image Generation**
+   - Generate actual image from SVG for LinkedIn image posts
+   - Use Canvas API or server-side rendering
+
+2. **More Platforms**
+   - Twitter/X support
+   - Facebook support
+   - Reddit support
+
+3. **Customization**
+   - Allow users to edit share text before posting
+   - Choose which categories to include
+   - Add personal message
+
+4. **Analytics**
+   - Track which platforms users prefer
+   - Measure share button click rates
+
+5. **Share Templates**
+   - Multiple share text templates
+   - Language localization
+   - Achievement-specific messages
+
+## Lessons Learned
+
+1. **Platform Differences**: Each social platform has unique share APIs and constraints
+2. **User Control**: Users appreciate control over what they share (clipboard approach)
+3. **Simplicity**: Simple instructions work better than complex automation
+4. **Responsive Design**: CSS Grid `auto-fit` is powerful for responsive layouts
+5. **Brand Colors**: Using platform-specific colors improves recognition
+
+## Conclusion
+
+Successfully implemented a comprehensive social media sharing feature that:
+- Provides easy one-click sharing to three major platforms
+- Generates professional, engaging share content
+- Maintains the extension's brand identity
+- Includes proper documentation
+- Passes all quality checks
+- Requires no external dependencies
+
+The feature is production-ready and enhances the Copilot Fluency Score dashboard by enabling community engagement and organic growth through social sharing.

docs/SOCIAL-MEDIA-SHARE.md

@@ -0,0 +1,101 @@
+# Social Media Share Feature
+
+The Copilot Fluency Score dashboard now includes built-in social media sharing capabilities, allowing users to share their achievements and progress with the community.
+
+## Features
+
+### Share Buttons
+
+The dashboard includes four share buttons located below the category cards:
+
+1. **💼 Share on LinkedIn** - Opens LinkedIn share dialog with pre-formatted text
+2. **🦋 Share on Bluesky** - Opens Bluesky compose window with share text
+3. **🐘 Share on Mastodon** - Prompts for Mastodon instance, then opens share dialog
+4. **💾 Download Chart Image** - Provides instructions for saving the radar chart
+
+### Share Content
+
+When sharing to social media, the extension generates a formatted message that includes:
+
+```
+🎯 My GitHub Copilot Fluency Score
+
+Overall: [Your Stage Label]
+
+💬 Prompt Engineering: Stage X
+📎 Context Engineering: Stage X
+🤖 Agentic: Stage X
+🔧 Tool Usage: Stage X
+⚙️ Customization: Stage X
+🎓 Learning: Stage X
+
+Track your Copilot usage and level up your AI-assisted development skills!
+
+Get the extension: https://marketplace.visualstudio.com/items?itemName=RobBos.copilot-token-tracker
+
+#CopilotFluencyScore
+```
+
+### Platform-Specific Behavior
+
+#### LinkedIn
+- Copies the share text to clipboard
+- Shows a notification with instructions
+- Optionally opens LinkedIn sharing page
+- User can paste the text and add their own commentary
+
+#### Bluesky
+- Opens Bluesky compose window directly
+- Pre-fills the share text
+- User can edit before posting
+
+#### Mastodon
+- Prompts for the user's Mastodon instance (e.g., mastodon.social)
+- Opens the instance's share dialog
+- Pre-fills the share text
+
+#### Download Chart
+- Provides instructions for saving the SVG radar chart
+- Users can right-click the chart to save or copy the image
+
+## Hashtag
+
+All shares include the unique hashtag **#CopilotFluencyScore** to help build a community around the extension and allow users to discover others' experiences.
+
+## Marketplace Link
+
+Each share includes a direct link to the VS Code Marketplace page for the extension:
+`https://marketplace.visualstudio.com/items?itemName=RobBos.copilot-token-tracker`
+
+This makes it easy for interested developers to install the extension and start tracking their own Copilot usage.
+
+## Visual Design
+
+The share section features:
+- Gradient background matching the dashboard theme
+- Platform-specific button colors:
+  - LinkedIn: Professional blue (#0a66c2)
+  - Bluesky: Bright blue (#1285fe)
+  - Mastodon: Purple (#6364ff)
+  - Download: Green (#10b981)
+- Hover effects with elevation and glow
+- Responsive grid layout that adapts to screen size
+
+## Implementation Details
+
+### Frontend (webview/maturity/main.ts)
+- Share section HTML with four buttons
+- Event listeners for each share action
+- Messages sent to extension host
+
+### Backend (extension.ts)
+- `shareToSocialMedia(platform)` - Handles share logic for each platform
+- `downloadChartImage()` - Provides download instructions
+- URL encoding for safe sharing
+- Clipboard integration for LinkedIn
+
+### Styling (webview/maturity/styles.css)
+- `.share-section` - Container styling
+- `.share-btn` - Button base styles
+- Platform-specific classes for colors and effects
+- Responsive grid layout for buttons