@gabrywu/knowledge-bank 0.1.2-alpha.227 → 0.1.2-alpha.252

package/dist/web/public/css/style.css

@@ -448,6 +448,29 @@ table tr.selected {
   color: #475569;
 }
 
+.scope-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.scope-personal {
+  background-color: #e0f2fe;
+  color: #0277bd;
+}
+.scope-project {
+  background-color: #f3e5f5;
+  color: #7b1fa2;
+}
+.scope-organization {
+  background-color: #fff3e0;
+  color: #f57c00;
+}
+
 .badge {
   display: inline-flex;
   align-items: center;
@@ -856,6 +879,36 @@ table td.timestamp-column {
   transition-delay: 0s;
 }
 
+/* JSON tooltip styles */
+.json-tooltip {
+  min-width: 400px;
+  max-width: 600px;
+}
+
+.json-preview {
+  white-space: pre-wrap;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: #f8f9fa;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+}
+
+.message-json-column {
+  font-size: 0.875rem;
+  max-width: 300px;
+}
+
+.data-json-column {
+  font-size: 0.875rem;
+  max-width: 250px;
+}
+
 table td {
   padding: 14px 16px;
   border-bottom: 1px solid var(--border-color);

package/dist/web/public/js/main.js

@@ -23,8 +23,8 @@ function formatTimestamp(timestamp) {
  * Common table columns for consistent UI
  */
 const TABLE_COLUMNS = {
-  session: ['id', 'session_id', 'cwd', 'git_branch', 'created_at'],
-  knowledge_item: ['id', 'title', 'summary', 'knowledge_type', 'status', 'created_at'],
+  session: ['id', 'session_id', 'first_user_prompt', 'cwd', 'git_branch', 'created_at'],
+  knowledge_item: ['id', 'title', 'summary', 'knowledge_type', 'scope', 'created_at'],
   session_event: ['id', 'session_id', 'name', 'created_at'],
 };
 

package/dist/web/views/index.ejs

@@ -4,7 +4,8 @@
     <div class="table-grid" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))">
       <% const sessionCount = (tableInfo.find(t => t.name === 'session') || {}).count || 0; const
       knowledgeCount = (tableInfo.find(t => t.name === 'knowledge_item') || {}).count || 0; const
-      eventCount = (tableInfo.find(t => t.name === 'session_event') || {}).count || 0; %>
+      eventCount = (tableInfo.find(t => t.name === 'session_event') || {}).count || 0; const
+      sessionDetailCount = (tableInfo.find(t => t.name === 'session_detail') || {}).count || 0; %>
       <div class="repository-card">
         <div
           class="repo-card-body text-center"
@@ -57,6 +58,24 @@
           <a href="/tables/session_event" class="btn-page" style="margin-top: 16px">View All</a>
         </div>
       </div>
+      <div class="repository-card">
+        <div
+          class="repo-card-body text-center"
+          style="
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 32px;
+          "
+        >
+          <span class="stat-value" style="font-size: 3rem; color: var(--info-color)"
+            ><%= sessionDetailCount %></span
+          >
+          <span class="stat-label">Session Details</span>
+          <a href="/tables/session_detail" class="btn-page" style="margin-top: 16px">View All</a>
+        </div>
+      </div>
     </div>
   </section>
 </div>

package/dist/web/views/layout.ejs

@@ -45,7 +45,7 @@
           </li>
           <% const tableLinks = [ { name:
           'knowledge_item', label: 'Knowledge', icon: '📚' }, { name: 'session', label: 'Sessions',
-          icon: '💬' }, { name: 'session_event', label: 'Session Events', icon: '🔗' } ];
+          icon: '💬' }, { name: 'session_event', label: 'Session Events', icon: '🔗' }, { name: 'session_detail', label: 'Session Details', icon: '📋' } ];
           tableLinks.forEach(link => { %>
           <li>
             <a

package/dist/web/views/partials/cell.ejs

@@ -1,11 +1,11 @@
-<% const isTimestamp = col === 'created_at' || col.endsWith('_at'); const isStatus = col ===
-'status'; const isType = col === 'knowledge_type'; const isID = col === 'id'; const isSessionID =
+<% const isTimestamp = col === 'created_at' || col.endsWith('_at'); const isScope = col ===
+'scope'; const isType = col === 'knowledge_type'; const isID = col === 'id'; const isSessionID =
 col === 'session_id'; const isBranch = col === 'git_branch'; const isCwd = col ===
-'cwd'; const isTitle = col === 'title'; const isSummary = col === 'summary'; const
-isEventName = col === 'name' && tableName === 'session_event'; %> <% if (isID) { %>
+'cwd'; const isFirstUserPrompt = col === 'first_user_prompt'; const isTitle = col === 'title'; const isSummary = col === 'summary'; const
+isEventName = col === 'name' && tableName === 'session_event'; const isMessage = col === 'message' && tableName === 'session_detail'; const isData = col === 'data' && tableName === 'session_detail'; %> <% if (isID) { %>
 <td class="text-mono font-bold text-xs id-column" style="color: #64748b">#<%= val %></td>
-<% } else if (isStatus) { %>
-<td><span class="status-badge status-<%= val.toLowerCase() %>"><%= val.toLowerCase() %></span></td>
+<% } else if (isScope) { %>
+<td><span class="scope-badge scope-<%= val.toLowerCase() %>"><%= val.toLowerCase() %></span></td>
 <% } else if (isType) { %>
 <td><span class="badge"><%= val %></span></td>
 <% } else if (isTimestamp) { %>
@@ -29,8 +29,76 @@ isEventName = col === 'name' && tableName === 'session_event'; %> <% if (isID) {
   </span>
   <% } else { %> <%= val || '-' %> <% } %>
 </td>
+<% } else if (isFirstUserPrompt) { %>
+<td class="text-xs first-user-prompt-column">
+  <% if (val && val.length > 60) { %>
+  <span class="has-tooltip">
+    <%= val.substring(0, 60) %>...
+    <div class="tooltip-box" onclick="event.stopPropagation()"><%= val %></div>
+  </span>
+  <% } else { %> <%= val || '-' %> <% } %>
+</td>
 <% } else if (isEventName) { %>
 <td class="event-name-column"><%= val || '-' %></td>
+<% } else if (isMessage) { %>
+<td class="message-json-column">
+  <% if (val) { %>
+  <% let messageContent = ''; %>
+  <% try { %>
+    <% const messageObj = typeof val === 'string' ? JSON.parse(val) : val; %>
+    <% if (messageObj && messageObj.role && messageObj.content) { %>
+      <% messageContent = `${messageObj.role}: ${messageObj.content}`; %>
+    <% } else { %>
+      <% messageContent = JSON.stringify(messageObj, null, 2); %>
+    <% } %>
+  <% } catch(e) { %>
+    <% messageContent = val; %>
+  <% } %>
+  <% if (messageContent.length > 100) { %>
+  <span class="has-tooltip">
+    <%= messageContent.substring(0, 100) %>...
+    <div class="tooltip-box json-tooltip" onclick="event.stopPropagation()">
+      <pre class="json-preview"><%= messageContent %></pre>
+    </div>
+  </span>
+  <% } else { %>
+    <%= messageContent %>
+  <% } %>
+  <% } else { %>
+    -
+  <% } %>
+</td>
+<% } else if (isData) { %>
+<td class="data-json-column">
+  <% if (val) { %>
+  <% let dataContent = ''; %>
+  <% try { %>
+    <% const dataObj = typeof val === 'string' ? JSON.parse(val) : val; %>
+    <% if (dataObj && dataObj.type) { %>
+      <% dataContent = `type: ${dataObj.type}`; %>
+      <% if (dataObj.hookEvent) { %>
+        <% dataContent += `, event: ${dataObj.hookEvent}`; %>
+      <% } %>
+    <% } else { %>
+      <% dataContent = JSON.stringify(dataObj, null, 2); %>
+    <% } %>
+  <% } catch(e) { %>
+    <% dataContent = val; %>
+  <% } %>
+  <% if (dataContent.length > 80) { %>
+  <span class="has-tooltip">
+    <%= dataContent.substring(0, 80) %>...
+    <div class="tooltip-box json-tooltip" onclick="event.stopPropagation()">
+      <pre class="json-preview"><%= dataContent %></pre>
+    </div>
+  </span>
+  <% } else { %>
+    <%= dataContent %>
+  <% } %>
+  <% } else { %>
+    -
+  <% } %>
+</td>
 <% } else { %>
 <td
   class="<%= '' %> <%= (isSummary || (typeof val === 'string' && val.length > 30)) ? 'text-xs' : '' %>"

package/dist/web/views/partials/row-details.ejs

@@ -1,8 +1,8 @@
 <div class="details-grid">
   <% Object.entries(data).forEach(([k, v]) => { %> <% if (v === null || k === 'content') return; %>
   <%
-    // Check if field contains JSON data (session_event: input/output, session: env/config)
-    const isJsonField = ['input', 'output', 'env', 'config'].includes(k) && v && v.trim().startsWith('{');
+    // Check if field contains JSON data (session_event: input/output, session: env/config, session_detail: data/message)
+    const isJsonField = ['input', 'output', 'env', 'config', 'data', 'message'].includes(k) && v && v.trim().startsWith('{');
     const isTimestamp = k.endsWith('_at') || k === 'created_at';
     const val = isTimestamp ? formatTimestamp(v) : v;
   %>

package/dist/web/views/partials/scope-badge.ejs

@@ -0,0 +1 @@
+<span class="scope-badge scope-<%= scope.toLowerCase() %>"><%= scope.toLowerCase() %></span>

package/dist/web/views/table.ejs

@@ -38,17 +38,26 @@
         </select>
       </div>
       <div class="filter-group">
-        <span class="filter-label">Status</span>
-        <select id="filter-status" class="filter-select">
-          <option value="">All Status</option>
-          <option value="draft">Draft</option>
-          <option value="suggested">Suggested</option>
-          <option value="verified">Verified</option>
+        <span class="filter-label">Scope</span>
+        <select id="filter-scope" class="filter-select">
+          <option value="">All Scopes</option>
+          <option value="personal">Personal</option>
+          <option value="project">Project</option>
+          <option value="organization">Organization</option>
         </select>
       </div>
       <% } %>
 
       <% if (tableName === 'session') { %>
+      <div class="filter-group">
+        <span class="filter-label">First User Prompt</span>
+        <input
+          type="text"
+          id="filter-first_user_prompt"
+          class="filter-input"
+          placeholder="Search First Prompt..."
+        />
+      </div>
       <div class="filter-group">
         <span class="filter-label">Working Directory</span>
         <input
@@ -81,6 +90,21 @@
       </div>
       <% } %>
 
+      <% if (tableName === 'session_detail') { %>
+      <div class="filter-group">
+        <span class="filter-label">Type</span>
+        <select id="filter-type" class="filter-select">
+          <option value="">All Types</option>
+          <option value="user">User</option>
+          <option value="assistant">Assistant</option>
+          <option value="system">System</option>
+          <option value="progress">Progress</option>
+          <option value="queue-operation">Queue Operation</option>
+          <option value="summary">Summary</option>
+        </select>
+      </div>
+      <% } %>
+
       <button id="clear-all-filters" class="btn-clear" disabled>Clear All</button>
       <button id="refresh-table" class="btn-clear" style="margin-left: auto; display: flex; align-items: center; gap: 4px">
         <span>🔄</span> Refresh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gabrywu/knowledge-bank",
-  "version": "0.1.2-alpha.227",
+  "version": "0.1.2-alpha.252",
   "description": "Claude Code plugin for lightweight knowledge management with event-driven architecture",
   "main": "dist/index.js",
   "type": "module",