Task 2 3 capture

.claude/settings.local.json

@@ -0,0 +1,53 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn init:*)",
+      "Bash(yarn add:*)",
+      "Bash(mkdir:*)",
+      "Bash(yarn build-plugin:*)",
+      "Bash(rm:*)",
+      "Bash(npx husky:*)",
+      "Bash(ls:*)",
+      "Bash(chmod:*)",
+      "Bash(yarn test)",
+      "Bash(yarn lint)",
+      "Bash(yarn format)",
+      "Bash(yarn lint:*)",
+      "Bash(npm test)",
+      "Bash(npm test:*)",
+      "Bash(npm run build:*)",
+      "Bash(yarn build)",
+      "Bash(find:*)",
+      "Bash(yarn dev)",
+      "Bash(npm run test:integration:*)",
+      "Bash(npx:*)",
+      "Bash(yarn test:*)",
+      "Bash(timeout 30s yarn test:integration --grep \"should display BackChannel icon after initialization\")",
+      "Bash(pkill:*)",
+      "Bash(mv:*)",
+      "Bash(python3:*)",
+      "Bash(grep:*)"
+    ],
+    "deny": [],
+    "hooks": [
+      {
+        "matcher": "Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "yarn format"
+          }
+        ]
+      },
+      {
+        "matcher": "Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "if [[ \"$CLAUDE_FILE_PATHS\" =~ \\. (ts|tsx)$ ]]; then npx tsc --noEmit --skipLibCheck \"$CLAUDE_FILE_PATHS\" || echo '⚠️ TypeScript errors detected - please review'; fi"
+          }
+        ]
+      }
+    ]
+  }
+}

.gitignore

@@ -1,2 +1,5 @@
 node_modules/
 coverage/
+dist/
+test-results/
+playwright-report/

.husky/pre-commit

@@ -0,0 +1,2 @@
+yarn lint
+yarn test

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

CLAUDE.md

@@ -10,7 +10,7 @@ The project uses the **Agentic Project Management (APM)** framework, which coord
 
 ## Key Technologies & Build System
 
-- **Language**: TypeScript compiled to ES6 JavaScript
+- **Language**: TypeScript compiled to ES6 JavaScript. Note: Typescript code should not use `any` type.
 - **Build System**: Vite (for development) and Vite bundler (for plugin output)
 - **Package Manager**: yarn
 - **Testing**: Vitest for unit tests, Playwright for integration/E2E tests
@@ -108,6 +108,11 @@ The plugin exports feedback in a structured CSV format with:
 - **Namespacing**: Storage keys based on document/manual configuration
 - **CRUD Operations**: Full create, read, update, delete operations for comments and feedback packages
 
+### Database Creation Policy
+- **Requirement**: IndexedDB databases and localStorage data should not be created until there is an active feedback package session
+- This prevents unnecessary storage operations on pages without feedback functionality
+- Database creation should only occur when a feedback package is created or when existing a seed database is detected
+
 ## Development Workflow
 
 - Git commits should be made after completion of each task in the Implementation Plan

Implementation_Plan.md

@@ -50,11 +50,11 @@ Based on the project's complexity and multi-phase nature, a **directory-based Me
 - **Action Steps**:
   1. Implement IndexedDB initialization and connection management
   2. Create CRUD operations for feedback packages and comments
-  3. Implement localStorage caching for performance
-  4. Create utility that seeds JSON data into IndexedDB for testing, according to `docs/project/pre-populate-database.md`
-  5. Add error handling and fallbacks
-  6. Constructor should take optional fakeIndexedDb parameter.  In unit testing a fake indexedDb is provided, removing need to mock browser implementation. When provided, the fakeIndexedDb is used instead of browser IndexedDb
-  - **Guiding Notes**: Use IndexedDB for primary storage, localStorage for caching, implement version checking
+  3. Implement localStorage caching of database id and document URL root, to quickly determine if a newly loaded page already has a feedback page.
+  4. Create utility that seeds JSON data into IndexedDB for later UI testing, according to `docs/project/pre-populate-database.md`
+  5. Constructor should take optional fakeIndexedDb parameter.  In unit testing a fake indexedDb is provided, removing need to mock browser implementation. When provided, the fakeIndexedDb is used instead of browser IndexedDb
+  6. Add error handling and fallbacks. Use the fake indexedDb for unit testing of the storage service.  Use console logging of database access outcomes to verify seeding of browser database in playwright e2e testing.
+  - **Guiding Notes**: Use IndexedDB for primary storage, localStorage for caching of database id and document URL root, implement version checking
 
 ### Phase 2: Capture Mode - Core Functionality (Agent: UI Developer)
 
