process updates

Author: gallayl

common/schemas/entities.json

@@ -465,6 +465,10 @@
           "type": "string",
           "description": "Optional JSON with extra context (exit code, error message, etc.)"
         },
+        "processUid": {
+          "type": "string",
+          "description": "UUID of the associated process, if this event produced log output"
+        },
         "createdAt": {
           "type": "string"
         }

common/schemas/services-api.json

@@ -773,6 +773,10 @@
           "type": "string",
           "description": "Optional JSON with extra context (exit code, error message, etc.)"
         },
+        "processUid": {
+          "type": "string",
+          "description": "UUID of the associated process, if this event produced log output"
+        },
         "createdAt": {
           "type": "string"
         }

common/src/models/service-state-history.ts

@@ -63,5 +63,8 @@ export class ServiceStateHistory {
   /** Optional JSON with extra context (exit code, error message, etc.) */
   metadata?: string
 
+  /** UUID of the associated process, if this event produced log output */
+  processUid?: string
+
   createdAt!: string
 }

frontend/src/components/body.tsx

@@ -26,6 +26,9 @@ const appRoutes = {
   '/services/wizard/:stackName': {
     component: ({ match }) => <CreateServiceWizard stackName={match.params.stackName} />,
   },
+  '/services/:id/logs/:processUid': {
+    component: ({ match }) => <ServiceLogs serviceId={match.params.id} processUid={match.params.processUid} />,
+  },
   '/services/:id/logs': {
     component: ({ match }) => <ServiceLogs serviceId={match.params.id} />,
   },

frontend/src/components/log-line.tsx

@@ -0,0 +1,65 @@
+import { createComponent, Shade } from '@furystack/shades'
+
+import type { AnsiStyle } from '../utils/parse-ansi.js'
+import { parseAnsi } from '../utils/parse-ansi.js'
+
+const URL_REGEX = /(https?:\/\/[^\s)]+)/g
+
+const renderTextWithLinks = (text: string, style: AnsiStyle) => {
+  const parts: JSX.Element[] = []
+  let lastIndex = 0
+
+  URL_REGEX.lastIndex = 0
+  let match = URL_REGEX.exec(text)
+
+  while (match !== null) {
+    const before = text.slice(lastIndex, match.index)
+    if (before) {
+      parts.push(<span style={style}>{before}</span>)
+    }
+
+    const url = match[1]
+    parts.push(
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{
+          ...style,
+          color: style.color ?? '#58a6ff',
+          textDecoration: 'underline',
+          cursor: 'pointer',
+        }}
+      >
+        {url}
+      </a>,
+    )
+
+    lastIndex = match.index + match[0].length
+    match = URL_REGEX.exec(text)
+  }
+
+  const remaining = text.slice(lastIndex)
+  if (remaining) {
+    parts.push(<span style={style}>{remaining}</span>)
+  }
+
+  return parts
+}
+
+type LogLineProps = {
+  line: string
+}
+
+export const LogLine = Shade<LogLineProps>({
+  shadowDomName: 'shade-log-line',
+  render: ({ props }) => {
+    const segments = parseAnsi(props.line)
+
+    return (
+      <span>
+        {segments.flatMap((segment) => renderTextWithLinks(segment.text, segment.style))}
+      </span>
+    )
+  },
+})

frontend/src/components/log-viewer.tsx

@@ -3,8 +3,11 @@ import { createComponent, Shade } from '@furystack/shades'
 import { Input, Loader } from '@furystack/shades-common-components'
 import { ServiceLogEntry } from 'common'
 
