hale-commenting-system 3.6.0 → 3.7.1

package/README.md

@@ -2,42 +2,29 @@
 
 A commenting system for PatternFly React applications that allows designers and developers to add comments directly on design pages, sync with GitHub Issues, and link Jira tickets.
 
-## 🚨 **CRITICAL: Read Before Uninstalling**
+![Default Widget](./screenshots/defaultWidget.png)
 
-**This package modifies your project files during setup.**
+## 🚨 Important: Proper Uninstall Required
 
-**BEFORE uninstalling, you MUST run:**
+**This package modifies your project files during setup.** Before uninstalling, you MUST run:
 ```bash
 npx hale-commenting-system remove
 npm uninstall hale-commenting-system
 ```
 
-**Failure to run `remove` first will break your app!** See the [Uninstalling](#uninstalling) section below.
-
-## Features
-
-- **React Component-Based Commenting** - Detects and attaches comments to React components, not just DOM elements
-  - Automatically identifies React component names, types, and props
-  - Shows component tree path (e.g., "App > Dashboard > Button")
-  - Displays component metadata including props in the comment panel
-- **Hover Preview** - See what will be selected before clicking with a visual preview
-  - Dashed blue border highlights the element you're about to select
-  - Component name label appears above the element
-  - Works on all elements including buttons, links, and interactive components
-- **Smart Pin Positioning** - Pins anchor precisely to elements using CSS selectors
-  - Pins appear at the top-left corner of selected components
-  - Automatically follows elements on scroll and resize
-  - Falls back to stored coordinates if element is deleted
-- **Component Highlighting** - Selected components are highlighted with a blue border (similar to Chrome DevTools)
-- **Show Pins Toggle** - View comment pins even when commenting is disabled
-- **Resizable Widget** - Adjust the commenting panel size to fit your workflow
-- **Missing Element Detection** - Pins fade and show [deleted] when target component is removed
-- **Thread Discussions** - Organize comments into threads with replies
-- **GitHub Integration** - Sync comments with GitHub Issues automatically
-- **Jira Integration** - Link Jira tickets to specific pages or sections
-- **PatternFly Design** - Built with PatternFly React components
-- **Responsive** - Works on desktop and mobile devices
-- **Easy Integration** - Automated setup script for seamless installation
+Failure to run `remove` first will break your app. See [Uninstalling](#uninstalling) for details.
+
+## Key Features
+
+- **React Component Detection** - Automatically identifies React components with names, types, props, and component tree paths
+- **Smart Pin Positioning** - Pins anchor to elements using CSS selectors and follow them on scroll/resize
+- **Hover Preview** - Visual preview with dashed border before creating a comment
+- **Component Highlighting** - Chrome DevTools-style blue border on selected components
+- **Resizable Widget** - Adjustable panel size (300-800px width)
+- **Thread Discussions** - Organized comment threads with replies
+- **GitHub Integration** - Automatic sync with GitHub Issues including component metadata
+- **Jira Integration** - Link tickets to specific pages or sections
+- **Missing Element Detection** - Pins fade and show [deleted] when target is removed
 
 ## Prerequisites
 
@@ -48,353 +35,171 @@ This package was developed for **PatternFly React Seed** projects, but can be us
 
 The automated integration script (`npx hale-commenting-system init`) works best with PatternFly React Seed or projects with a similar structure.
 
-## Installation and Setup
-
-> **⚠️ Note:** This package modifies your project files during setup. See the [Uninstalling](#uninstalling) section for proper removal instructions.
+## Quick Start
 
-1. **Install the package:**
-   ```bash
-   npm install hale-commenting-system
-   ```
+```bash
+# Install
+npm install hale-commenting-system
 
-2. **Run the integration script:**
-   ```bash
-   npx hale-commenting-system init
-   ```
+# Run setup
+npx hale-commenting-system init
 
-3. **Follow the interactive setup:**
-   - The script will guide you through project setup
-   - Optionally configure GitHub OAuth integration
-   - Optionally configure Jira integration
-   - Configuration files (`.env` and `.env.server`) will be created automatically
+# Start dev server
+npm run start:dev
+```
 
-4. **Start your dev server:**
-   ```bash
-   npm run start:dev
-   ```
+The interactive setup will guide you through configuring GitHub OAuth and Jira integration (both optional).
 
 ## Uninstalling
 
-**⚠️ IMPORTANT: Two-Step Process Required**
-
-You **MUST** run the removal script before uninstalling to avoid breaking your app:
-
-### Step 1: Remove Integration
+**Always remove integration before uninstalling:**
 
 ```bash
+# Step 1: Remove integration
 npx hale-commenting-system remove
-```
-
-This removes all integration code from your project files.
-
-### Step 2: Uninstall Package
 
-```bash
+# Step 2: Uninstall package
 npm uninstall hale-commenting-system
-```
-
-### Step 3: Restart Dev Server
 
-```bash
+# Step 3: Restart
 npm run start:dev
 ```
 
-### What If I Forgot and Already Uninstalled?
-
-If you uninstalled without running `remove` first and your app is now broken:
-
-1. **Reinstall the package:**
-   ```bash
-   npm install hale-commenting-system
-   ```
+### Already Uninstalled by Mistake?
 
-2. **Run the removal script:**
-   ```bash
-   npx hale-commenting-system remove
-   ```
+If your app is broken after uninstalling without running `remove`:
 
-3. **Uninstall again:**
-   ```bash
-   npm uninstall hale-commenting-system
-   ```
-
-4. **Restart your dev server:**
-   ```bash
-   npm run start:dev
-   ```
-
-### What the Removal Script Does
+```bash
+npm install hale-commenting-system
+npx hale-commenting-system remove
+npm uninstall hale-commenting-system
+```
 
-The removal script will automatically:
-- Remove imports from `src/app/index.tsx`
-- Remove imports from `src/app/AppLayout/AppLayout.tsx`
-- Notify you about webpack middleware (may require manual removal)
-- Keep `.env` and `.env.server` files (you can delete manually if needed)
+<details>
+<summary>What the removal script does</summary>
 
-### Manual Uninstall (If Needed)
+- Removes imports from `src/app/index.tsx`
+- Removes imports from `src/app/AppLayout/AppLayout.tsx`
+- Notifies about webpack middleware (may require manual removal)
+- Keeps `.env` and `.env.server` files
+</details>
 
-If you need to manually remove the integration:
+## Usage
 
-1. **In `src/app/index.tsx`**, remove:
-   ```typescript
-   import { CommentProvider, GitHubAuthProvider } from "hale-commenting-system";
-   ```
-   And remove the `<GitHubAuthProvider>` and `<CommentProvider>` wrappers.
+### Creating Comments
 
-2. **In `src/app/AppLayout/AppLayout.tsx`**, remove:
-   ```typescript
-   import { CommentPanel, CommentOverlay } from "hale-commenting-system";
-   ```
-   And remove the `<CommentPanel>` and `<CommentOverlay />` components.
+1. **Hover** over any component to see a preview with a dashed blue border and component label
+2. **Click** to attach a comment pin - the system detects React components automatically
+3. **View** component details in the panel including name, type, tree path, and props
 
-3. **In `webpack.dev.js`**, remove the middleware configuration added for GitHub OAuth and Jira API proxying.
+![Component Details](./screenshots/DesignDetails1.png)
 
-## Usage
+### Managing Comments
 
-After running the integration script, the commenting system will be available in your PatternFly React Seed application.
-
-### Adding Comments
-
-1. **Hover to preview** - Move your mouse over any component to see a preview of what will be selected
-   - A dashed blue border highlights the element
-   - A label shows the component or element name
-   - This helps you target the exact component you want to comment on
-
-2. **Click on any component** to attach a comment pin
-   - The system detects React components automatically
-   - Falls back to DOM element detection for non-React elements
-   - Pins anchor to specific elements using CSS selectors
-   - Pins appear at the top-left corner of the selected component
-
-3. **View component information** in the comment panel
-   - **React Components:** Shows component name, type (function/class/memo), component tree path, and props
-   - **DOM Elements:** Shows element description (e.g., "button.pf-c-button")
-   - Components marked as [deleted] if the element is removed from the page
-   - Expandable props section shows all component props in formatted JSON
-
-4. **Pin behavior:**
-   - **Element exists:** Pin positions at top-left corner and follows it on scroll/resize
-   - **Element deleted:** Pin fades to 40% opacity, uses fallback position, and shows [deleted] label
-   - **Selected pin:** Highlighted with blue border around the target component
-
-5. **Control visibility:**
-   - **Enable Comments:** Toggle to enable/disable creating new comments
-   - **Show pins:** Toggle to show/hide pins even when commenting is disabled
-   - Use both toggles to view existing comments without creating new ones
-
-6. **Resize the widget:**
-   - Drag the resize handle in the bottom-right corner of the commenting panel
-   - Adjust width (300-800px) and height (200px to viewport height)
-   - Size is maintained during your session
-
-7. **Navigate and manage comments:**
-   - **View all comments** in the "Comments" menu item in the sidebar
-   - **Reply to comments** to create discussion threads
-   - **Select pins** by clicking on them to view/edit comments
-   - **Close/reopen threads** just like GitHub Issues
-   - **Remove pins** to delete comment threads
+- **Toggle visibility** - Enable/disable comments or use "Show pins" to view without creating new ones
+- **Resize widget** - Drag the resize handle (300-800px width, 200px to viewport height)
+- **Pin behavior** - Pins follow elements on scroll/resize; fade to 40% opacity if element is deleted
+- **Thread discussions** - Reply to comments, close/reopen threads, view all in sidebar
+- **Remove pins** - Delete comment threads as needed
 
 ### How It Works
 
-The commenting system uses a **hybrid approach** combining React component detection and CSS selectors:
+The system uses a **hybrid approach**:
 
-#### React Component Detection (Primary)
+**React Component Detection** (Primary)
+- Detects components using React fiber nodes
+- Extracts name, type, props, and component tree path
+- Works with all React component types including HOCs
 
-1. **Component identification:**
-   - Detects React components using React fiber nodes
-   - Extracts component name, type (function/class/memo/forwardRef), and props
-   - Builds component tree path showing hierarchy (e.g., "App > Dashboard > Button")
-   - Works with all React component types including HOCs and wrapped components
+**CSS Selector Fallback**
+- Uses `data-testid`, `id`, or tag + class + aria attributes
+- Stores coordinates as fallback if element is deleted
 
-2. **Component metadata:**
-   - Component name (e.g., "Button", "Card", "CustomComponent")
-   - Component type (function, class, memo, forwardRef, etc.)
-   - Component props (sanitized for display, functions shown as [Function])
-   - Component tree path showing parent hierarchy
+### Integrations
 
-#### CSS Selector Fallback
+**GitHub** (Optional)
+- Comments sync as GitHub Issues with component metadata
+- Replies sync as issue comments
+- Status changes (open/closed) sync bidirectionally
 
-For non-React elements or when component detection isn't available:
-
-1. **Priority selection strategy:**
-   - `data-testid` or `data-id` attributes (most stable)
-   - `id` attribute
-   - Combination of tag + class + aria attributes
-   - Fallback to nth-child path
+**Jira** (Optional)
+- Link Jira tickets to specific pages or sections
+- View ticket details in the commenting panel
+- Track design work alongside development
 
-2. **Stored metadata for each pin:**
-   - CSS selector for the target element
-   - React component metadata (if available)
-   - Simplified element/component name for display
-   - Fallback coordinates (if element is deleted)
+![Jira Integration](./screenshots/jira.png)
 
-3. **Example:** Clicking a React Button component might show:
-   - **Component Name:** `Button`
-   - **Component Type:** `function`
-   - **Component Path:** `App > Dashboard > Button`
-   - **Props:** `{ variant: "primary", children: "Submit" }`
-   - **CSS Selector:** `button.pf-c-button[aria-label="Submit"]` (fallback)
+## Configuration
 
-### GitHub Integration (Optional)
+**`.env`** (client-side, safe to commit)
+- GitHub OAuth client ID, Jira base URL
 
-When configured, comments automatically sync with GitHub Issues:
-- Each comment thread becomes a GitHub Issue with component metadata
-- Issue body includes: React component name (if available), CSS selector, and fallback position
-- Replies sync as Issue comments with proper threading
-- Status changes (open/closed) sync between the app and GitHub
-- Component metadata is preserved in issue descriptions
+**`.env.server`** (server-side secrets, auto-added to `.gitignore`)
+- GitHub OAuth client secret, Jira API tokens
 
-### Jira Integration (Optional)
+## Requirements
 
-When configured, you can:
-- Link Jira tickets to specific pages or sections
-- View ticket details in the commenting panel
-- Track design work alongside development tickets
+- PatternFly React Seed project (or compatible PatternFly React app)
+- Node.js 18+ (for webpack middleware with native `fetch()`)
+- React 18+
 
-## Configuration
+## What Gets Modified
 
-The integration script creates two configuration files:
+The `init` script automatically updates:
+- `src/app/index.tsx` - Adds providers
+- `src/app/routes.tsx` - Adds Comments route
+- `src/app/AppLayout/AppLayout.tsx` - Adds panel and overlay components
+- `webpack.dev.js` - Adds OAuth/Jira proxy middleware
+- Creates `src/app/Comments/Comments.tsx` and config files
 
-### `.env`
-Contains client-side configuration (safe to commit):
-- GitHub OAuth client ID
-- Jira base URL
-- Other public configuration
+## Local Testing
 
-### `.env.server`
-Contains server-side secrets (should NOT be committed):
-- GitHub OAuth client secret
-- Jira API tokens
-- Other sensitive credentials
+<details>
+<summary>Click to expand testing instructions</summary>
 
-**Important:** The `.env.server` file is automatically added to `.gitignore` to prevent committing secrets.
+### Using npm link (Recommended)
 
-See the generated files for detailed setup instructions.
-
-## Requirements
+```bash
+# In package directory
+npm run build && npm link
 
-- **PatternFly React Seed** project (or compatible PatternFly React application)
-- **Node.js 18+** (required for webpack middleware with native `fetch()` support)
-- **React 18+**
-
-## What Gets Integrated
-
-The integration script automatically modifies your project:
-
-1. **`src/app/index.tsx`** - Adds `CommentProvider` and `GitHubAuthProvider`
-2. **`src/app/routes.tsx`** - Adds "Comments" route group with "View all" route
-3. **`src/app/AppLayout/AppLayout.tsx`** - Adds `CommentPanel` and `CommentOverlay` components
-4. **`webpack.dev.js`** - Adds middleware for GitHub OAuth and Jira API proxying
-5. **`src/app/Comments/Comments.tsx`** - Creates the Comments view component
-6. **`.env` and `.env.server`** - Creates configuration files
-
-## Testing Before Publishing
-
-To test this package locally before publishing to npm:
-
-### Method 1: Using npm link (Recommended)
-
-1. **In the package directory** (hale-npm-package):
-   ```bash
-   npm run build
-   npm link
-   ```
-
-2. **In your test application** (e.g., PatternFly React Seed):
-   ```bash
-   npm link hale-commenting-system
-   npx hale-commenting-system init
-   npm run start:dev
-   ```
-
-3. **Test the features:**
-   - Hover over components to see preview highlighting
-   - Click on various components (buttons, cards, inputs)
-   - Verify pins attach to components and appear at top-left corner
-   - Check that React component metadata is displayed correctly
-   - Scroll/resize and verify pins follow elements
-   - Add comments and replies
-   - Test "Show pins" toggle to view pins without enabling comments
-   - Resize the commenting widget
-   - Remove a component from the DOM and verify pin fades and shows [deleted]
-   - Reload page and verify pins reattach correctly
-
-4. **When done testing:**
-   ```bash
-   # In your test app
-   npx hale-commenting-system remove
-   npm unlink hale-commenting-system
-   npm install
-
-   # In the package directory
-   npm unlink
-   ```
-
-### Method 2: Using npm pack
-
-1. **In the package directory:**
-   ```bash
-   npm run build
-   npm pack
-   ```
-   This creates a `.tgz` file (e.g., `hale-commenting-system-3.6.0.tgz`)
-
-2. **In your test application:**
-   ```bash
-   npm install /path/to/hale-commenting-system-3.5.2.tgz
-   npx hale-commenting-system init
-   npm run start:dev
-   ```
-
-3. **Test and clean up as above**
-
-### Method 3: Using Local Path
-
-1. **In your test application:**
-   ```bash
-   npm install /path/to/hale-npm-package
-   npx hale-commenting-system init
-   npm run start:dev
-   ```
-
-### What to Test
-
-- ✅ **Hover preview** - Verify preview shows correct element and component name
-- ✅ **Pin creation** - Click on different component types (React and DOM elements)
-- ✅ **Pin positioning** - Verify pins appear at top-left corner of elements
-- ✅ **Component detection** - Verify React components show name, type, path, and props
-- ✅ **Component highlighting** - Verify selected components are highlighted with blue border
-- ✅ **Show pins toggle** - Verify pins are visible when toggle is on, even with comments disabled
-- ✅ **Widget resizing** - Verify widget can be resized and maintains size
-- ✅ **Dynamic tracking** - Scroll, resize, and verify pins follow elements
-- ✅ **Element deletion** - Remove components and verify fade + [deleted] label
-- ✅ **Page reload** - Verify pins reattach to correct elements
-- ✅ **Component display** - Check panel shows React component info or DOM element names
-- ✅ **GitHub sync** (if configured) - Verify issues include component metadata
-- ✅ **Comments & replies** - Test threaded discussions
-- ✅ **Close/reopen** - Test thread status changes
-- ✅ **Remove pin** - Verify removing a pin doesn't create a new one
+# In test app
+npm link hale-commenting-system
+npx hale-commenting-system init
+npm run start:dev
 
-## Development
+# Clean up when done
+npx hale-commenting-system remove
+npm unlink hale-commenting-system && npm install
+```
 
-### Running Locally
+### Using npm pack
 
 ```bash
-# Install dependencies
-npm install
+# In package directory
+npm run build && npm pack
 
-# Start development server
+# In test app
+npm install /path/to/hale-commenting-system-*.tgz
+npx hale-commenting-system init
 npm run start:dev
 ```
 
-### Building for Production
+### Test Checklist
+- Hover preview and pin creation
+- Component detection (name, type, path, props)
+- Pin positioning and dynamic tracking
+- Widget resizing and toggles
+- Element deletion handling
+- Comments, replies, and GitHub/Jira sync
+</details>
 
-```bash
-# Run production build
-npm run build
+## Development
 
-# Start production server
-npm run start
+```bash
+npm install          # Install dependencies
+npm run start:dev    # Start dev server
+npm run build        # Production build
 ```
 
 ## License
@@ -403,4 +208,4 @@ MIT
 
 ## Support
 
-For issues or questions, please open an issue on npm or contact the package maintainer.
+For issues or questions, please open an issue on GitHub or npm.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hale-commenting-system",
-  "version": "3.6.0",
+  "version": "3.7.1",
   "description": "A commenting system for PatternFly React applications that allows designers and developers to add comments directly on design pages, sync with GitHub Issues, and link Jira tickets.",
   "homepage": "https://www.npmjs.com/package/hale-commenting-system",
   "license": "MIT",

package/src/app/commenting-system/components/JiraTab.tsx

@@ -47,8 +47,17 @@ interface LegacyJiraRecord {
 
 type JiraStore = Record<string, JiraRecord>;
 
+// Jira Issue Cache
+type CachedJiraIssue = {
+  ticket: JiraTicket;
+  fetchedAt: number; // timestamp
+};
+type JiraIssueCache = Record<string, CachedJiraIssue>;
+
 const STORAGE_KEY = 'hale_commenting_jira_v1';
+const CACHE_STORAGE_KEY = 'hale_commenting_jira_cache_v1';
 const GH_JIRA_PATH = '.hale/jira.json';
+const CACHE_TTL_MS = 15 * 60 * 1000; // 15 minutes
 
 function migrateRecord(record: LegacyJiraRecord): JiraRecord {
   // If it's already in the new format, return as-is
@@ -100,6 +109,50 @@ function setStore(next: JiraStore) {
   window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
 }
 
+function getIssueCache(): JiraIssueCache {
+  if (typeof window === 'undefined') return {};
+  try {
+    const raw = window.localStorage.getItem(CACHE_STORAGE_KEY);
+    if (!raw) return {};
+    return JSON.parse(raw) as JiraIssueCache;
+  } catch {
+    return {};
+  }
+}
+
+function setIssueCache(cache: JiraIssueCache) {
+  if (typeof window === 'undefined') return;
+  window.localStorage.setItem(CACHE_STORAGE_KEY, JSON.stringify(cache));
+}
+
+function getCachedIssue(key: string): JiraTicket | null {
+  const cache = getIssueCache();
+  const cached = cache[key];
+  if (!cached) return null;
+
+  const now = Date.now();
+  const age = now - cached.fetchedAt;
+
+  // Return cached data if it's still fresh
+  if (age < CACHE_TTL_MS) {
+    return cached.ticket;
+  }
+
+  // Expired - remove it
+  delete cache[key];
+  setIssueCache(cache);
+  return null;
+}
+
+function setCachedIssue(key: string, ticket: JiraTicket) {
+  const cache = getIssueCache();
+  cache[key] = {
+    ticket,
+    fetchedAt: Date.now(),
+  };
+  setIssueCache(cache);
+}
+
 function normalizePathname(pathname: string): string {
   if (!pathname) return '/';
   const cleaned = pathname.split('?')[0].split('#')[0];
@@ -339,7 +392,7 @@ export const JiraTab: React.FunctionComponent = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Fetch Jira issue details for all keys.
+  // Fetch Jira issue details for all keys (with caching).
   React.useEffect(() => {
     const keys = record?.jiraKeys || [];
     if (keys.length === 0) {
@@ -354,24 +407,50 @@ export const JiraTab: React.FunctionComponent = () => {
       const results: Record<string, JiraTicket> = {};
       const errors: Record<string, string> = {};
 
-      await Promise.all(
-        keys.map(async (key) => {
-          try {
-            const resp = await fetch(`/api/jira-issue?key=${encodeURIComponent(key)}`);
-            const payload = await resp.json().catch(() => ({}));
-            if (!resp.ok) {
-              const raw = String(payload?.message || `Failed to fetch Jira issue (${resp.status})`);
-              const sanitized = raw.trim().startsWith('<') ? 'Unauthorized or non-JSON response from Jira.' : raw;
-              const hint = payload?.hint ? ` ${String(payload.hint)}` : '';
-              errors[key] = `${sanitized}${hint}`;
-              return;
+      // Check cache first
+      const keysToFetch: string[] = [];
+      for (const key of keys) {
+        const cached = getCachedIssue(key);
+        if (cached) {
+          results[key] = cached;
+        } else {
+          keysToFetch.push(key);
+        }
+      }
+
+      // Fetch uncached issues
+      if (keysToFetch.length > 0) {
+        await Promise.all(
+          keysToFetch.map(async (key) => {
+            try {
+              const resp = await fetch(`/api/jira-issue?key=${encodeURIComponent(key)}`);
+              const payload = await resp.json().catch(() => ({}));
+
+              if (!resp.ok) {
+                // Handle rate limiting specially
+                if (resp.status === 429) {
+                  errors[key] = 'Rate limit exceeded. Please wait a few minutes and refresh the page.';
+                  return;
+                }
+
+                const raw = String(payload?.message || `Failed to fetch Jira issue (${resp.status})`);
+                const sanitized = raw.trim().startsWith('<') ? 'Unauthorized or non-JSON response from Jira.' : raw;
+                const hint = payload?.hint ? ` ${String(payload.hint)}` : '';
+                errors[key] = `${sanitized}${hint}`;
+                return;
+              }
+
+              const ticket = payload as JiraTicket;
+              results[key] = ticket;
+
+              // Cache the successful result
+              setCachedIssue(key, ticket);
+            } catch (e: any) {
+              errors[key] = e?.message || 'Failed to fetch Jira issue';
             }
-            results[key] = payload as JiraTicket;
-          } catch (e: any) {
-            errors[key] = e?.message || 'Failed to fetch Jira issue';
-          }
-        })
-      );
+          })
+        );
+      }
 
       setIssues(results);
       setIssueErrors(errors);
@@ -735,7 +814,14 @@ export const JiraTab: React.FunctionComponent = () => {
 
                   {/* Error state */}
                   {error && !isFetchingIssues && (
-                    <div style={{ fontSize: '0.875rem', color: 'var(--pf-t--global--danger--color--100)' }}>{error}</div>
+                    <div style={{ display: 'grid', gap: '0.5rem' }}>
+                      <div style={{ fontSize: '0.875rem', color: 'var(--pf-t--global--danger--color--100)' }}>{error}</div>
+                      {error.includes('Rate limit') && (
+                        <div style={{ fontSize: '0.75rem', color: 'var(--pf-t--global--text--color--subtle)' }}>
+                          Tip: Jira data is cached for 15 minutes to reduce API calls. Refreshing the page will retry.
+                        </div>
+                      )}
+                    </div>
                   )}
 
                   {/* Issue details */}