@@ -89,10 +89,10 @@ Based on the project's complexity and multi-phase nature, a **directory-based Me
 - **Assigned to**: UI Developer
 - **Action Steps**:
   1. Create sidebar UI with toggle functionality
-  2. Implement "Capture Feedback" and "Export" buttons
-  3. On "Capture Feedback", sidebar hidden, allowing reviewer to select element of content. Once clicked, sidebar returns.  A `Cancel selection` button is shown to top-right.
-  3. Add comment list display in sidebar
-  4. Implement sidebar state persistence
+  2. Implement "Capture Feedback" and "Export" buttons in toolbar at top of panel.
+  3. On "Capture Feedback", sidebar hidden, allowing reviewer to select element of content. Once clicked, write element details to console, and sidebar returns.  A `Cancel selection` button is shown to top-right.
+  3. Add list of comments in sidebar
+  4. Implement sidebar state persistence (visibility)
   5. Update e2e tests to verify sidebar functionality, and that seeded database comments are displayed
   - **Guiding Notes**: Sidebar should be collapsible, use CSS transitions for smooth animations, persist state in localStorage
 
@@ -114,7 +114,8 @@ Based on the project's complexity and multi-phase nature, a **directory-based Me
   2. Add validation and submission handling
   3. Connect to storage service for saving comments
   4. Implement comment badges on elements
-  - **Guiding Notes**: Form should be compact but usable, provide clear feedback on submission, badges should be visible but not intrusive
+  5. Add subtle background shading to elements with comments
+  - **Guiding Notes**: Form should be compact but usable, provide clear feedback on submission, badges should be visible but not intrusive, background shading should be subtle and not interfere with content readability
 
 ### Phase 3: Persistence & Navigation (Agent: Backend Developer)
 
@@ -126,7 +127,7 @@ Based on the project's complexity and multi-phase nature, a **directory-based Me
 - **Action Steps**:
   1. Enhance storage service to handle page reload scenarios
   2. Implement loading of existing comments on page load
-  3. Add comment badge restoration
+  3. Add comment badge and background shading restoration
   4. Optimize IndexedDB operations for performance
   - **Guiding Notes**: Use efficient querying patterns, implement caching where appropriate, handle edge cases like deleted elements
 

Memory/Phase_1_Setup_Infrastructure/Task_1.1_Project_Scaffolding/Memory_Bank.md

@@ -0,0 +1,61 @@
+# Memory Bank - Phase 1: Project Setup & Infrastructure
+
+## Task 1.1: Project Scaffolding
+
+---
+**Agent:** Setup Specialist
+**Task Reference:** Phase 1 / Task 1.1 / Project Scaffolding
+
+**Summary:**
+Successfully completed the complete project scaffolding for the BackChannel plugin, establishing the foundational infrastructure including TypeScript/Vite build system, testing framework, linting configuration, and initial project structure.
+
+**Details:**
+- Initialized yarn project with proper package.json configuration for BackChannel plugin
+- Configured TypeScript with ES2015 target and strict mode for ES5-compatible output
+- Set up Vite build system with IIFE format for single-file plugin output (dist/backchannel.js)
+- Implemented ESLint with TypeScript support and Prettier integration using flat config format
+- Created comprehensive project directory structure (src/{components,utils,services,types}, tests/{unit,e2e})
+- Configured Vitest for unit testing with jsdom environment and Playwright for integration testing
+- Created root-level index.html with welcome content and plugin initialization demo
+- Implemented initial plugin entry point (src/index.ts) with global window.BackChannel API
+- Set up husky pre-commit hooks to run linting and tests before commits
+- Created comprehensive unit and integration tests verifying plugin initialization and API functionality
+
+**Output/Result:**
+```typescript
+// Core plugin structure in src/index.ts
+class BackChannelPlugin {
+  private config: PluginConfig;
+  private state: FeedbackState;
+
+  init(config: PluginConfig = {}): void {
+    this.config = {
+      requireInitials: false,
+      storageKey: 'backchannel-feedback',
+      targetSelector: '.reviewable',
+      allowExport: true,
+      ...config,
+    };
+    this.setupEventListeners();
+  }
+}
+
+// Global API exposure
+window.BackChannel = {
+  init: (config?: PluginConfig) => backChannelInstance.init(config),
+  getState: () => backChannelInstance.getState(),
+  getConfig: () => backChannelInstance.getConfig(),
+};
+```
+
+Build output: dist/backchannel.js (1.51 kB, unminified with source maps)
+Test results: All 5 unit tests passing, including plugin initialization and configuration tests
+Pre-commit hooks: Successfully configured to run lint and test commands
+
+**Status:** Completed
+
+**Issues/Blockers:**
+None
+
+**Next Steps:**
+Project foundation is ready for Phase 2 implementation. The build system successfully generates the single-file plugin output as required, and all tests are passing. Ready to proceed with Task 1.2: Core Types & Interfaces implementation.