+import { LogLine } from './log-line.js'
+
 type LogViewerProps = {
   serviceId: string
+  processUid?: string
 }
 
 export const LogViewer = Shade<LogViewerProps>({
@@ -15,7 +18,10 @@ export const LogViewer = Shade<LogViewerProps>({
     const containerRef = useRef<HTMLDivElement>('container')
 
     const logsState = useCollectionSync(options, ServiceLogEntry, {
-      filter: { serviceId: { $eq: props.serviceId } },
+      filter: {
+        serviceId: { $eq: props.serviceId },
+        ...(props.processUid ? { processUid: { $eq: props.processUid } } : {}),
+      },
       order: { id: 'DESC' },
       top: 300,
     })
@@ -65,7 +71,9 @@ export const LogViewer = Shade<LogViewerProps>({
             <div style={{ opacity: '0.5', textAlign: 'center', padding: '32px' }}>No log output yet.</div>
           ) : null}
           {filteredEntries.map((entry) => (
-            <div style={{ color: entry.stream === 'stderr' ? '#f85149' : '#c9d1d9' }}>{entry.line}</div>
+            <div style={{ color: entry.stream === 'stderr' ? '#f85149' : '#c9d1d9' }}>
+              <LogLine line={entry.line} />
+            </div>
           ))}
         </div>
       </div>

frontend/src/pages/services/service-detail.tsx

@@ -15,16 +15,16 @@ import {
   Paper,
 } from '@furystack/shades-common-components'
 import { ObservableValue } from '@furystack/utils'
+import type { ServiceView, StackView } from 'common'
 import {
+  getServiceCwd,
   GitHubRepository,
   ServiceConfig,
   ServiceDefinition,
   ServiceStateHistory,
   ServiceStatus,
   StackDefinition,
 } from 'common'
-import type { ServiceView, StackView } from 'common'
-import { getServiceCwd } from 'common'
 
 import { navigate } from '../../utils/navigate.js'
 
@@ -440,12 +440,12 @@ type ServiceHistoryProps = {
   serviceId: string
 }
 
-type HistoryColumn = 'createdAt' | 'event' | 'triggeredBy' | 'triggerSource' | 'metadata'
+type HistoryColumn = 'createdAt' | 'event' | 'triggeredBy' | 'triggerSource' | 'metadata' | 'processUid'
 
 const ServiceHistory = Shade<ServiceHistoryProps>({
   shadowDomName: 'shade-service-history',
   render: (options) => {
-    const { props, useDisposable } = options
+    const { props, injector, useDisposable } = options
 
     const historyState = useCollectionSync(options, ServiceStateHistory, {
       filter: { serviceId: { $eq: props.serviceId } },
@@ -479,7 +479,7 @@ const ServiceHistory = Shade<ServiceHistoryProps>({
           <div style={{ opacity: '0.6', padding: '12px 0' }}>No history entries yet.</div>
         ) : (
           <DataGrid<ServiceStateHistory, HistoryColumn>
-            columns={['createdAt', 'event', 'triggeredBy', 'triggerSource', 'metadata']}
+            columns={['createdAt', 'event', 'triggeredBy', 'triggerSource', 'metadata', 'processUid']}
             findOptions={findOptions}
             styles={undefined}
             collectionService={collectionService}
@@ -489,6 +489,7 @@ const ServiceHistory = Shade<ServiceHistoryProps>({
               triggeredBy: () => <span>Triggered by</span>,
               triggerSource: () => <span>Source</span>,
               metadata: () => <span>Details</span>,
+              processUid: () => <span>Logs</span>,
             }}
             rowComponents={{
               createdAt: (entry) => <span>{new Date(entry.createdAt).toLocaleString()}</span>,
@@ -500,6 +501,17 @@ const ServiceHistory = Shade<ServiceHistoryProps>({
                   {entry.metadata ?? ''}
                 </span>
               ),
+              processUid: (entry) =>
+                entry.processUid ? (
+                  <Button
+                    size="small"
+                    onclick={() => navigate(injector, `/services/${props.serviceId}/logs/${entry.processUid}`)}
+                  >
+                    Show Logs
+                  </Button>
+                ) : (
+                  <span />
+                ),
             }}
           />
         )}

frontend/src/pages/services/service-logs.tsx

@@ -6,6 +6,7 @@ import { ServicesApiClient } from '../../services/api-clients/services-api-clien
 
 type ServiceLogsProps = {
   serviceId: string
+  processUid?: string
 }
 
 export const ServiceLogs = Shade<ServiceLogsProps>({
@@ -39,17 +40,19 @@ export const ServiceLogs = Shade<ServiceLogsProps>({
       <PageContainer>
         <PageHeader
           icon="📋"
-          title="Service Logs"
+          title={props.processUid ? 'Process Logs' : 'Service Logs'}
           actions={
             <div style={{ display: 'flex', gap: '8px' }}>
-              <Button
-                variant="outlined"
-                color="error"
-                onclick={() => void handleClearLogs()}
-                startIcon={<Icon icon={icons.trash} size="small" />}
-              >
-                Clear Logs
-              </Button>
+              {!props.processUid && (
+                <Button
+                  variant="outlined"
+                  color="error"
+                  onclick={() => void handleClearLogs()}
+                  startIcon={<Icon icon={icons.trash} size="small" />}
+                >
+                  Clear Logs
+                </Button>
+              )}
               <Button
                 variant="outlined"
                 onclick={() => history.back()}
@@ -61,7 +64,7 @@ export const ServiceLogs = Shade<ServiceLogsProps>({
           }
         />
         <Paper style={{ flex: '1', overflow: 'hidden' }}>
-          <LogViewer serviceId={props.serviceId} />
+          <LogViewer serviceId={props.serviceId} processUid={props.processUid} />
         </Paper>
       </PageContainer>
     )