[DevOverlay] Sync Terminal component with CodeFrame for Build Error

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx

@@ -9,6 +9,7 @@ import { getFrameSource } from '../../helpers/stack-frame'
 import { useOpenInEditor } from '../../helpers/use-open-in-editor'
 import { noop as css } from '../../helpers/noop-template'
 import { ExternalIcon } from '../../icons/external'
+import { FileIcon } from '../../icons/FileIcon'
 
 export type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }
 
@@ -156,17 +157,3 @@ export const CODE_FRAME_STYLES = css`
     margin-right: 6px;
   }
 `
-
-// TODO: Add more Icons (react, next, etc.)
-function FileIcon() {
-  return (
-    <svg width="16" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M14.5 7v7a2.5 2.5 0 0 1-2.5 2.5H4A2.5 2.5 0 0 1 1.5 14V.5h7.586a1 1 0 0 1 .707.293l4.414 4.414a1 1 0 0 1 .293.707V7zM13 7v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2h5v5h5zM9.5 2.621V5.5h2.879L9.5 2.621z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Terminal/EditorLink.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { useOpenInEditor } from '../../helpers/use-open-in-editor'
+import { noop as css } from '../../helpers/noop-template'
 
 type EditorLinkProps = {
   file: string
@@ -48,3 +48,27 @@ export function EditorLink({ file, isSourceFile, location }: EditorLinkProps) {
     </div>
   )
 }
+
+export const EDITOR_LINK_STYLES = css`
+  [data-with-open-in-editor-link] svg {
+    width: auto;
+    height: var(--size-font-small);
+    margin-left: var(--size-gap);
+  }
+  [data-with-open-in-editor-link] {
+    cursor: pointer;
+  }
+  [data-with-open-in-editor-link]:hover {
+    text-decoration: underline dotted;
+  }
+  [data-with-open-in-editor-link-import-trace] {
+    margin-left: var(--size-gap-double);
+  }
+  [data-with-open-in-editor-link-source-file] {
+    border-bottom: 1px solid var(--color-ansi-bright-black);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-break: anywhere;
+  }
+`

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Terminal/Terminal.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Terminal } from './Terminal'
+import { withShadowPortal } from '../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof Terminal> = {
+  component: Terminal,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof Terminal>
+
+export const SimpleTerminal: Story = {
+  args: {
+    content:
+      './app/page.tsx:10:5\n\u001b[31mError:\u001b[39m Something went wrong\n  at Home (./app/page.tsx:10:5)',
+  },
+}
+
+export const WithImportTrace: Story = {
+  args: {
+    content: `./components/Button.tsx:15:3
+ReactServerComponentsError: Failed to load component
+Import trace for requested module:
+./pages/index.tsx
+./components/Layout.tsx
+./components/Button.tsx`,
+  },
+}
+
+export const WithAnsiColors: Story = {
+  args: {
+    content: `./app/error.tsx:5:10
+\u001b[31m\u001b[1mError:\u001b[22m\u001b[39m Failed to compile
+\u001b[36m  console\u001b[39m.\u001b[33mlog\u001b[39m('Debug message')
+\u001b[32m✓\u001b[39m Success message
+\u001b[31m✕\u001b[39m Error message`,
+  },
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Terminal/Terminal.tsx

@@ -2,6 +2,11 @@ import Anser from 'next/dist/compiled/anser'
 import * as React from 'react'
 import { HotlinkedText } from '../hot-linked-text'
 import { EditorLink } from './EditorLink'
+import { ExternalIcon } from '../../icons/external'
+import { noop as css } from '../../helpers/noop-template'
+import { getFrameSource } from '../../helpers/stack-frame'
+import { useOpenInEditor } from '../../helpers/use-open-in-editor'
+import { FileIcon } from '../../icons/FileIcon'
 
 export type TerminalProps = { content: string }
 
@@ -70,16 +75,37 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
     })
   }, [source])
 
