create-ekka-desktop-app 0.4.6 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ekka-desktop-app",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Create an EKKA desktop app with built-in demo backend. No setup required.",
   "type": "module",
   "bin": {

package/template/src/demo/components/InfoTooltip.tsx

@@ -45,8 +45,9 @@ export function InfoTooltip({ text, darkMode = false }: InfoTooltipProps): React
       fontSize: '12px',
       lineHeight: 1.4,
       borderRadius: '6px',
-      whiteSpace: 'nowrap',
-      maxWidth: '280px',
+      whiteSpace: 'normal',
+      maxWidth: '320px',
+      width: 'max-content',
       zIndex: 1000,
       opacity: isVisible ? 1 : 0,
       visibility: isVisible ? 'visible' : 'hidden',

package/template/src/demo/pages/AuditLogPage.tsx

@@ -7,7 +7,7 @@ import { type CSSProperties, type ReactElement } from 'react';
 import { clearAuditEvents, type AuditEvent } from '../../ekka/audit';
 import { formatLocalTime, formatRelativeTime } from '../../ekka/utils';
 import { useAuditEvents } from '../hooks/useAuditEvents';
-import { EmptyState } from '../components/EmptyState';
+import { EmptyState, InfoTooltip } from '../components';
 import { LearnMore } from '../components/LearnMore';
 
 interface AuditLogPageProps {
@@ -193,7 +193,7 @@ export function AuditLogPage({ darkMode }: AuditLogPageProps): ReactElement {
     <div>
       <header style={styles.header}>
         <div style={styles.headerText}>
-          <h1 style={styles.title}>Audit Log</h1>
+          <h1 style={styles.title}>Audit Log <InfoTooltip text="Append-only log of security-relevant events on this node. Every grant check, secret access, auth event, and runner action is recorded with actor, decision, and correlation ID." darkMode={darkMode} /></h1>
           <p style={styles.description}>
             Track system events and operations for debugging and compliance.
           </p>

package/template/src/demo/pages/PathPermissionsPage.tsx

@@ -8,6 +8,7 @@
 import { useState, useEffect, useCallback, type CSSProperties, type ReactElement } from 'react';
 import { ekka, advanced, type PathInfo, type PathType, type PathAccess, type PathGrantResult } from '../../ekka';
 import { InfoPopover } from '../components/InfoPopover';
+import { InfoTooltip } from '../components';
 
 interface PathPermissionsPageProps {
   darkMode: boolean;
@@ -516,7 +517,7 @@ export function PathPermissionsPage({ darkMode }: PathPermissionsPageProps): Rea
   return (
     <div style={styles.container}>
       <header style={styles.header}>
-        <h1 style={styles.title}>Path Permissions</h1>
+        <h1 style={styles.title}>Path Permissions <InfoTooltip text="Every folder your app accesses requires an explicit, engine-signed grant. Grants follow least-privilege: scoped to one path, one user, with an expiration. No grant = no access." darkMode={darkMode} /></h1>
         <p style={styles.subtitle}>
           EKKA requires explicit permission to access any path outside your home directory.
           When you approve, EKKA requests an engine-signed grant that unlocks access.
@@ -528,7 +529,7 @@ export function PathPermissionsPage({ darkMode }: PathPermissionsPageProps): Rea
       {/* Section A: Path Selector */}
       <div style={styles.section}>
         <div style={styles.sectionHeader}>
-          <span style={styles.sectionTitle}>Select Path</span>
+          <span style={styles.sectionTitle}>Select Path <InfoTooltip text="Choose a folder to check whether a valid grant exists. The check is local — no data leaves your machine." darkMode={darkMode} /></span>
           <div style={styles.sectionLine} />
         </div>
         <div style={styles.card}>
@@ -578,7 +579,7 @@ export function PathPermissionsPage({ darkMode }: PathPermissionsPageProps): Rea
       {selectedPath && permissionStatus && (
         <div style={styles.section}>
           <div style={styles.sectionHeader}>
-            <span style={styles.sectionTitle}>Permission Status</span>
+            <span style={styles.sectionTitle}>Permission Status <InfoTooltip text="Shows whether the selected path has a valid, cryptographically signed grant from the engine." darkMode={darkMode} /></span>
             <div style={styles.sectionLine} />
           </div>
           <div
@@ -743,7 +744,7 @@ export function PathPermissionsPage({ darkMode }: PathPermissionsPageProps): Rea
       {/* Section E: Current Permissions Table */}
       <div style={styles.section}>
         <div style={styles.sectionHeader}>
-          <span style={styles.sectionTitle}>Current Permissions</span>
+          <span style={styles.sectionTitle}>Current Permissions <InfoTooltip text="All active grants for this node. Each grant is Ed25519-signed by the engine, scoped to a specific path, user, and tenant, with a fixed expiration." darkMode={darkMode} /></span>
           <div style={styles.sectionLine} />
         </div>
         <div style={{ ...styles.card, padding: 0, overflowX: 'auto' }}>

package/template/src/demo/pages/RunnerPage.tsx

@@ -13,6 +13,7 @@
 
 import { useState, useEffect, useRef, type CSSProperties, type ReactElement } from 'react';
 import { advanced, type RunnerTaskStats } from '../../ekka';
+import { InfoTooltip } from '../components';
 
 interface RunnerPageProps {
   darkMode: boolean;
@@ -247,7 +248,7 @@ export function RunnerPage({ darkMode }: RunnerPageProps): ReactElement {
   return (
     <div style={styles.container}>
       <div style={styles.header}>
-        <h1 style={styles.title}>Runner</h1>
+        <h1 style={styles.title}>Runner <InfoTooltip text="The runner executes tasks assigned to this node. It polls the engine for work, sends heartbeats, and reports results. Tasks run in a sandboxed context with only the permissions granted to this node." darkMode={darkMode} /></h1>
         <div style={styles.subtitle}>
           <span>Task queue observability</span>
           <span style={styles.refreshBadge}>Auto-refresh: 2s</span>
@@ -311,7 +312,7 @@ export function RunnerPage({ darkMode }: RunnerPageProps): ReactElement {
           <div style={styles.grid}>
             {/* Active Runners */}
             <div style={styles.card}>
-              <div style={styles.cardTitle}>Active Runners</div>
+              <div style={styles.cardTitle}>Active Runners <InfoTooltip text="Number of runner loops currently polling for and executing tasks on this node." darkMode={darkMode} /></div>
               {stats.active_runners.length === 0 ? (
                 <div style={styles.noRunners}>
                   No active runners detected (last 10m)
@@ -334,7 +335,7 @@ export function RunnerPage({ darkMode }: RunnerPageProps): ReactElement {
 
             {/* Queue Counts */}
             <div style={styles.card}>
-              <div style={styles.cardTitle}>Queue Counts</div>
+              <div style={styles.cardTitle}>Queue Counts <InfoTooltip text="Pending: waiting for a runner. Claimed: in progress. Completed/Failed: finished tasks in the last 5 minutes." darkMode={darkMode} /></div>
               <div style={styles.countGrid}>
                 <div style={styles.countItem}>
                   <div style={{ ...styles.countValue, color: stats.counts.pending > 0 ? colors.yellow : colors.textMuted }}>
@@ -395,7 +396,7 @@ export function RunnerPage({ darkMode }: RunnerPageProps): ReactElement {
 
           {/* Recent Tasks */}
           <div style={styles.card}>
-            <div style={styles.cardTitle}>Recent Tasks (25)</div>
+            <div style={styles.cardTitle}>Recent Tasks (25) <InfoTooltip text="Last 25 tasks processed by this node, newest first. Each shows type, status, and timing." darkMode={darkMode} /></div>
             {stats.recent.length === 0 ? (
               <div style={{ color: colors.textMuted, fontSize: '13px' }}>No tasks found</div>
             ) : (

package/template/src/demo/pages/VaultPage.tsx

@@ -9,7 +9,7 @@
 
 import { useState, useEffect, useMemo, useCallback, useRef, type CSSProperties, type ReactElement } from 'react';
 import { ekka, type SecretMeta, type SecretType, type BundleMeta, type FileEntry, type AuditEvent } from '../../ekka';
-import { EmptyState } from '../components/EmptyState';
+import { EmptyState, InfoTooltip } from '../components';
 import { Banner } from '../components/Banner';
 
 // =============================================================================
@@ -213,7 +213,7 @@ export function VaultPage({ darkMode }: VaultPageProps): ReactElement {
   return (
     <div style={styles.container}>
       <header style={styles.header}>
-        <h1 style={styles.title}>Vault</h1>
+        <h1 style={styles.title}>Vault <InfoTooltip text="Encrypted-at-rest secret storage, local to this node. Secrets never leave the device unencrypted. Organize with bundles and folders; every access is audited." darkMode={darkMode} /></h1>
         <p style={styles.subtitle}>Securely manage secrets, organize them into bundles and folders, and track all access.</p>
       </header>