recomposable 1.0.0 → 1.0.1

package/index.js

@@ -3,14 +3,14 @@
 
 const fs = require('fs');
 const path = require('path');
-const { listServices, getStatuses, rebuildService, restartService, tailLogs } = require('./lib/docker');
+const { listServices, getStatuses, rebuildService, restartService, tailLogs, getContainerId, tailContainerLogs, fetchContainerLogs } = require('./lib/docker');
 const { MODE, createState, statusKey, buildFlatList, moveCursor, selectedEntry } = require('./lib/state');
-const { clearScreen, showCursor, renderListView, renderLogHeader } = require('./lib/renderer');
+const { clearScreen, showCursor, renderListView, renderLogView } = require('./lib/renderer');
 
 // --- Config ---
 
 function loadConfig() {
-  const defaults = { composeFiles: [], pollInterval: 3000, logTailLines: 100 };
+  const defaults = { composeFiles: [], pollInterval: 3000, logTailLines: 100, logScanPatterns: ['WRN]', 'ERR]'], logScanLines: 1000, logScanInterval: 10000 };
 
   // Load from recomposable.json in current working directory
   const configPath = path.join(process.cwd(), 'recomposable.json');
@@ -69,18 +69,145 @@ function pollStatuses(state) {
   }
 }
 
+// --- Log Pattern Scanning ---
+
+let logScanActive = false;
+
+function pollLogCounts(state) {
+  if (logScanActive) return;
+  const scanPatterns = state.config.logScanPatterns || [];
+  if (scanPatterns.length === 0) return;
+  const tailLines = state.config.logScanLines || 1000;
+
+  const toScan = [];
+  for (const group of state.groups) {
+    if (group.error) continue;
+    for (const service of group.services) {
+      const sk = statusKey(group.file, service);
+      const st = state.statuses.get(sk);
+      if (!st || st.state !== 'running' || !st.id) continue;
+      toScan.push({ sk, containerId: st.id });
+    }
+  }
+
+  if (toScan.length === 0) return;
+  logScanActive = true;
+  let remaining = toScan.length;
+
+  for (const { sk, containerId } of toScan) {
+    const child = fetchContainerLogs(containerId, tailLines);
+    let output = '';
+    child.stdout.on('data', (d) => { output += d.toString(); });
+    child.stderr.on('data', (d) => { output += d.toString(); });
+    child.on('close', () => {
+      const counts = new Map();
+      for (const pattern of scanPatterns) {
+        let count = 0;
+        let idx = 0;
+        while ((idx = output.indexOf(pattern, idx)) !== -1) {
+          count++;
+          idx += pattern.length;
+        }
+        counts.set(pattern, count);
+      }
+      state.logCounts.set(sk, counts);
+      remaining--;
+      if (remaining === 0) {
+        logScanActive = false;
+        if (state.mode === MODE.LIST) throttledRender(state);
+      }
+    });
+    child.on('error', () => {
+      remaining--;
+      if (remaining === 0) {
+        logScanActive = false;
+        if (state.mode === MODE.LIST) throttledRender(state);
+      }
+    });
+  }
+}
+
 // --- Rendering ---
 
 function render(state) {
   let output = clearScreen();
   if (state.mode === MODE.LIST) {
     output += renderListView(state);
+  } else if (state.mode === MODE.LOGS) {
+    output += renderLogView(state);
   }
   process.stdout.write(output);
 }
 
+function stripAnsi(str) {
+  return str.replace(/\x1b\[[0-9;?]*[a-zA-Z]|\x1b\][^\x07]*\x07|\x1b[^[\]]/g, '');
+}
+
+let lastRenderTime = 0;
+let pendingRender = null;
+let logFetchTimer = null;
+
+function throttledRender(state) {
+  const now = Date.now();
+  const elapsed = now - lastRenderTime;
+  if (elapsed >= 150) {
+    lastRenderTime = now;
+    render(state);
+  } else if (!pendingRender) {
+    pendingRender = setTimeout(() => {
+      pendingRender = null;
+      lastRenderTime = Date.now();
+      render(state);
+    }, 150 - elapsed);
+  }
+}
+
 // --- Actions ---
 