Memory/Phase_1_Setup_Infrastructure/Task_1.2_Core_Types_Interfaces/Memory_Bank.md

@@ -0,0 +1,90 @@
+# Memory Bank - Phase 1: Project Setup & Infrastructure
+
+## Task 1.2: Core Types & Interfaces
+
+---
+**Agent:** Setup Specialist
+**Task Reference:** Phase 1 / Task 1.2 / Core Types & Interfaces
+
+**Summary:**
+Successfully re-implemented TypeScript interfaces and types for the BackChannel application with minimal complexity, focusing strictly on the software requirements and persistence schema defined in docs/project/persistence.md to avoid over-engineering.
+
+**Details:**
+- Analyzed software requirements and persistence schema to identify minimum necessary types
+- Created CaptureComment interface matching persistence schema: id, text, pageUrl, timestamp, location, optional snippet, optional author
+- Implemented ReviewComment interface extending CaptureComment with review-specific fields: state, editorNotes, reviewedBy, reviewedAt
+- Added CommentState enum for review workflow: OPEN, ACCEPTED, REJECTED, RESOLVED
+- Defined DocumentMetadata interface for IndexedDB storage: documentTitle, documentRootUrl, optional documentId, optional reviewer
+- Simplified PluginConfig interface with only necessary options: requireInitials, storageKey, targetSelector, allowExport, debugMode
+- Created CSVExportData interface for export functionality
+- Implemented StorageInterface aligned with persistence requirements
+- Added minimal type guards (isCaptureComment, isReviewComment) for runtime validation
+- Created utility types: NewComment, CommentUpdate for development convenience
+- Removed unnecessary complexity: themes, events, complex metadata, priority levels, extensive configuration options
+- Updated plugin code to use simplified types with URL-based storage key generation
+- Enhanced plugin initialization with streamlined configuration
+
+**Output/Result:**
+```typescript
+// Minimal CaptureComment interface matching persistence schema
+export interface CaptureComment {
+  id: string;
+  text: string;
+  pageUrl: string;
+  timestamp: string;
+  location: string;
+  snippet?: string;
+  author?: string;
+}
+
+// ReviewComment extends CaptureComment for review mode
+export interface ReviewComment extends CaptureComment {
+  state: CommentState;
+  editorNotes?: string;
+  reviewedBy?: string;
+  reviewedAt?: string;
+}
+
+// Comment states for review workflow
+export enum CommentState {
+  OPEN = 'open',
+  ACCEPTED = 'accepted',
+  REJECTED = 'rejected',
+  RESOLVED = 'resolved',
+}
+
+// Simplified PluginConfig with only necessary options
+export interface PluginConfig {
+  requireInitials?: boolean;
+  storageKey?: string;
+  targetSelector?: string;
+  allowExport?: boolean;
+  debugMode?: boolean;
+}
+
+// URL-based storage key generation
+private generateStorageKey(): string {
+  if (typeof window !== 'undefined' && window.location) {
+    const url = new URL(window.location.href);
+    return `backchannel-${url.hostname}${url.pathname}`;
+  }
+  return 'backchannel-feedback';
+}
+```
+
+Total interfaces created: 5 (CaptureComment, ReviewComment, DocumentMetadata, PluginConfig, CSVExportData, StorageInterface)
+Total enums created: 2 (FeedbackState, CommentState)
+Total utility types created: 2 (NewComment, CommentUpdate)
+Total type guards created: 2 (isCaptureComment, isReviewComment)
+
+Build output: Updated dist/backchannel.js (2.39 kB, similar size with simplified types)
+Test results: All 5 unit tests passing with enhanced type checking
+Linting: All code passes ESLint with no warnings - type guards use `unknown` type instead of `any` for proper type safety
+
+**Status:** Completed
+
+**Issues/Blockers:**
+None
+
+**Next Steps:**
+Type definitions are now appropriately scoped and ready for Task 1.3: Storage Service Implementation. The simplified interfaces provide strong type safety for both capture and review modes while maintaining minimal complexity. The StorageInterface directly supports the IndexedDB persistence requirements and CSV export/import functionality as specified in the technical documentation.