+  const open = useOpenInEditor({
+    file: file?.fileName,
+    lineNumber: file?.location?.line,
+    column: file?.location?.column,
+  })
+
+  const stackFrame = {
+    file: file?.fileName ?? null,
+    methodName: '',
+    arguments: [],
+    lineNumber: file?.location?.line ?? null,
+    column: file?.location?.column ?? null,
+  }
+
   return (
     <div data-nextjs-terminal>
-      {file && (
-        <EditorLink
-          isSourceFile
-          key={file.fileName}
-          file={file.fileName}
-          location={file.location}
-        />
-      )}
+      <div className="terminal-header">
+        <p
+          role="link"
+          onClick={open}
+          tabIndex={1}
+          title="Click to open in your editor"
+        >
+          <span>
+            <FileIcon />
+            {getFrameSource(stackFrame)} @{' '}
+            <HotlinkedText text={stackFrame.methodName} />
+          </span>
+          <ExternalIcon width={16} height={16} />
+        </p>
+      </div>
       <pre>
         {decoded.map((entry, index) => (
           <span
@@ -107,3 +133,62 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
     </div>
   )
 }
+
+export const TERMINAL_STYLES = css`
+  [data-nextjs-terminal] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    flex: 1 0 0;
+
+    background-color: var(--color-background-200);
+    overflow: hidden;
+    color: var(--color-gray-1000);
+    text-overflow: ellipsis;
+    font-family: var(--font-stack-monospace);
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .terminal-header {
+    border-top: 1px solid var(--color-gray-400);
+    border-bottom: 1px solid var(--color-gray-400);
+  }
+
+  [data-nextjs-terminal]::selection,
+  [data-nextjs-terminal] *::selection {
+    background-color: var(--color-ansi-selection);
+  }
+
+  [data-nextjs-terminal] * {
+    color: inherit;
+    background-color: transparent;
+    font-family: var(--font-stack-monospace);
+  }
+
+  [data-nextjs-terminal] > * {
+    margin: 0;
+    padding: calc(var(--size-gap) + var(--size-gap-half))
+      calc(var(--size-gap-double) + var(--size-gap-half));
+  }
+
+  [data-nextjs-terminal] > div > p {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    margin: 0;
+  }
+  [data-nextjs-terminal] > div > p:hover {
+    text-decoration: underline dotted;
+  }
+  [data-nextjs-terminal] div > pre {
+    overflow: hidden;
+    display: inline-block;
+  }
+
+  [data-nextjs-terminal] svg {
+    color: var(--color-gray-900);
+    margin-right: 6px;
+  }
+`

packages/next/src/client/components/react-dev-overlay/_experimental/internal/icons/FileIcon.tsx

@@ -0,0 +1,19 @@
+// TODO: Add more Icons (react, next, etc.)
+export function FileIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.5 7v7a2.5 2.5 0 0 1-2.5 2.5H4A2.5 2.5 0 0 1 1.5 14V.5h7.586a1 1 0 0 1 .707.293l4.414 4.414a1 1 0 0 1 .293.707V7zM13 7v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2h5v5h5zM9.5 2.621V5.5h2.879L9.5 2.621z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx

@@ -5,7 +5,7 @@ import { styles as bottomStacks } from '../components/Errors/error-overlay-botto
 import { styles as pagination } from '../components/Errors/error-overlay-pagination/error-overlay-pagination'
 import { styles as overlay } from '../components/Overlay/styles'
 import { styles as footer } from '../components/Errors/error-overlay-footer/error-overlay-footer'
-import { styles as terminal } from '../components/Terminal/styles'
+import { TERMINAL_STYLES } from '../components/Terminal/Terminal'
 import { styles as toast } from '../components/Toast'
 import { styles as versionStaleness } from '../components/VersionStalenessInfo/VersionStalenessInfo'
 import { styles as buildErrorStyles } from '../container/BuildError'
@@ -15,6 +15,7 @@ import { COPY_BUTTON_STYLES } from '../components/copy-button'
 import { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-stack-frame'
 import { styles as devToolsIndicator } from '../components/Errors/dev-tools-indicator/styles'
 import { noop as css } from '../helpers/noop-template'
+import { EDITOR_LINK_STYLES } from '../components/Terminal/EditorLink'
 
 export function ComponentStyles() {
   return (
@@ -30,7 +31,8 @@ export function ComponentStyles() {
         ${bottomStacks}
         ${pagination}
         ${CODE_FRAME_STYLES}
-        ${terminal}
+        ${TERMINAL_STYLES}
+        ${EDITOR_LINK_STYLES}
         ${buildErrorStyles}
         ${containerErrorStyles}
         ${containerRuntimeErrorStyles}