vidpipe 1.3.3 → 1.3.5

package/dist/public/index.html

@@ -81,6 +81,21 @@
     .platform-tab { transition: all 0.2s ease; }
     .platform-tab.active { border-bottom: 2px solid currentColor; }
 
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+    .badge-danger { background: #f85149; color: white; }
+    .badge-warning { background: #d29922; color: white; }
+    .badge-success { background: #3fb950; color: white; }
+    .badge-info { background: #58a6ff; color: white; }
+
     body { background: #0f0f23; }
   </style>
 </head>
@@ -127,6 +142,49 @@
       } catch { return iso }
     }
 
+    function getGroupTitle(group) {
+      const raw = group.sourceClip || group.sourceVideo || 'Queued post'
+      const segments = String(raw).split(/[\\/]/).filter(Boolean)
+      return segments[segments.length - 1] || raw
+    }
+
+    function getGroupPlatforms(group) {
+      return [...new Set(group.items.map(item => {
+        const platform = normalizePlatform(item.metadata.platform)
+        return PLATFORMS[platform]?.name || item.metadata.platform
+      }))]
+    }
+
+    function getGroupIdeaPublishBy(group) {
+      const publishByDates = group.items
+        .map(item => item.ideaPublishBy)
+        .filter(Boolean)
+        .sort()
+      return publishByDates[0]
+    }
+
+    function TimelinessBadge({ publishBy }) {
+      if (!publishBy) return null
+
+      const now = new Date()
+      const deadline = new Date(publishBy)
+      if (Number.isNaN(deadline.getTime())) return null
+
+      const daysLeft = Math.ceil((deadline - now) / (1000 * 60 * 60 * 24))
+      const formattedDeadline = deadline.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+
+      if (daysLeft < 0) {
+        return html`<span class="badge badge-danger" title="Trend window has passed">⚠️ Trend expired</span>`
+      }
+      if (daysLeft <= 7) {
+        return html`<span class="badge badge-warning" title=${`Publish within ${daysLeft} days`}>⚡ ${daysLeft}d window</span>`
+      }
+      if (daysLeft > 30) {
+        return html`<span class="badge badge-success" title="Evergreen content">🌿 Evergreen</span>`
+      }
+      return html`<span class="badge badge-info" title=${`Publish by ${formattedDeadline}`}>${daysLeft}d remaining</span>`
+    }
+
     // ── Toast Container (imperative, lives outside Preact tree) ──
     const toastContainer = document.createElement('div')
     toastContainer.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2'
@@ -288,7 +346,29 @@
           </div>`
       }
 
-      const mediaUrl = `/media/queue/${encodeURIComponent(firstItem.id)}/media.mp4`
+      const mediaType = group.mediaType || 'video'
+      const mediaExt = mediaType === 'image' ? 'png' : 'mp4'
+      const mediaUrl = `/media/queue/${encodeURIComponent(firstItem.id)}/media.${mediaExt}`
+
+      if (mediaType === 'image') {
+        return html`
+          <div class="px-5 pb-3">
+            <div class="rounded-xl overflow-hidden bg-black/40 aspect-square relative">
+              <img
+                src=${mediaUrl}
+                alt="Generated cover image"
+                class="w-full h-full object-cover"
+              />
+              <div class="absolute top-3 left-3">
+                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-purple-500/20 border border-purple-500/30">
+                  <span class="text-sm">🎨</span>
+                  <span class="text-xs font-semibold text-purple-300">Generated Image</span>
+                </span>
+              </div>
+            </div>
+          </div>`
+      }
+
       return html`
         <div class="px-5 pb-3">
           <div class="rounded-xl overflow-hidden bg-black/40 aspect-video relative">
@@ -397,13 +477,21 @@
 
     function GroupedPostCard({ group, accounts, selectedPlatforms, onTogglePlatform, animClass, onReject, onSkip, onApprove }) {
       const selectedCount = selectedPlatforms.length
+      const groupTitle = getGroupTitle(group)
+      const groupPlatforms = getGroupPlatforms(group)
+      const ideaPublishBy = getGroupIdeaPublishBy(group)
       return html`
         <div class="w-full max-w-2xl" style="max-height: calc(100vh - 160px); display: flex; flex-direction: column;">
           <div class="bg-card rounded-2xl shadow-2xl border border-white/5 overflow-hidden flex flex-col ${animClass}" style="max-height: 100%;" key=${group.groupKey}>
             <!-- Fixed top: clip type badge -->
-            <div class="flex-shrink-0 flex items-center justify-between px-5 pt-4 pb-2">
-              <div class="flex items-center gap-2">
-                <${ClipTypeBadge} clipType=${group.clipType} />
+            <div class="flex-shrink-0 flex items-start justify-between px-5 pt-4 pb-2 gap-3">
+              <div class="min-w-0">
+                <div class="flex items-center gap-2 flex-wrap">
+                  <${ClipTypeBadge} clipType=${group.clipType} />
+                  <span class="text-sm font-semibold text-gray-200">${truncate(groupTitle, 48)}</span>
+                  <${TimelinessBadge} publishBy=${ideaPublishBy} />
+                </div>
+                <div class="mt-1 text-xs text-gray-500">${groupPlatforms.join(' · ')}</div>
               </div>
             </div>
             <!-- Scrollable middle: video + checkboxes + preview -->

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "vidpipe",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "AI-powered pipeline that watches for video recordings and generates transcripts, summaries, short clips, and social media posts",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cli.js",
+  "types": "dist/cli.d.ts",
   "bin": {
-    "vidpipe": "./dist/index.js"
+    "vidpipe": "./dist/cli.js"
   },
   "files": [
     "dist",
@@ -15,15 +15,26 @@
     "LICENSE"
   ],
   "scripts": {
-    "start": "tsx src/index.ts",
+    "start": "tsx src/L7-app/cli.ts",
     "build": "tsup",
     "typecheck": "tsc --noEmit",
-    "dev": "tsx watch src/index.ts",
+    "dev": "tsx watch src/L7-app/cli.ts",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:integration": "vitest run src/__tests__/integration/",
-    "test:unit": "vitest run --exclude 'src/__tests__/integration/**'",
+    "test:unit": "vitest run --project unit",
+    "test:unit:coverage": "vitest run --project unit --coverage",
+    "test:integration": "vitest run --project integration-L3 --project integration-L4-L6 --project integration-L7",
+    "test:integration:coverage": "vitest run --project integration-L3 --project integration-L4-L6 --project integration-L7 --coverage",
+    "test:integration:L3": "vitest run --project integration-L3",
+    "test:integration:L3:coverage": "vitest run --project integration-L3 --coverage",
+    "test:integration:L4-L6": "vitest run --project integration-L4-L6",
+    "test:integration:L4-L6:coverage": "vitest run --project integration-L4-L6 --coverage",
+    "test:integration:L7": "vitest run --project integration-L7",
+    "test:integration:L7:coverage": "vitest run --project integration-L7 --coverage",
+    "test:e2e": "vitest run --project e2e",
+    "test:e2e:coverage": "vitest run --project e2e --coverage",
+    "commit": "tsx cicd/commit.ts",
     "push": "tsx cicd/push.ts"
   },
   "keywords": [