+function updateSelectedLogs(state) {
+  const entry = selectedEntry(state);
+  if (!entry) return;
+
+  const sk = statusKey(entry.file, entry.service);
+
+  // Same container already selected, nothing to do
+  if (state.selectedLogKey === sk) return;
+
+  // Cancel any pending debounced log fetch
+  if (logFetchTimer) {
+    clearTimeout(logFetchTimer);
+    logFetchTimer = null;
+  }
+
+  // Clean up previous selected container's passive log tail
+  if (state.selectedLogKey) {
+    const oldInfo = state.bottomLogLines.get(state.selectedLogKey);
+    if (oldInfo && (oldInfo.action === 'logs' || oldInfo.action === 'started')) {
+      if (!state.rebuilding.has(state.selectedLogKey) && !state.restarting.has(state.selectedLogKey)) {
+        state.bottomLogLines.delete(state.selectedLogKey);
+        if (state.bottomLogTails.has(state.selectedLogKey)) {
+          state.bottomLogTails.get(state.selectedLogKey).kill('SIGTERM');
+          state.bottomLogTails.delete(state.selectedLogKey);
+        }
+      }
+    }
+  }
+
+  state.selectedLogKey = sk;
+
+  // If this container already has active action logs (rebuild/restart/started), keep those
+  if (state.bottomLogLines.has(sk)) return;
+
+  // Set up empty log entry immediately so the UI shows the container name
+  state.bottomLogLines.set(sk, { action: 'logs', service: entry.service, lines: [] });
+
+  // Debounce the expensive log fetch (getContainerId is a blocking execFileSync)
+  logFetchTimer = setTimeout(() => {
+    logFetchTimer = null;
+    startBottomLogTail(state, sk, entry.file, entry.service);
+  }, 500);
+}
+
 function doRebuild(state) {
   const entry = selectedEntry(state);
   if (!entry) return;
@@ -88,17 +215,83 @@ function doRebuild(state) {
   const sk = statusKey(entry.file, entry.service);
   if (state.rebuilding.has(sk)) return;
 
+  // Kill any existing startup log tail for this service
+  if (state.bottomLogTails.has(sk)) {
+    state.bottomLogTails.get(sk).kill('SIGTERM');
+    state.bottomLogTails.delete(sk);
+  }
+
   const child = rebuildService(entry.file, entry.service);
   state.rebuilding.set(sk, child);
+
+  state.bottomLogLines.set(sk, { action: 'rebuilding', service: entry.service, lines: [] });
+
+  let lineBuf = '';
+  const onData = (data) => {
+    const info = state.bottomLogLines.get(sk);
+    if (!info) return;
+    lineBuf += data.toString();
+    const parts = lineBuf.split(/\r?\n|\r/);
+    lineBuf = parts.pop();
+    const newLines = parts.filter(l => l.trim().length > 0).map(stripAnsi).filter(Boolean);
+    if (newLines.length === 0) return;
+    info.lines.push(...newLines);
+    if (info.lines.length > 10) info.lines = info.lines.slice(-10);
+    if (state.mode === MODE.LIST) throttledRender(state);
+  };
+
+  child.stdout.on('data', onData);
+  child.stderr.on('data', onData);
   render(state);
 
   child.on('close', () => {
     state.rebuilding.delete(sk);
     pollStatuses(state);
+
+    // Show container application logs after rebuild+start
+    const info = state.bottomLogLines.get(sk);
+    if (info) {
+      info.action = 'started';
+      info.lines = [];
+    }
+
+    startBottomLogTail(state, sk, entry.file, entry.service);
     if (state.mode === MODE.LIST) render(state);
   });
 }
 
+function startBottomLogTail(state, sk, file, service) {
+  // Kill any existing tail for this service
+  if (state.bottomLogTails.has(sk)) {
+    state.bottomLogTails.get(sk).kill('SIGTERM');
+    state.bottomLogTails.delete(sk);
+  }
+
+  // Get container ID and use docker logs directly (avoids compose buffering)
+  const containerId = getContainerId(file, service);
+  if (!containerId) return;
+
+  const logChild = tailContainerLogs(containerId, 10);
+  state.bottomLogTails.set(sk, logChild);
+
+  let buf = '';
+  const onData = (data) => {
+    const info = state.bottomLogLines.get(sk);
+    if (!info) return;
+    buf += data.toString();
+    const parts = buf.split(/\r?\n|\r/);
+    buf = parts.pop();
+    const newLines = parts.filter(l => l.trim().length > 0).map(stripAnsi).filter(Boolean);
+    if (newLines.length === 0) return;
+    info.lines.push(...newLines);
+    if (info.lines.length > 10) info.lines = info.lines.slice(-10);
+    if (state.mode === MODE.LIST) throttledRender(state);
+  };
+
+  logChild.stdout.on('data', onData);
+  logChild.stderr.on('data', onData);
+}
+
 function doRestart(state) {
   const entry = selectedEntry(state);
   if (!entry) return;
@@ -106,13 +299,30 @@ function doRestart(state) {
   const sk = statusKey(entry.file, entry.service);
   if (state.restarting.has(sk) || state.rebuilding.has(sk)) return;
 
+  // Kill any existing startup log tail for this service
+  if (state.bottomLogTails.has(sk)) {
+    state.bottomLogTails.get(sk).kill('SIGTERM');
+    state.bottomLogTails.delete(sk);
+  }
+
   const child = restartService(entry.file, entry.service);
   state.restarting.set(sk, child);
+
+  state.bottomLogLines.set(sk, { action: 'restarting', service: entry.service, lines: [] });
   render(state);
 
   child.on('close', () => {
     state.restarting.delete(sk);
     pollStatuses(state);
+
+    // Show container application logs after restart
+    const info = state.bottomLogLines.get(sk);
+    if (info) {
+      info.action = 'started';
+      info.lines = [];
+    }
+
+    startBottomLogTail(state, sk, entry.file, entry.service);
     if (state.mode === MODE.LIST) render(state);
   });
 }
@@ -121,22 +331,50 @@ function enterLogs(state) {
   const entry = selectedEntry(state);
   if (!entry) return;
 
-  state.mode = MODE.LOGS;
+  if (logFetchTimer) {
+    clearTimeout(logFetchTimer);
+    logFetchTimer = null;
+  }
 
-  // Clear screen and show log header
-  process.stdout.write(clearScreen() + renderLogHeader(entry.service) + '\n');
+  state.mode = MODE.LOGS;
+  state.logLines = [];
+  state.logScrollOffset = 0;
+  state.logAutoScroll = true;
 
   const child = tailLogs(entry.file, entry.service, state.config.logTailLines);
   state.logChild = child;
 
-  child.stdout.pipe(process.stdout);
-  child.stderr.pipe(process.stdout);
+  let lineBuf = '';
+  const onData = (data) => {
+    lineBuf += data.toString();
+    const parts = lineBuf.split(/\r?\n|\r/);
+    lineBuf = parts.pop();
+    if (parts.length === 0) return;
+    for (const line of parts) {
+      state.logLines.push(stripAnsi(line));
+    }
+    // Cap buffer at 10000 lines
+    if (state.logLines.length > 10000) {
+      const excess = state.logLines.length - 10000;
+      state.logLines.splice(0, excess);
+      if (!state.logAutoScroll) {
+        state.logScrollOffset = Math.max(0, state.logScrollOffset - excess);
+      }
+    }
+    if (state.logAutoScroll) {
+      throttledRender(state);
+    }
+  };
 
+  child.stdout.on('data', onData);
+  child.stderr.on('data', onData);
   child.on('close', () => {
     if (state.logChild === child) {
       state.logChild = null;
     }
   });
+
+  render(state);
 }
 
 function exitLogs(state) {
@@ -144,6 +382,7 @@ function exitLogs(state) {
     state.logChild.kill('SIGTERM');
     state.logChild = null;
   }
+  state.logLines = [];
   state.mode = MODE.LIST;
   pollStatuses(state);
   render(state);
@@ -159,12 +398,48 @@ function handleKeypress(state, key) {
   }
 
   if (state.mode === MODE.LOGS) {
-    if (key === 'l' || key === '\x1b' || key === 'q') {
-      if (key === 'q') {
+    const { rows = 24 } = process.stdout;
+    const pageSize = Math.max(1, Math.floor(rows / 2));
+    const maxOffset = Math.max(0, state.logLines.length - 1);
+
+    switch (key) {
+      case 'f':
+      case '\x1b':
+        exitLogs(state);
+        break;
+      case 'q':
         cleanup(state);
         process.exit(0);
-      }
-      exitLogs(state);
+        break;
+      case 'k':
+      case '\x1b[A':
+        state.logAutoScroll = false;
+        state.logScrollOffset = Math.min(maxOffset, state.logScrollOffset + 1);
+        render(state);
+        break;
+      case 'j':
+      case '\x1b[B':
+        if (state.logScrollOffset > 0) {
+          state.logScrollOffset--;
+          if (state.logScrollOffset === 0) state.logAutoScroll = true;
+        }
+        render(state);
+        break;
+      case 'G':
+        state.logScrollOffset = 0;
+        state.logAutoScroll = true;
+        render(state);
+        break;
+      case '\x15': // Ctrl+U - page up
+        state.logAutoScroll = false;
+        state.logScrollOffset = Math.min(maxOffset, state.logScrollOffset + pageSize);
+        render(state);
+        break;
+      case '\x04': // Ctrl+D - page down
+        state.logScrollOffset = Math.max(0, state.logScrollOffset - pageSize);
+        if (state.logScrollOffset === 0) state.logAutoScroll = true;
+        render(state);
+        break;
     }
     return;
   }
@@ -174,11 +449,13 @@ function handleKeypress(state, key) {
     case 'j':
     case '\x1b[B': // Arrow Down
       moveCursor(state, 1);
+      updateSelectedLogs(state);
       render(state);
       break;
     case 'k':
     case '\x1b[A': // Arrow Up
       moveCursor(state, -1);
+      updateSelectedLogs(state);
       render(state);
       break;
     case 'r':
@@ -187,16 +464,21 @@ function handleKeypress(state, key) {
     case 's':
       doRestart(state);
       break;
-    case 'l':
+    case 'f':
     case '\r': // Enter
       enterLogs(state);
       break;
+    case 'l':
+      state.showBottomLogs = !state.showBottomLogs;
+      render(state);
+      break;
     case 'q':
       cleanup(state);
       process.exit(0);
       break;
     case 'G': // vim: go to bottom
       state.cursor = state.flatList.length - 1;
+      updateSelectedLogs(state);
       render(state);
       break;
     case 'g': // gg handled via double-tap buffer below
@@ -253,8 +535,14 @@ function createInputHandler(state) {
       if (ch === 'g') {
         if (gPending) {
           gPending = false;
-          state.cursor = 0;
-          state.scrollOffset = 0;
+          if (state.mode === MODE.LIST) {
+            state.cursor = 0;
+            state.scrollOffset = 0;
+            updateSelectedLogs(state);
+          } else if (state.mode === MODE.LOGS) {
+            state.logAutoScroll = false;
+            state.logScrollOffset = Math.max(0, state.logLines.length - 1);
+          }
           render(state);
           continue;
         }
@@ -289,10 +577,21 @@ function cleanup(state) {
     child.kill('SIGTERM');
   }
   state.restarting.clear();
+  for (const [, child] of state.bottomLogTails) {
+    child.kill('SIGTERM');
+  }
+  state.bottomLogTails.clear();
+  if (logFetchTimer) {
+    clearTimeout(logFetchTimer);
+    logFetchTimer = null;
+  }
+  if (state.logScanTimer) {
+    clearInterval(state.logScanTimer);
+  }
   if (state.pollTimer) {
     clearInterval(state.pollTimer);
   }
-  process.stdout.write(showCursor() + '\x1b[0m');
+  process.stdout.write('\x1b[r' + showCursor() + '\x1b[0m');
 }
 
 // --- Main ---
@@ -321,7 +620,11 @@ function main() {
   process.stdin.setEncoding('utf8');
   process.stdin.on('data', createInputHandler(state));
 
-  // Render
+  // Initial log pattern scan
+  pollLogCounts(state);
+
+  // Start log tail for initially selected container and render
+  updateSelectedLogs(state);
   render(state);
 
   // Poll loop
@@ -332,9 +635,16 @@ function main() {
     }
   }, config.pollInterval);
 
+  // Log pattern scan loop
+  state.logScanTimer = setInterval(() => {
+    if (state.mode === MODE.LIST) {
+      pollLogCounts(state);
+    }
+  }, config.logScanInterval || 10000);
+
   // Terminal resize
   process.stdout.on('resize', () => {
-    if (state.mode === MODE.LIST) render(state);
+    render(state);
   });
 
   // Cleanup on exit

package/lib/docker.js

@@ -33,11 +33,40 @@ function getStatuses(file) {
     containers = trimmed.split('\n').filter(Boolean).map(line => JSON.parse(line));
   }
 
+  const idToService = new Map();
+
   for (const c of containers) {
     const name = c.Service || c.Name;
     const state = (c.State || '').toLowerCase();
     const health = (c.Health || '').toLowerCase();
-    statuses.set(name, { state, health });
+    const createdAt = c.CreatedAt || null;
+    const id = c.ID || null;
+    statuses.set(name, { state, health, createdAt, startedAt: null, id: id || null });
+    if (id) idToService.set(id, name);
+  }
+
+  // Batch docker inspect to get startedAt timestamps
+  const ids = [...idToService.keys()];
+  if (ids.length > 0) {
+    try {
+      const inspectOut = execFileSync('docker', ['inspect', ...ids], {
+        encoding: 'utf8', timeout: 10000, stdio: ['pipe', 'pipe', 'pipe']
+      });
+      const inspected = JSON.parse(inspectOut);
+      for (const info of inspected) {
+        for (const [id, svc] of idToService) {
+          if (info.Id && info.Id.startsWith(id)) {
+            const status = statuses.get(svc);
+            if (status && info.State) {
+              status.startedAt = info.State.StartedAt || null;
+            }
+            break;
+          }
+        }
+      }
+    } catch {
+      // Ignore inspect errors
+    }
   }
 
   return statuses;
@@ -46,7 +75,10 @@ function getStatuses(file) {
 function rebuildService(file, service) {
   const cwd = path.dirname(path.resolve(file));
   const args = ['compose', '-f', path.resolve(file), 'up', '-d', '--build', service];
-  const child = spawn('docker', args, { cwd, stdio: 'ignore', detached: false });
+  const child = spawn('docker', args, {
+    cwd, stdio: ['ignore', 'pipe', 'pipe'], detached: false,
+    env: { ...process.env, BUILDKIT_PROGRESS: 'plain' },
+  });
   return child;
 }
 
@@ -57,11 +89,35 @@ function tailLogs(file, service, tailLines) {
   return child;
 }
 
+function getContainerId(file, service) {
+  const cwd = path.dirname(path.resolve(file));
+  const args = ['compose', '-f', path.resolve(file), 'ps', '-q', service];
+  try {
+    const out = execFileSync('docker', args, { cwd, encoding: 'utf8', timeout: 5000, stdio: ['pipe', 'pipe', 'pipe'] });
+    return out.trim() || null;
+  } catch {
+    return null;
+  }
+}
+
+function tailContainerLogs(containerId, tailLines) {
+  const args = ['logs', '-f', '--tail', String(tailLines), containerId];
+  const child = spawn('docker', args, { stdio: ['ignore', 'pipe', 'pipe'] });
+  return child;
+}
+
+function fetchContainerLogs(containerId, tailLines) {
+  const child = spawn('docker', ['logs', '--tail', String(tailLines), containerId], {
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+  return child;
+}
+
 function restartService(file, service) {
   const cwd = path.dirname(path.resolve(file));
   const args = ['compose', '-f', path.resolve(file), 'restart', service];
-  const child = spawn('docker', args, { cwd, stdio: 'ignore', detached: false });
+  const child = spawn('docker', args, { cwd, stdio: ['ignore', 'pipe', 'pipe'], detached: false });
   return child;
 }
 
-module.exports = { listServices, getStatuses, rebuildService, restartService, tailLogs };
+module.exports = { listServices, getStatuses, rebuildService, restartService, tailLogs, getContainerId, tailContainerLogs, fetchContainerLogs };

package/lib/renderer.js

@@ -14,21 +14,16 @@ const FG_GRAY = `${ESC}90m`;
 const FG_CYAN = `${ESC}36m`;
 const FG_WHITE = `${ESC}37m`;
 
-const LOGO_L = [
-  ` ${BOLD}${FG_CYAN}__      __ _  _   _   _    ___${RESET}`,
-  ` ${BOLD}${FG_CYAN}\\ \\    / /| || | /_\\ | |  | __|${RESET}`,
-  ` ${BOLD}${FG_CYAN} \\ \\/\\/ / | __ |/ _ \\| |__| _|${RESET}`,
-  ` ${BOLD}${FG_CYAN}  \\_/\\_/  |_||_/_/ \\_|____|___|${RESET}`,
+const ITALIC = `${ESC}3m`;
+const BG_HIGHLIGHT = `${ESC}48;5;237m`;
+
+const LOGO = [
+  ` ${ITALIC}${BOLD}${FG_CYAN}┌─┐┌─┐┌─┐┌─┐┌┬┐┌─┐┌─┐┌─┐┌─┐┌┐ ┬  ┌─┐${RESET}`,
+  ` ${ITALIC}${BOLD}${FG_CYAN}├┬┘├┤ │  │ ││││├─┘│ │└─┐├─┤├┴┐│  ├┤${RESET}`,
+  ` ${ITALIC}${BOLD}${FG_CYAN}┴└─└─┘└─┘└─┘┴ ┴┴  └─┘└─┘┴ ┴└─┘┴─┘└─┘${RESET}`,
   ``,
   ` ${DIM}docker compose manager${RESET}`,
-];
-const LOGO_R = [
-  `${FG_CYAN}       .${RESET}`,
-  `${FG_CYAN}     ":"${RESET}`,
-  `${FG_CYAN}   ___:____     |"\\/"|${RESET}`,
-  `${FG_CYAN} ,'        \`.    \\  /${RESET}`,
-  `${FG_CYAN} |  O        \\___/  |${RESET}`,
-  `${FG_CYAN}~^~^~^~^~^~^~^~^~^~^~^~${RESET}`,
+  ``,
 ];
 
 function visLen(str) {
@@ -40,6 +35,39 @@ function padVisible(str, width) {
   return str + ' '.repeat(pad);
 }
 
+function padVisibleStart(str, width) {
+  const pad = Math.max(0, width - visLen(str));
+  return ' '.repeat(pad) + str;
+}
+
+const PATTERN_COLORS = [FG_YELLOW, FG_RED, FG_CYAN, FG_WHITE];
+
+function patternLabel(pattern) {
+  return pattern.replace(/^[\[\(\{<]/, '').replace(/[\]\)\}>]$/, '');
+}
+
+function parseTimestamp(ts) {
+  if (!ts) return null;
+  // Strip trailing timezone abbreviation (e.g., "UTC", "CET")
+  const cleaned = ts.replace(/ [A-Z]{2,5}$/, '');
+  const d = new Date(cleaned);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+function relativeTime(ts) {
+  const date = parseTimestamp(ts);
+  if (!date) return `${FG_GRAY}-${RESET}`;
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 0) return `${FG_GRAY}-${RESET}`;
+  if (seconds < 60) return `${DIM}${seconds}s ago${RESET}`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${DIM}${minutes}m ago${RESET}`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${DIM}${hours}h ago${RESET}`;
+  const days = Math.floor(hours / 24);
+  return `${DIM}${days}d ago${RESET}`;
+}
+
 function clearScreen() {
   return `${ESC}2J${ESC}H${ESC}?25l`;
 }
@@ -81,21 +109,63 @@ function statusText(status, isRebuilding, isRestarting) {
   return `${DIM}${text}${RESET}`;
 }
 
+function renderLegend(opts = {}) {
+  const { logPanelActive = false, fullLogsActive = false, logsScrollMode = false } = opts;
+  const item = (text, active) => {
+    if (active) return `${BG_HIGHLIGHT} ${text} ${RESET}`;
+    return `${DIM}${text}${RESET}`;
+  };
+  if (logsScrollMode) {
+    return [
+      item('[Esc] back', false),
+      item('[j/k] scroll', false),
+      item('[G] bottom', false),
+      item('[gg] top', false),
+      item('[Q]uit', false),
+    ].join('  ');
+  }
+  return [
+    item('[R]ebuild', false),
+    item('[S]restart', false),
+    item('[F]ull logs', fullLogsActive),
+    item('[L]og panel', logPanelActive),
+    item('[Q]uit', false),
+  ].join('  ');
+}
+
 function renderListView(state) {
   const { columns = 80, rows = 24 } = process.stdout;
+  const patterns = state.config.logScanPatterns || [];
   const buf = [];
 
-  // Logo: text left, whale art right
-  const logoGap = 6;
-  const leftWidth = 32;
-  for (let i = 0; i < LOGO_L.length; i++) {
-    const left = padVisible(LOGO_L[i] || '', leftWidth);
-    const right = LOGO_R[i] || '';
-    buf.push(` ${left}${' '.repeat(logoGap)}${right}`);
+  // Logo
+  for (const line of LOGO) {
+    buf.push(line);
   }
-  const help = `${DIM}[S]restart  [R]ebuild  [L]ogs  [Q]uit${RESET}`;
-  buf.push(` ${FG_GRAY}${'─'.repeat(Math.max(0, columns - 2))}${RESET}  ${help}`);
-  buf.push('');
+  const help = renderLegend({ logPanelActive: state.showBottomLogs });
+  buf.push(` ${FG_GRAY}${'─'.repeat(Math.max(0, columns - 2))}${RESET}`);
+  buf.push(` ${help}`);
+
+  const headerHeight = buf.length;
+
+  // Build bottom panel content — show logs for the currently selected container
+  const bottomBuf = [];
+  if (state.showBottomLogs) {
+    const selEntry = state.flatList[state.cursor];
+    if (selEntry) {
+      const sk = statusKey(selEntry.file, selEntry.service);
+      const info = state.bottomLogLines.get(sk);
+      if (info) {
+        bottomBuf.push(` ${FG_GRAY}${'─'.repeat(Math.max(0, columns - 2))}${RESET}`);
+        const actionColor = info.action === 'rebuilding' || info.action === 'restarting' ? FG_YELLOW : FG_GREEN;
+        bottomBuf.push(` ${actionColor}${info.action} ${BOLD}${info.service}${RESET}`);
+        for (const line of info.lines) {
+          bottomBuf.push(`  ${FG_GRAY}${line.substring(0, columns - 4)}${RESET}`);
+        }
+      }
+    }
+  }
+  const bottomHeight = bottomBuf.length;
 
   // Build all display lines
   const lines = [];
@@ -115,6 +185,9 @@ function renderListView(state) {
       } else {
         lines.push({ type: 'header', text: label });
       }
+      let colHeader = `${DIM}     ${'SERVICE'.padEnd(24)} ${'STATUS'.padEnd(22)} ${'BUILT'.padEnd(12)} ${'RESTARTED'.padEnd(12)}`;
+      for (const p of patterns) colHeader += patternLabel(p).padStart(5) + ' ';
+      lines.push({ type: 'colheader', text: colHeader + RESET });
     }
 
     const sk = statusKey(entry.file, entry.service);
@@ -123,20 +196,31 @@ function renderListView(state) {
     const restarting = state.restarting.has(sk);
     const icon = statusIcon(st, rebuilding, restarting);
     const stext = statusText(st, rebuilding, restarting);
-    const name = entry.service.padEnd(30);
+    const name = entry.service.padEnd(24);
+    const statusPadded = padVisible(stext, 22);
+    const built = padVisible(relativeTime(st ? st.createdAt : null), 12);
+    const restarted = padVisible(relativeTime(st ? st.startedAt : null), 12);
     const pointer = i === state.cursor ? `${REVERSE}` : '';
     const endPointer = i === state.cursor ? `${RESET}` : '';
 
+    let countsStr = '';
+    const logCounts = state.logCounts.get(sk);
+    for (let pi = 0; pi < patterns.length; pi++) {
+      const count = logCounts ? (logCounts.get(patterns[pi]) || 0) : 0;
+      const color = count > 0 ? PATTERN_COLORS[pi % PATTERN_COLORS.length] : DIM;
+      const countText = count > 0 ? `${color}${count}${RESET}` : `${color}-${RESET}`;
+      countsStr += padVisibleStart(countText, 5) + ' ';
+    }
+
     lines.push({
       type: 'service',
-      text: `${pointer}   ${icon} ${FG_WHITE}${name}${RESET} ${stext}${endPointer}`,
+      text: `${pointer}   ${icon} ${FG_WHITE}${name}${RESET} ${statusPadded} ${built} ${restarted}${countsStr}${endPointer}`,
       flatIdx: i,
     });
   }
 
   // Scrolling
-  const availableRows = rows - (LOGO_L.length + 3); // logo + ruler + blank + bottom margin
-  const serviceLines = lines.filter(l => l.type === 'service');
+  const availableRows = Math.max(3, rows - headerHeight - bottomHeight);
 
   // Find line index of cursor
   const cursorLineIdx = lines.findIndex(l => l.type === 'service' && l.flatIdx === state.cursor);
@@ -154,18 +238,78 @@ function renderListView(state) {
     buf.push(line.text || '');
   }
 
+  // Pad to push bottom panel to the bottom of the terminal
+  const usedLines = buf.length + bottomHeight;
+  const paddingNeeded = Math.max(0, rows - usedLines);
+  for (let i = 0; i < paddingNeeded; i++) {
+    buf.push('');
+  }
+
+  // Bottom panel
+  buf.push(...bottomBuf);
+
   return buf.join('\n');
 }
 
-function renderLogHeader(serviceName) {
-  const { columns = 80 } = process.stdout;
-  const title = `${BOLD}${FG_CYAN} whale${RESET} ${FG_GRAY}>${RESET} ${BOLD}${serviceName}${RESET} ${DIM}logs${RESET}`;
-  const help = `${DIM}[L] or [Esc] back${RESET}`;
-  const pad = Math.max(0, columns - serviceName.length - 21 - 17);
+function truncateLine(str, maxWidth) {
+  let visPos = 0;
+  let rawPos = 0;
+  while (rawPos < str.length) {
+    if (str[rawPos] === '\x1b') {
+      const match = str.substring(rawPos).match(/^\x1b\[[0-9;?]*[a-zA-Z]/);
+      if (match) { rawPos += match[0].length; continue; }
+      const oscMatch = str.substring(rawPos).match(/^\x1b\][^\x07]*\x07/);
+      if (oscMatch) { rawPos += oscMatch[0].length; continue; }
+    }
+    if (visPos >= maxWidth) {
+      return str.substring(0, rawPos) + RESET;
+    }
+    visPos++;
+    rawPos++;
+  }
+  return str;
+}
+
+function renderLogView(state) {
+  const { columns = 80, rows = 24 } = process.stdout;
   const buf = [];
-  buf.push(title + ' '.repeat(pad) + help);
+
+  for (const line of LOGO) {
+    buf.push(line);
+  }
   buf.push(` ${FG_GRAY}${'─'.repeat(Math.max(0, columns - 2))}${RESET}`);
+  buf.push(` ${renderLegend({ logsScrollMode: true })}`);
+
+  const entry = state.flatList[state.cursor];
+  const serviceName = entry ? entry.service : '???';
+  const totalLines = state.logLines.length;
+
+  const scrollStatus = state.logAutoScroll
+    ? `${FG_GREEN}live${RESET}`
+    : `${FG_YELLOW}paused ${DIM}line ${Math.max(1, totalLines - state.logScrollOffset)} / ${totalLines}${RESET}`;
+  buf.push(` ${FG_GREEN}full logs ${BOLD}${serviceName}${RESET}  ${scrollStatus}`);
+
+  const headerHeight = buf.length;
+  const availableRows = Math.max(1, rows - headerHeight);
+
+  let endLine;
+  if (state.logAutoScroll || state.logScrollOffset === 0) {
+    endLine = totalLines;
+  } else {
+    endLine = Math.max(0, totalLines - state.logScrollOffset);
+  }
+  const startLine = Math.max(0, endLine - availableRows);
+
+  for (let i = startLine; i < endLine; i++) {
+    buf.push(truncateLine(state.logLines[i], columns));
+  }
+
+  // Pad to fill screen (prevents ghost content from previous render)
+  for (let i = buf.length; i < rows; i++) {
+    buf.push('');
+  }
+
   return buf.join('\n');
 }
 
-module.exports = { clearScreen, showCursor, renderListView, renderLogHeader };
+module.exports = { clearScreen, showCursor, renderListView, renderLogView };

package/lib/state.js

@@ -13,6 +13,14 @@ function createState(config) {
     restarting: new Map(), // "file::service" -> childProcess
     logChild: null,
     scrollOffset: 0,
+    showBottomLogs: true,
+    bottomLogLines: new Map(), // statusKey -> { action, service, lines: [] }
+    bottomLogTails: new Map(), // statusKey -> childProcess (log tail after restart)
+    selectedLogKey: null,      // statusKey of cursor-selected container for log tailing
+    logCounts: new Map(),      // statusKey -> Map<pattern, count>
+    logLines: [],              // buffered log lines for full log view
+    logScrollOffset: 0,        // lines from bottom (0 = at bottom)
+    logAutoScroll: true,       // auto-scroll to bottom on new data
     config,
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recomposable",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Docker Compose TUI manager with vim keybindings — monitor, restart, rebuild, and tail logs for your services",
   "main": "index.js",
   "bin": {