clean up styles

index.html

···
         background: var(--bg);
         color: var(--text);
       }
-      header {
-        height: 44px;
-        padding: 0 16px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        border-bottom: 1px solid var(--border);
-        background: var(--surface);
-        flex-shrink: 0;
-        position: relative;
-        z-index: 100;
-      }
-      h1 {
-        margin: 0;
-        font-size: 13px;
-        font-weight: 600;
-        color: var(--text);
-      }
-      .example-select-wrapper {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding-left: 16px;
-        border-left: 1px solid var(--border);
-      }
-      .example-select-wrapper label {
-        font-size: 11px;
-        color: var(--text-dim);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-      header select {
-        -webkit-appearance: none;
-        appearance: none;
-        background:
-          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
-            no-repeat right 8px center,
-          linear-gradient(to bottom, #333, #2a2a2a);
-        border: 1px solid #555;
-        color: #fff;
-        padding: 5px 28px 5px 10px;
-        border-radius: 4px;
-        font-size: 13px;
-        font-weight: 500;
-        cursor: pointer;
-        min-width: 150px;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-      }
-      header select:hover {
-        border-color: #666;
-        background:
-          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
-            no-repeat right 8px center,
-          linear-gradient(to bottom, #3a3a3a, #333);
-      }
-      header select:focus {
-        outline: none;
-        border-color: #ffd54f;
-      }
-      header select option {
-        background: #2a2a2a;
-        color: #e0e0e0;
-        padding: 8px;
-        font-size: 13px;
-      }
-      header select option:hover,
-      header select option:checked {
-        background: #3a3a3a;
-        color: #ffd54f;
-      }
-      header .save-btn {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        color: var(--text);
-        padding: 5px 8px;
-        border-radius: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      header .save-btn:hover:not(:disabled) {
-        border-color: #444;
-        background: #2a2a2a;
-      }
-      header .save-btn:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-      header .embed-btn {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        color: var(--text);
-        padding: 5px 8px;
-        border-radius: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      header .embed-btn:hover:not(:disabled) {
-        border-color: #444;
-        background: #2a2a2a;
-      }
-      header .embed-btn:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-      /* Modal */
-      .modal-overlay {
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-      }
-      .modal {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 8px;
-        width: 90%;
-        max-width: 600px;
-        max-height: 80vh;
-        display: flex;
-        flex-direction: column;
-      }
-      .modal-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 16px;
-        border-bottom: 1px solid var(--border);
-      }
-      .modal-header h2 {
-        margin: 0;
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--text-bright);
-      }
-      .modal-close {
-        background: none;
-        border: none;
-        color: var(--text-dim);
-        font-size: 24px;
-        cursor: pointer;
-        padding: 0;
-        line-height: 1;
-      }
-      .modal-close:hover {
-        color: var(--text-bright);
-      }
-      .modal-body {
-        padding: 16px;
-        overflow: auto;
-      }
-      .modal-body p {
-        margin: 0 0 12px;
-        font-size: 13px;
-        color: var(--text);
-      }
-      .modal-body textarea {
-        width: 100%;
-        height: 250px;
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        color: var(--text);
-        font-family: var(--font-mono);
-        font-size: 12px;
-        padding: 12px;
-        resize: none;
-      }
-      .modal-body textarea:focus {
-        outline: none;
-        border-color: #555;
-      }
-      .modal-footer {
-        padding: 16px;
-        border-top: 1px solid var(--border);
-        display: flex;
-        justify-content: flex-end;
-      }
-      .copy-btn {
-        background: #ffd54f;
-        border: none;
-        color: #000;
-        padding: 8px 16px;
-        border-radius: 4px;
-        font-size: 13px;
-        font-weight: 500;
-        cursor: pointer;
-      }
-      .copy-btn:hover {
-        background: #ffe566;
-      }
-      .header-spacer {
-        flex: 1;
-      }
-      .build-switcher {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .build-switcher label {
-        font-size: 11px;
-        color: var(--text-dim);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-      .build-switcher .mode-select {
-        min-width: 70px;
-      }
-      .header-links {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding-right: 16px;
-        border-right: 1px solid var(--border);
-      }
-      .github-link,
-      .tangled-link {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--text-dim);
-        padding: 4px;
-        border-radius: 4px;
-        transition: color 0.15s;
-      }
-      .github-link:hover,
-      .tangled-link:hover {
-        color: var(--text-bright);
-      }
-      @media (max-width: 900px) {
-        .header-links {
-          display: none;
-        }
-      }
-      @media (max-width: 768px) {
-        header {
-          padding: 0 8px;
-          gap: 4px;
-        }
-        h1 {
-          font-size: 11px;
-        }
-        .header-spacer {
-          flex: 0;
-          min-width: 0;
-        }
-        .example-select-wrapper {
-          padding-left: 6px;
-          margin-left: 2px;
-          gap: 4px;
-        }
-        .example-select-wrapper label {
-          display: none;
-        }
-        header select,
-        header select:hover {
-          min-width: 0;
-          width: auto;
-          padding: 4px 20px 4px 6px;
-          font-size: 16px; /* Prevents iOS zoom */
-          background-position: right 4px center;
-        }
-        .build-switcher {
-          padding-left: 6px;
-          gap: 4px;
-          margin-left: auto;
-        }
-        .build-switcher label {
-          display: none;
-        }
-        .build-switcher select {
-          min-width: 0;
-        }
-        main {
-          grid-template-columns: 100%;
-          grid-template-rows: 1fr 1fr 1fr 1fr;
-        }
-        .pane:nth-child(1),
-        .pane:nth-child(3) {
-          border-right: none;
-        }
-        .pane {
-          border-bottom: 1px solid var(--border);
-        }
-        /* Prevent iOS zoom on all form elements */
-        input,
-        textarea,
-        select {
-          font-size: 16px !important;
-        }
-        .raw-input-payload {
-          font-size: 16px !important;
-        }
-        /* Playback controls responsive */
-        .playback-container {
-          padding: 6px 8px;
-          gap: 6px;
-        }
-        .playback-controls {
-          gap: 2px;
-        }
-        .control-btn {
-          width: 26px;
-          height: 26px;
-        }
-        .step-info {
-          min-width: 50px;
-          font-size: 10px;
-        }
-      }
-      @media (max-width: 480px) {
-        header {
-          padding: 0 6px;
-          gap: 3px;
-        }
-        h1 {
-          font-size: 10px;
-        }
-        header select {
-          padding: 3px 18px 3px 5px;
-          font-size: 16px;
-          max-width: 80px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-        .example-select-wrapper select {
-          max-width: 110px;
-        }
-        .example-select-wrapper {
-          padding-left: 4px;
-          margin-left: 0;
-          border-left: none;
-        }
-        .build-switcher {
-          padding-left: 4px;
-          border-left: none;
-        }
-        /* Playback: hide slider and status, keep buttons compact */
-        .step-slider,
-        .step-info {
-          display: none;
-        }
-        .playback-container {
-          padding: 4px 6px;
-          gap: 4px;
-        }
-        .control-btn {
-          width: 24px;
-          height: 24px;
-        }
-        .control-btn svg {
-          width: 14px;
-          height: 14px;
-        }
-      }
-      @media (max-width: 360px) {
-        h1 {
-          display: none;
-        }
-        header select {
-          max-width: 75px;
-        }
-      }
-      main {
-        flex: 1;
-        min-height: 0;
-        display: grid;
-        grid-template-columns: 50% 50%;
-        grid-template-rows: 50% 50%;
-        overflow: hidden;
-      }
-      .pane {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      /* Left column border */
-      .pane:nth-child(1),
-      .pane:nth-child(3) {
-        border-right: 1px solid var(--border);
-      }
-      /* Top row border */
-      .pane:nth-child(1),
-      .pane:nth-child(2) {
-        border-bottom: 1px solid var(--border);
-      }
-      .pane-header {
-        padding: 6px 12px;
-        font-size: 10px;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        color: var(--text-dim);
-        flex-shrink: 0;
-        border-bottom: 1px solid var(--border);
-      }
-      .editor-container {
-        flex: 1;
-        min-height: 0;
-        position: relative;
-        overflow: hidden;
-        background: var(--bg);
-      }
-      .editor-container .cm-editor {
-        position: absolute !important;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: auto !important;
-        background: transparent;
-      }
-      .editor-container .cm-editor .cm-scroller {
-        overflow: auto !important;
-      }
-      .flight-output {
-        flex: 1;
-        min-height: 0;
-        margin: 0;
-        padding: 12px;
-        font-family: var(--font-mono);
-        font-size: 12px;
-        line-height: 1.6;
-        overflow: auto;
-        white-space: pre-wrap;
-        word-break: break-all;
-        background: var(--bg);
-        color: var(--text-dim);
-      }
-      .flight-output.error {
-        color: #e57373;
-      }
-      .action-args {
-        color: var(--text);
-      }
-
-      /* Flight log */
-      .flight-log {
-        flex: 1;
-        overflow: auto;
-        padding: 8px;
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-      }
-      .log-entry {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-        transition: all 0.15s ease;
-        border-left: 3px solid #555;
-      }
-      .log-entry + .log-entry {
-        margin-top: 12px;
-      }
-      .log-entry.active {
-        border-left-color: #ffd54f;
-      }
-      .log-entry.done-entry {
-        border-left-color: #555;
-        opacity: 0.8;
-      }
-      .log-entry.pending-entry {
-        border-left-color: #333;
-        opacity: 0.4;
-      }
-      .log-entry-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        padding: 6px 10px;
-        font-size: 11px;
-        border-bottom: 1px solid var(--border);
-      }
-      .log-entry-direction {
-        font-family: var(--font-mono);
-        font-weight: 600;
-        color: var(--text-dim);
-      }
-      .log-entry.active .log-entry-direction {
-        color: #ffd54f;
-      }
-      .log-entry-args {
-        padding: 6px 10px;
-        font-family: var(--font-mono);
-        font-size: 11px;
-        border-bottom: 1px solid var(--border);
-        color: var(--text-dim);
-      }
-      .action-args-label {
-        margin-right: 6px;
-        color: var(--text-dim);
-      }
-      .log-entry-label {
-        color: var(--text);
-        font-weight: 500;
-      }
-      .log-entry-count {
-        margin-left: auto;
-        color: var(--text-dim);
-        font-family: var(--font-mono);
-      }
-      .log-entry-content {
-        margin: 0;
-        padding: 8px 10px;
-        font-family: var(--font-mono);
-        font-size: 11px;
-        line-height: 1.5;
-        white-space: pre-wrap;
-        word-break: break-all;
-      }
-      .log-entry .action-args {
-        color: #81c784;
-      }
-
-      /* Action request (args display) */
-      .log-entry-request {
-        padding: 8px 10px;
-        background: rgba(0, 0, 0, 0.2);
-        border-bottom: 1px solid var(--border);
-      }
-      .log-entry-request-args {
-        margin: 0;
-        font-family: var(--font-mono);
-        font-size: 11px;
-        line-height: 1.4;
-        color: #81c784;
-        white-space: pre-wrap;
-        word-break: break-all;
-      }
-
-      /* Log entry preview (embedded scrubber) */
-      .log-entry-preview {
-        border-top: 1px solid var(--border);
-        padding: 8px;
-      }
-      .log-entry-preview-controls {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 8px;
-      }
-      .log-step-btn {
-        background: var(--border);
-        border: none;
-        color: #ffd54f;
-        width: 24px;
-        height: 24px;
-        border-radius: 3px;
-        cursor: pointer;
-        font-size: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .log-step-btn:hover:not(:disabled) {
-        background: #444;
-      }
-      .log-step-btn:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-      .log-entry-slider {
-        flex: 1;
-        height: 4px;
-        -webkit-appearance: none;
-        appearance: none;
-        background: var(--border);
-        border-radius: 2px;
-        outline: none;
-      }
-      .log-entry-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 14px;
-        height: 14px;
-        background: #ffd54f;
-        border-radius: 50%;
-        cursor: pointer;
-      }
-      .log-entry-slider::-moz-range-thumb {
-        width: 14px;
-        height: 14px;
-        background: #ffd54f;
-        border-radius: 50%;
-        cursor: pointer;
-        border: none;
-      }
-      .value-pending {
-        color: #999;
-        font-style: italic;
-        font-size: 11px;
-      }
-      .value-loading {
-        color: #999;
-        font-style: italic;
-      }
-      .log-entry-step-info {
-        font-size: 11px;
-        color: var(--text-dim);
-        font-family: var(--font-mono);
-      }
-      .log-entry-flight-lines {
-        margin: 0;
-        padding: 6px;
-        background: var(--bg);
-        border-radius: 3px;
-        font-size: 11px;
-        line-height: 1.4;
-        overflow: auto;
-      }
-      .log-entry-flight-lines .flight-line {
-        display: block;
-        padding: 6px 8px;
-        margin-bottom: 3px;
-        border-radius: 4px;
-        word-break: break-all;
-        white-space: pre-wrap;
-        border-left: 2px solid transparent;
-        transition: all 0.15s ease;
-      }
-      .log-entry-flight-lines .flight-line:last-child {
-        margin-bottom: 0;
-      }
-      .log-entry-flight-lines .line-done {
-        color: #999;
-        background: rgba(255, 255, 255, 0.03);
-        border-left-color: #555;
-      }
-      .log-entry-flight-lines .line-next {
-        color: #e0e0e0;
-        background: rgba(255, 213, 79, 0.12);
-        border-left-color: #ffd54f;
-      }
-      .log-entry-flight-lines .line-pending {
-        color: #444;
-        background: transparent;
-        border-left-color: #333;
-        opacity: 0.4;
-      }
-
-      /* Split layout: left=stream (scrolls), right=tree (dictates height) */
-      .log-entry-split {
-        display: flex;
-        gap: 8px;
-        align-items: stretch;
-      }
-      .log-entry-split .log-entry-flight-lines-wrapper {
-        flex: 1;
-        min-width: 0;
-        position: relative;
-        min-height: 150px;
-      }
-      .log-entry-split .log-entry-flight-lines {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-      .log-entry-split .log-entry-tree {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-      }
-      /* Tree view in log entry - expands to fill height */
-      .log-entry-tree {
-        flex: 1;
-        min-width: 0;
-        border-radius: 4px;
-        overflow: auto;
-        border: 1px solid var(--border);
-      }
-      .log-entry-tree:has(.flight-tree) {
-        background: #000;
-      }
-      .log-entry-tree.full-width {
-        flex: none;
-        width: 100%;
-      }
-      .log-entry-tree .flight-tree {
-        padding: 8px;
-        font-size: 11px;
-        line-height: 1.6;
-      }
-      .jsx-output {
-        margin: 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-        color: var(--text);
-      }
-      .value-content {
-        background: #f8f8f8;
-        color: #111;
-        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-        padding: 8px;
-        border-radius: 3px;
-        margin: -8px;
-      }
-      .value-string {
-        color: #22863a;
-      }
-      .value-number {
-        color: #005cc5;
-      }
-      .value-boolean {
-        color: #d73a49;
-      }
-      .value-null,
-      .value-undefined {
-        color: #6a737d;
-        font-style: italic;
-      }
-      .value-key {
-        color: #005cc5;
-      }
-      .value-indent {
-        display: block;
-        padding-left: 16px;
-      }
-      .value-array-item,
-      .value-object-entry {
-        display: block;
-      }
-      .value-react-element {
-        display: inline;
-        background: rgba(0, 0, 0, 0.04);
-        padding: 2px 4px;
-        border-radius: 3px;
-      }
-      .value-error {
-        color: #e57373;
-        font-style: italic;
-      }
-      .value-loading {
-        color: var(--text-dim);
-        font-style: italic;
-      }
-
-      /* Flight Tree View */
-      .flight-tree {
-        flex: 1;
-        min-height: 0;
-        padding: 12px;
-        font-family: var(--font-mono);
-        font-size: 12px;
-        line-height: 1.8;
-        overflow: auto;
-        background: var(--bg);
-      }
-      .tree-empty {
-        color: var(--text-dim);
-        font-style: italic;
-      }
-      .tree-element,
-      .tree-client-component,
-      .tree-suspense,
-      .tree-lazy {
-        margin-left: 0;
-      }
-      .tree-children {
-        margin-left: 16px;
-        border-left: 1px solid #333;
-        padding-left: 12px;
-      }
-      .tree-tag {
-        color: #e06c75;
-      }
-      .tree-client-tag {
-        color: #c678dd;
-      }
-      .tree-client-ref {
-        color: #5c6370;
-        font-size: 10px;
-      }
-      .tree-react-tag {
-        color: #e5c07b;
-      }
-      .tree-pending {
-        display: inline-block;
-        color: #64b5f6;
-        background: rgba(100, 181, 246, 0.15);
-        padding: 2px 8px;
-        border-radius: 10px;
-        border: 1px solid rgba(100, 181, 246, 0.4);
-        font-size: 10px;
-        font-weight: 500;
-        letter-spacing: 0.5px;
-        animation: pending-pulse 2s ease-in-out infinite;
-      }
-      @keyframes pending-pulse {
-        0%,
-        100% {
-          opacity: 0.7;
-        }
-        50% {
-          opacity: 1;
-        }
-      }
-      .tree-string {
-        color: #98c379;
-      }
-      .tree-number {
-        color: #d19a66;
-      }
-      .tree-boolean {
-        color: #56b6c2;
-      }
-      .tree-null,
-      .tree-undefined {
-        color: #5c6370;
-        font-style: italic;
-      }
-      .tree-key,
-      .tree-prop-name {
-        color: #61afef;
-      }
-      .tree-ref {
-        color: #c678dd;
-      }
-      .tree-object {
-        color: var(--text-dim);
-      }
-      .tree-array {
-        /* Arrays render children inline */
-      }
-      .tree-props {
-        color: var(--text-dim);
-      }
-      .tree-prop {
-        color: var(--text-dim);
-      }
-      .tree-error {
-        display: inline-block;
-        color: #e57373;
-        background: rgba(229, 115, 115, 0.15);
-        padding: 2px 8px;
-        border-radius: 10px;
-        border: 1px solid rgba(229, 115, 115, 0.4);
-        font-size: 10px;
-        font-weight: 500;
-        letter-spacing: 0.5px;
-      }
-      .tree-pending-tag {
-        color: #ffd54f;
-        background: rgba(255, 213, 79, 0.1);
-        padding: 1px 4px;
-        border-radius: 3px;
-        border: 1px solid rgba(255, 213, 79, 0.3);
-      }
-      .tree-error-keyword {
-        color: #c678dd;
-        font-weight: 600;
-      }
-      .tree-error-message {
-        color: #e57373;
-      }
-      .tree-function {
-        color: #61afef;
-        font-style: italic;
-      }
-      .tree-placeholder {
-        color: #444;
-        font-style: italic;
-      }
-
-      /* Playback controls */
-      .playback-container {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 8px 12px;
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-      }
-      .playback-controls {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-      .control-btn {
-        background: transparent;
-        border: none;
-        color: var(--text);
-        width: 30px;
-        height: 30px;
-        border-radius: 4px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.1s;
-      }
-      .control-btn svg {
-        width: 16px;
-        height: 16px;
-      }
-      .control-btn:hover:not(:disabled) {
-        background: var(--border);
-        color: var(--text-bright);
-      }
-      .control-btn:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-      .control-btn.play-btn.playing {
-        color: #ffd54f;
-      }
-      .control-btn.step-btn {
-        background: #ffd54f;
-        color: #000;
-        animation: pulse-step 1.5s ease-in-out infinite;
-      }
-      .control-btn.step-btn:hover:not(:disabled) {
-        background: #ffe566;
-        color: #000;
-        animation: none;
-      }
-      .control-btn.step-btn:disabled {
-        background: transparent;
-        color: var(--text);
-        animation: none;
-      }
-      @keyframes pulse-step {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.7;
-        }
-      }
-      .step-slider {
-        flex: 1;
-        height: 4px;
-        -webkit-appearance: none;
-        appearance: none;
-        background: var(--border);
-        border-radius: 2px;
-        outline: none;
-      }
-      .step-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 14px;
-        height: 14px;
-        background: #ffd54f;
-        border-radius: 50%;
-        cursor: pointer;
-        border: none;
-      }
-      .step-slider::-moz-range-thumb {
-        width: 14px;
-        height: 14px;
-        background: #ffd54f;
-        border-radius: 50%;
-        cursor: pointer;
-        border: none;
-      }
-      .step-slider:disabled {
-        opacity: 0.5;
-      }
-      .step-info {
-        font-size: 11px;
-        color: var(--text-dim);
-        font-family: var(--font-mono);
-        min-width: 60px;
-        text-align: right;
-      }
-
-      /* Preview pane */
-      .preview-container {
-        flex: 1;
-        padding: 20px;
-        background: #fff;
-        color: #111;
-        overflow: auto;
-        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-        font-size: 16px;
-        line-height: 1.5;
-      }
-      .preview-container h1 {
-        font-size: 28px;
-        color: #000;
-        margin: 0 0 16px;
-      }
-      .preview-container h2 {
-        font-size: 22px;
-        color: #000;
-      }
-      .preview-container h3 {
-        font-size: 18px;
-        color: #000;
-      }
-      .preview-container p {
-        color: #111;
-        margin: 8px 0;
-      }
-      .preview-container button {
-        background: #333;
-        color: #fff;
-        border: none;
-        padding: 8px 14px;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-      }
-      .preview-container button:hover {
-        background: #444;
-      }
-      .preview-container .empty {
-        color: #999;
-        font-style: italic;
-      }
-      .preview-container .empty.error {
-        color: #c0392b;
-      }
-      .flight-output .empty {
-        color: var(--text-dim);
-        font-style: italic;
-      }
-      /* Pulsing dots for empty/waiting states */
-      .empty::after {
-        content: "";
-        animation: none;
-      }
-      .waiting-dots::after {
-        content: "...";
-        animation: pulse 1.5s ease-in-out infinite;
-      }
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: 0.3;
-        }
-        50% {
-          opacity: 1;
-        }
-      }
-
-      /* Raw input form */
-      .add-raw-btn-wrapper {
-        display: flex;
-        justify-content: center;
-        margin-top: 8px;
-      }
-      .add-raw-btn {
-        width: 24px;
-        height: 24px;
-        padding: 0;
-        background: var(--border);
-        border: 1px solid #444;
-        border-radius: 50%;
-        color: var(--text-dim);
-        cursor: pointer;
-        font-size: 14px;
-        line-height: 22px;
-        transition: all 0.15s;
-      }
-      .add-raw-btn:hover {
-        background: #3a3a3a;
-        border-color: #666;
-        color: var(--text);
-      }
-      .raw-input-form {
-        margin-top: 8px;
-        padding: 10px;
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 4px;
-      }
-      .raw-input-action {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 100%;
-        padding: 5px 28px 5px 10px;
-        margin-bottom: 8px;
-        background:
-          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
-            no-repeat right 8px center,
-          linear-gradient(to bottom, #333, #2a2a2a);
-        border: 1px solid #555;
-        border-radius: 4px;
-        color: #fff;
-        font-size: 12px;
-        cursor: pointer;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-      }
-      .raw-input-action:hover {
-        border-color: #666;
-        background:
-          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
-            no-repeat right 8px center,
-          linear-gradient(to bottom, #3a3a3a, #333);
-      }
-      .raw-input-action:focus {
-        outline: none;
-        border-color: #ffd54f;
-      }
-      .raw-input-payload {
-        width: 100%;
-        padding: 8px;
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: 3px;
-        color: var(--text);
-        font-family: var(--font-mono);
-        font-size: 11px;
-        resize: vertical;
-        min-height: 100px;
-      }
-      .raw-input-payload:focus {
-        outline: none;
-        border-color: #555;
-      }
-      .raw-input-buttons {
-        display: flex;
-        gap: 8px;
-        margin-top: 8px;
-      }
-      .raw-input-buttons button {
-        padding: 5px 12px;
-        border-radius: 3px;
-        font-size: 11px;
-        cursor: pointer;
-      }
-      .raw-input-buttons button:first-child {
-        background: #ffd54f;
-        border: none;
-        color: #000;
-      }
-      .raw-input-buttons button:first-child:disabled {
-        background: #555;
-        color: #888;
-        cursor: not-allowed;
-      }
-      .raw-input-buttons button:last-child {
-        background: transparent;
-        border: 1px solid var(--border);
-        color: var(--text-dim);
-      }
-      .raw-input-buttons button:last-child:hover {
-        border-color: #555;
-        color: var(--text);
-      }
-      .log-entry-header-right {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .delete-entry-btn {
-        background: transparent;
-        border: none;
-        color: var(--text-dim);
-        cursor: pointer;
-        font-size: 14px;
-        padding: 0 4px;
-        line-height: 1;
-        opacity: 0.5;
-        transition:
-          opacity 0.15s,
-          color 0.15s;
-      }
-      .delete-entry-btn:hover {
-        opacity: 1;
-        color: #e57373;
-      }
     </style>
     <!-- Privacy-friendly analytics by Plausible -->
     <script async src="https://plausible.io/js/pa-CtwoQWR5DSFU93v-DPr1p.js"></script>

src/client/embed.tsx

···
 import "../shared/webpack-shim.ts";
 import "../shared/polyfill.ts";
 
-import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
-import { Workspace } from "./ui/Workspace.tsx";
-import "./styles/workspace.css";
-
-const DEFAULT_SERVER = `export default function App() {
-  return <h1>RSC Explorer</h1>;
-}`;
-
-const DEFAULT_CLIENT = `'use client'
-
-export function Button({ children }) {
-  return <button>{children}</button>;
-}`;
-
-type CodeState = {
-  server: string;
-  client: string;
-};
-
-type EmbedInitMessage = {
-  type: "rsc-embed:init";
-  code?: {
-    server?: string;
-    client?: string;
-  };
-  showFullscreen?: boolean;
-};
-
-type EmbedReadyMessage = {
-  type: "rsc-embed:ready";
-};
-
-type EmbedCodeChangedMessage = {
-  type: "rsc-embed:code-changed";
-  code: {
-    server: string;
-    client: string;
-  };
-};
-
-function isEmbedInitMessage(data: unknown): data is EmbedInitMessage {
-  return (
-    typeof data === "object" &&
-    data !== null &&
-    (data as { type?: string }).type === "rsc-embed:init"
-  );
-}
-
-function EmbedApp(): React.ReactElement | null {
-  const [code, setCode] = useState<CodeState | null>(null);
-  const [showFullscreen, setShowFullscreen] = useState(false);
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent<unknown>): void => {
-      const { data } = event;
-      if (isEmbedInitMessage(data)) {
-        setCode({
-          server: (data.code?.server ?? DEFAULT_SERVER).trim(),
-          client: (data.code?.client ?? DEFAULT_CLIENT).trim(),
-        });
-        if (data.showFullscreen !== false) {
-          setShowFullscreen(true);
-        }
-      }
-    };
+import { EmbedApp } from "./ui/EmbedApp.tsx";
 
-    window.addEventListener("message", handleMessage);
-
-    if (window.parent !== window) {
-      const readyMessage: EmbedReadyMessage = { type: "rsc-embed:ready" };
-      window.parent.postMessage(readyMessage, "*");
-    }
-
-    return () => window.removeEventListener("message", handleMessage);
-  }, []);
-
-  const handleCodeChange = (server: string, client: string): void => {
-    if (window.parent !== window) {
-      const changedMessage: EmbedCodeChangedMessage = {
-        type: "rsc-embed:code-changed",
-        code: { server, client },
-      };
-      window.parent.postMessage(changedMessage, "*");
-    }
-  };
-
-  const getFullscreenUrl = (): string => {
-    if (!code) return "#";
-    const json = JSON.stringify({ server: code.server, client: code.client });
-    const encoded = encodeURIComponent(btoa(unescape(encodeURIComponent(json))));
-    return `https://rscexplorer.dev/?c=${encoded}`;
-  };
-
-  if (!code) {
-    return null;
-  }
-
-  return (
-    <>
-      {showFullscreen && (
-        <div className="embed-header">
-          <span className="embed-title">RSC Explorer</span>
-          <a
-            href={getFullscreenUrl()}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="embed-fullscreen-link"
-            title="Open in RSC Explorer"
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
-            </svg>
-          </a>
-        </div>
-      )}
-      <Workspace
-        key={`${code.server}:${code.client}`}
-        initialServerCode={code.server}
-        initialClientCode={code.client}
-        onCodeChange={handleCodeChange}
-      />
-    </>
-  );
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-  const container = document.getElementById("embed-root");
-  if (!container) {
-    throw new Error("Could not find #embed-root element");
-  }
-  const root = createRoot(container);
-  root.render(<EmbedApp />);
-});
+const container = document.getElementById("embed-root")!;
+const root = createRoot(container);
+root.render(<EmbedApp />);

src/client/styles/workspace.css

···
-/* Workspace styles - shared between main app and embed */
-
-/* Embed header */
-.embed-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  height: 32px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.embed-title {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-dim);
-  letter-spacing: 0.3px;
-}
-.embed-fullscreen-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  margin-right: -10px;
-  border-radius: 4px;
-  color: var(--text-dim);
-  text-decoration: none;
-  transition: all 0.15s;
-}
-.embed-fullscreen-link:hover {
-  background: var(--border);
-  color: var(--text-bright);
-}
-
-main {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
-  grid-template-areas:
-    "server flight"
-    "client preview";
-  overflow: hidden;
-}
-/* Grid area assignments */
-.pane.editor-server {
-  grid-area: server;
-}
-.pane.editor-client {
-  grid-area: client;
-}
-.pane.flight-pane {
-  grid-area: flight;
-}
-.pane.preview-pane {
-  grid-area: preview;
-}
-.pane {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-/* Left column border */
-.pane.editor-server,
-.pane.editor-client {
-  border-right: 1px solid var(--border);
-}
-/* Top row border */
-.pane.editor-server,
-.pane.flight-pane {
-  border-bottom: 1px solid var(--border);
-}
-.pane-header {
-  padding: 6px 12px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--text-dim);
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border);
-}
-.editor-container {
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  overflow: hidden;
-  background: var(--bg);
-}
-.editor-container .cm-editor {
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: auto !important;
-  background: transparent;
-}
-.editor-container .cm-editor .cm-scroller {
-  overflow: auto !important;
-}
-.flight-output {
-  flex: 1;
-  min-height: 0;
-  margin: 0;
-  padding: 12px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  overflow: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
-  background: var(--bg);
-  color: var(--text-dim);
-}
-.flight-output.error {
-  color: #e57373;
-}
-.action-args {
-  color: var(--text);
-}
-
-/* Flight log */
-.flight-log {
-  flex: 1;
-  overflow: auto;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.log-entry {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  transition: all 0.15s ease;
-  border-left: 3px solid #555;
-}
-.log-entry + .log-entry {
-  margin-top: 12px;
-}
-.log-entry.active {
-  border-left-color: #ffd54f;
-}
-.log-entry.done-entry {
-  border-left-color: #555;
-  opacity: 0.8;
-}
-.log-entry.pending-entry {
-  border-left-color: #333;
-  opacity: 0.4;
-}
-.log-entry-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 6px 10px;
-  font-size: 11px;
-  border-bottom: 1px solid var(--border);
-}
-.log-entry-direction {
-  font-family: var(--font-mono);
-  font-weight: 600;
-  color: var(--text-dim);
-}
-.log-entry.active .log-entry-direction {
-  color: #ffd54f;
-}
-.log-entry-args {
-  padding: 6px 10px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-dim);
-}
-.action-args-label {
-  margin-right: 6px;
-  color: var(--text-dim);
-}
-.log-entry-label {
-  color: var(--text);
-  font-weight: 500;
-}
-.log-entry-count {
-  margin-left: auto;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-}
-.log-entry-content {
-  margin: 0;
-  padding: 8px 10px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-.log-entry .action-args {
-  color: #81c784;
-}
-
-/* Action request (args display) */
-.log-entry-request {
-  padding: 8px 10px;
-  background: rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid var(--border);
-}
-.log-entry-request-args {
-  margin: 0;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.4;
-  color: #81c784;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-/* Log entry preview (embedded scrubber) */
-.log-entry-preview {
-  border-top: 1px solid var(--border);
-  padding: 8px;
-}
-.log-entry-preview-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.log-step-btn {
-  background: var(--border);
-  border: none;
-  color: #ffd54f;
-  width: 24px;
-  height: 24px;
-  border-radius: 3px;
-  cursor: pointer;
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.log-step-btn:hover:not(:disabled) {
-  background: #444;
-}
-.log-step-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.log-entry-slider {
-  flex: 1;
-  height: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: var(--border);
-  border-radius: 2px;
-  outline: none;
-}
-.log-entry-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  background: #ffd54f;
-  border-radius: 50%;
-  cursor: pointer;
-}
-.log-entry-slider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: #ffd54f;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-.value-pending {
-  color: #999;
-  font-style: italic;
-  font-size: 11px;
-}
-.value-loading {
-  color: #999;
-  font-style: italic;
-}
-.log-entry-step-info {
-  font-size: 11px;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-}
-.log-entry-flight-lines {
-  margin: 0;
-  padding: 6px;
-  background: var(--bg);
-  border-radius: 3px;
-  font-size: 11px;
-  line-height: 1.4;
-  overflow: auto;
-}
-.log-entry-flight-lines .flight-line {
-  display: block;
-  padding: 6px 8px;
-  margin-bottom: 3px;
-  border-radius: 4px;
-  word-break: break-all;
-  white-space: pre-wrap;
-  border-left: 2px solid transparent;
-  transition: all 0.15s ease;
-}
-.log-entry-flight-lines .flight-line:last-child {
-  margin-bottom: 0;
-}
-.log-entry-flight-lines .line-done {
-  color: #999;
-  background: rgba(255, 255, 255, 0.03);
-  border-left-color: #555;
-}
-.log-entry-flight-lines .line-next {
-  color: #e0e0e0;
-  background: rgba(255, 213, 79, 0.12);
-  border-left-color: #ffd54f;
-}
-.log-entry-flight-lines .line-pending {
-  color: #444;
-  background: transparent;
-  border-left-color: #333;
-  opacity: 0.4;
-}
-
-/* Split layout: left=stream (scrolls), right=tree (dictates height) */
-.log-entry-split {
-  display: flex;
-  gap: 8px;
-  align-items: stretch;
-}
-.log-entry-split .log-entry-flight-lines-wrapper {
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  min-height: 150px;
-}
-.log-entry-split .log-entry-flight-lines {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.log-entry-split .log-entry-tree {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-/* Tree view in log entry - expands to fill height */
-.log-entry-tree {
-  flex: 1;
-  min-width: 0;
-  border-radius: 4px;
-  overflow: auto;
-  border: 1px solid var(--border);
-}
-.log-entry-tree:has(.flight-tree) {
-  background: #000;
-}
-.log-entry-tree.full-width {
-  flex: none;
-  width: 100%;
-}
-.log-entry-tree .flight-tree {
-  padding: 8px;
-  font-size: 11px;
-  line-height: 1.6;
-}
-.jsx-output {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text);
-}
-.value-content {
-  background: #f8f8f8;
-  color: #111;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-  padding: 8px;
-  border-radius: 3px;
-  margin: -8px;
-}
-.value-string {
-  color: #22863a;
-}
-.value-number {
-  color: #005cc5;
-}
-.value-boolean {
-  color: #d73a49;
-}
-.value-null,
-.value-undefined {
-  color: #6a737d;
-  font-style: italic;
-}
-.value-key {
-  color: #005cc5;
-}
-.value-indent {
-  display: block;
-  padding-left: 16px;
-}
-.value-array-item,
-.value-object-entry {
-  display: block;
-}
-.value-react-element {
-  display: inline;
-  background: rgba(0, 0, 0, 0.04);
-  padding: 2px 4px;
-  border-radius: 3px;
-}
-.value-error {
-  color: #e57373;
-  font-style: italic;
-}
-.value-loading {
-  color: var(--text-dim);
-  font-style: italic;
-}
-
-/* Flight Tree View */
-.flight-tree {
-  flex: 1;
-  min-height: 0;
-  padding: 12px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.8;
-  overflow: auto;
-  background: var(--bg);
-}
-.tree-empty {
-  color: var(--text-dim);
-  font-style: italic;
-}
-.tree-element,
-.tree-client-component,
-.tree-suspense,
-.tree-lazy {
-  margin-left: 0;
-}
-.tree-children {
-  margin-left: 16px;
-  border-left: 1px solid #333;
-  padding-left: 12px;
-}
-.tree-tag {
-  color: #e06c75;
-}
-.tree-client-tag {
-  color: #c678dd;
-}
-.tree-client-ref {
-  color: #5c6370;
-  font-size: 10px;
-}
-.tree-react-tag {
-  color: #e5c07b;
-}
-.tree-pending {
-  display: inline-block;
-  color: #64b5f6;
-  background: rgba(100, 181, 246, 0.15);
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: 1px solid rgba(100, 181, 246, 0.4);
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-  animation: pending-pulse 2s ease-in-out infinite;
-}
-@keyframes pending-pulse {
-  0%,
-  100% {
-    opacity: 0.7;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-.tree-string {
-  color: #98c379;
-}
-.tree-number {
-  color: #d19a66;
-}
-.tree-boolean {
-  color: #56b6c2;
-}
-.tree-null,
-.tree-undefined {
-  color: #5c6370;
-  font-style: italic;
-}
-.tree-key,
-.tree-prop-name {
-  color: #61afef;
-}
-.tree-ref {
-  color: #c678dd;
-}
-.tree-object {
-  color: var(--text-dim);
-}
-.tree-array {
-  /* Arrays render children inline */
-}
-.tree-props {
-  color: var(--text-dim);
-}
-.tree-prop {
-  color: var(--text-dim);
-}
-.tree-error {
-  display: inline-block;
-  color: #e57373;
-  background: rgba(229, 115, 115, 0.15);
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: 1px solid rgba(229, 115, 115, 0.4);
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.5px;
-}
-.tree-pending-tag {
-  color: #ffd54f;
-  background: rgba(255, 213, 79, 0.1);
-  padding: 1px 4px;
-  border-radius: 3px;
-  border: 1px solid rgba(255, 213, 79, 0.3);
-}
-.tree-error-keyword {
-  color: #c678dd;
-  font-weight: 600;
-}
-.tree-error-message {
-  color: #e57373;
-}
-.tree-function {
-  color: #61afef;
-  font-style: italic;
-}
-.tree-placeholder {
-  color: #444;
-  font-style: italic;
-}
-
-/* Playback controls */
-.playback-container {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-}
-.playback-controls {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.control-btn {
-  background: transparent;
-  border: none;
-  color: var(--text);
-  width: 40px;
-  height: 40px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.1s;
-}
-.control-btn svg {
-  width: 20px;
-  height: 20px;
-}
-.control-btn:hover:not(:disabled) {
-  background: var(--border);
-  color: var(--text-bright);
-}
-.control-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.control-btn.play-btn.playing {
-  color: #ffd54f;
-}
-.control-btn.step-btn {
-  background: #ffd54f;
-  color: #000;
-  animation: pulse-step 1.5s ease-in-out infinite;
-}
-.control-btn.step-btn:hover:not(:disabled) {
-  background: #ffe566;
-  color: #000;
-  animation: none;
-}
-.control-btn.step-btn:disabled {
-  background: transparent;
-  color: var(--text);
-  animation: none;
-}
-@keyframes pulse-step {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.7;
-  }
-}
-.step-slider {
-  flex: 1;
-  height: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: var(--border);
-  border-radius: 2px;
-  outline: none;
-}
-.step-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  background: #ffd54f;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-.step-slider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  background: #ffd54f;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-.step-slider:disabled {
-  opacity: 0.5;
-}
-.step-info {
-  font-size: 11px;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-  min-width: 60px;
-  text-align: right;
-}
-
-/* Preview pane */
-.preview-container {
-  flex: 1;
-  padding: 20px;
-  background: #fff;
-  color: #111;
-  overflow: auto;
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-}
-.preview-container h1 {
-  font-size: 28px;
-  color: #000;
-  margin: 0 0 16px;
-}
-.preview-container h2 {
-  font-size: 22px;
-  color: #000;
-}
-.preview-container h3 {
-  font-size: 18px;
-  color: #000;
-}
-.preview-container p {
-  color: #111;
-  margin: 8px 0;
-}
-.preview-container button {
-  background: #333;
-  color: #fff;
-  border: none;
-  padding: 8px 14px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-.preview-container button:hover {
-  background: #444;
-}
-.preview-container .empty {
-  color: #999;
-  font-style: italic;
-}
-.preview-container .empty.error {
-  color: #c0392b;
-}
-.flight-output .empty {
-  color: var(--text-dim);
-  font-style: italic;
-}
-/* Pulsing dots for empty/waiting states */
-.empty::after {
-  content: "";
-  animation: none;
-}
-.waiting-dots::after {
-  content: "...";
-  animation: pulse 1.5s ease-in-out infinite;
-}
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.3;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-/* Raw input form */
-.add-raw-btn-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-.add-raw-btn {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background: var(--border);
-  border: 1px solid #444;
-  border-radius: 50%;
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 22px;
-  transition: all 0.15s;
-}
-.add-raw-btn:hover {
-  background: #3a3a3a;
-  border-color: #666;
-  color: var(--text);
-}
-.raw-input-form {
-  margin-top: 8px;
-  padding: 10px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-}
-.raw-input-action {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  padding: 5px 28px 5px 10px;
-  margin-bottom: 8px;
-  background:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
-      no-repeat right 8px center,
-    linear-gradient(to bottom, #333, #2a2a2a);
-  border: 1px solid #555;
-  border-radius: 4px;
-  color: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-.raw-input-action:hover {
-  border-color: #666;
-  background:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
-      no-repeat right 8px center,
-    linear-gradient(to bottom, #3a3a3a, #333);
-}
-.raw-input-action:focus {
-  outline: none;
-  border-color: #ffd54f;
-}
-.raw-input-payload {
-  width: 100%;
-  padding: 8px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  resize: vertical;
-  min-height: 100px;
-}
-.raw-input-payload:focus {
-  outline: none;
-  border-color: #555;
-}
-.raw-input-buttons {
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-}
-.raw-input-buttons button {
-  padding: 5px 12px;
-  border-radius: 3px;
-  font-size: 11px;
-  cursor: pointer;
-}
-.raw-input-buttons button:first-child {
-  background: #ffd54f;
-  border: none;
-  color: #000;
-}
-.raw-input-buttons button:first-child:disabled {
-  background: #555;
-  color: #888;
-  cursor: not-allowed;
-}
-.raw-input-buttons button:last-child {
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-dim);
-}
-.raw-input-buttons button:last-child:hover {
-  border-color: #555;
-  color: var(--text);
-}
-.log-entry-header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.delete-entry-btn {
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 4px;
-  line-height: 1;
-  opacity: 0.5;
-  transition:
-    opacity 0.15s,
-    color 0.15s;
-}
-.delete-entry-btn:hover {
-  opacity: 1;
-  color: #e57373;
-}
-
-/* Responsive - mobile */
-@media (max-width: 768px) {
-  /* Keep 4-grid layout on mobile */
-  /* Prevent iOS zoom on all form elements */
-  input,
-  textarea,
-  select {
-    font-size: 16px !important;
-  }
-  .raw-input-payload {
-    font-size: 16px !important;
-  }
-  /* Playback controls responsive */
-  .playback-container {
-    padding: 8px 12px;
-    gap: 8px;
-  }
-  .playback-controls {
-    gap: 6px;
-  }
-  .control-btn {
-    width: 44px;
-    height: 44px;
-  }
-  .control-btn svg {
-    width: 20px;
-    height: 20px;
-  }
-  .step-info {
-    min-width: 50px;
-    font-size: 11px;
-  }
-}
-@media (max-width: 480px) {
-  /* Playback: hide slider and status, keep buttons tappable */
-  .step-slider,
-  .step-info {
-    display: none;
-  }
-  .playback-container {
-    padding: 6px 8px;
-    gap: 6px;
-  }
-  .control-btn {
-    width: 44px;
-    height: 44px;
-  }
-  .control-btn svg {
-    width: 18px;
-    height: 18px;
-  }
-}

src/client/ui/App.css

···
+/* App component styles */
+
+.App-header {
+  height: 44px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 100;
+}
+
+.App-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.App-headerSpacer {
+  flex: 1;
+}
+
+.App-headerLinks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 16px;
+  border-right: 1px solid var(--border);
+}
+
+.App-headerLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  padding: 4px;
+  border-radius: 4px;
+  transition: color 0.15s;
+}
+
+.App-headerLink:hover {
+  color: var(--text-bright);
+}
+
+/* ExampleSelect */
+
+.ExampleSelect {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-left: 16px;
+  border-left: 1px solid var(--border);
+}
+
+.ExampleSelect-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ExampleSelect-selectWrapper {
+  min-width: 150px;
+}
+
+.ExampleSelect-saveBtn,
+.ExampleSelect-embedBtn {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ExampleSelect-saveBtn:hover:not(:disabled),
+.ExampleSelect-embedBtn:hover:not(:disabled) {
+  border-color: #444;
+  background: #2a2a2a;
+}
+
+.ExampleSelect-saveBtn:disabled,
+.ExampleSelect-embedBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* BuildSwitcher */
+
+.BuildSwitcher {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.BuildSwitcher-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.BuildSwitcher-version {
+  min-width: 150px;
+}
+
+.BuildSwitcher-mode {
+  min-width: 70px;
+}
+
+/* EmbedModal */
+
+.EmbedModal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.EmbedModal {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.EmbedModal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.EmbedModal-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-bright);
+}
+
+.EmbedModal-closeBtn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.EmbedModal-closeBtn:hover {
+  color: var(--text-bright);
+}
+
+.EmbedModal-body {
+  padding: 16px;
+  overflow: auto;
+}
+
+.EmbedModal-description {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.EmbedModal-textarea {
+  width: 100%;
+  height: 250px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 12px;
+  resize: none;
+}
+
+.EmbedModal-textarea:focus {
+  outline: none;
+  border-color: #555;
+}
+
+.EmbedModal-footer {
+  padding: 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.EmbedModal-copyBtn {
+  background: #ffd54f;
+  border: none;
+  color: #000;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.EmbedModal-copyBtn:hover {
+  background: #ffe566;
+}
+
+/* Responsive */
+
+@media (max-width: 900px) {
+  .ExampleSelect-label,
+  .BuildSwitcher-label {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .App-headerLink--tangled {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .App-header {
+    padding: 0 8px;
+    gap: 4px;
+  }
+
+  .App-title {
+    display: none;
+  }
+
+  .ExampleSelect {
+    border-left: none;
+  }
+
+  .App-headerSpacer {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .ExampleSelect {
+    padding-left: 6px;
+    margin-left: 2px;
+    gap: 4px;
+  }
+
+  .ExampleSelect-selectWrapper {
+    min-width: 0;
+  }
+
+  .BuildSwitcher-version,
+  .BuildSwitcher-mode {
+    min-width: 0;
+  }
+
+  .BuildSwitcher {
+    padding-left: 6px;
+    gap: 4px;
+  }
+}
+
+@media (max-width: 480px) {
+  .App-header {
+    padding: 0 6px;
+    gap: 3px;
+  }
+
+  .App-title {
+    font-size: 10px;
+  }
+
+  .ExampleSelect {
+    padding-left: 4px;
+    margin-left: 0;
+    border-left: none;
+  }
+
+  .ExampleSelect-selectWrapper {
+    max-width: 110px;
+  }
+
+  .BuildSwitcher {
+    padding-left: 4px;
+    border-left: none;
+  }
+
+  .BuildSwitcher-version,
+  .BuildSwitcher-mode {
+    max-width: 80px;
+  }
+}
+
+@media (max-width: 360px) {
+  .BuildSwitcher-version,
+  .BuildSwitcher-mode {
+    max-width: 75px;
+  }
+}

src/client/ui/App.tsx

···
 import { version } from "react";
 import { SAMPLES, type Sample } from "../samples.ts";
 import REACT_VERSIONS from "../../../scripts/versions.json";
+import { Select } from "./Select.tsx";
+import "./App.css";
 
 const isDev = process.env.NODE_ENV === "development";
 
···
   };
 
   return (
-    <div className="build-switcher">
-      <label>React</label>
-      <select value={version} onChange={handleVersionChange} disabled={isDisabled}>
-        {(REACT_VERSIONS as string[]).map((v) => (
-          <option key={v} value={v}>
-            {v}
-          </option>
-        ))}
-      </select>
-      <select
-        value={isDev ? "dev" : "prod"}
-        onChange={handleModeChange}
-        className="mode-select"
-        disabled={isDisabled}
-      >
-        <option value="prod">prod</option>
-        <option value="dev">dev</option>
-      </select>
+    <div className="BuildSwitcher">
+      <label className="BuildSwitcher-label">React</label>
+      <div className="BuildSwitcher-version">
+        <Select value={version} onChange={handleVersionChange} disabled={isDisabled}>
+          {(REACT_VERSIONS as string[]).map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </Select>
+      </div>
+      <div className="BuildSwitcher-mode">
+        <Select value={isDev ? "dev" : "prod"} onChange={handleModeChange} disabled={isDisabled}>
+          <option value="prod">prod</option>
+          <option value="dev">dev</option>
+        </Select>
+      </div>
     </div>
   );
 }
···
   };
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="modal" onClick={(e: MouseEvent) => e.stopPropagation()}>
-        <div className="modal-header">
-          <h2>Embed this example</h2>
-          <button className="modal-close" onClick={onClose}>
+    <div className="EmbedModal-overlay" onClick={onClose}>
+      <div className="EmbedModal" onClick={(e: MouseEvent) => e.stopPropagation()}>
+        <div className="EmbedModal-header">
+          <h2 className="EmbedModal-title">Embed this example</h2>
+          <button className="EmbedModal-closeBtn" onClick={onClose}>
             &times;
           </button>
         </div>
-        <div className="modal-body">
-          <p>Copy and paste this code into your HTML:</p>
+        <div className="EmbedModal-body">
+          <p className="EmbedModal-description">Copy and paste this code into your HTML:</p>
           <textarea
             ref={textareaRef}
+            className="EmbedModal-textarea"
             readOnly
             value={embedCode}
             onClick={(e) => (e.target as HTMLTextAreaElement).select()}
           />
         </div>
-        <div className="modal-footer">
-          <button className="copy-btn" onClick={handleCopy}>
+        <div className="EmbedModal-footer">
+          <button className="EmbedModal-copyBtn" onClick={handleCopy}>
             {copied ? "Copied!" : "Copy to clipboard"}
           </button>
         </div>
···
 
   return (
     <>
-      <header>
-        <h1>RSC Explorer</h1>
-        <div className="example-select-wrapper">
-          <label>Example</label>
-          <select value={currentSample ?? ""} onChange={handleSampleChange}>
-            {!currentSample && <option value="">Custom</option>}
-            {Object.entries(SAMPLES).map(([key, sample]) => (
-              <option key={key} value={key}>
-                {sample.name}
-              </option>
-            ))}
-          </select>
-          <button className="save-btn" onClick={handleSave} disabled={!isDirty} title="Save to URL">
+      <header className="App-header">
+        <h1 className="App-title">RSC Explorer</h1>
+        <div className="ExampleSelect">
+          <label className="ExampleSelect-label">Example</label>
+          <div className="ExampleSelect-selectWrapper">
+            <Select value={currentSample ?? ""} onChange={handleSampleChange}>
+              {!currentSample && <option value="">Custom</option>}
+              {Object.entries(SAMPLES).map(([key, sample]) => (
+                <option key={key} value={key}>
+                  {sample.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <button
+            className="ExampleSelect-saveBtn"
+            onClick={handleSave}
+            disabled={!isDirty}
+            title="Save to URL"
+          >
             <svg
               width="16"
               height="16"
···
               <polyline points="7 3 7 8 15 8" />
             </svg>
           </button>
-          <button className="embed-btn" onClick={() => setShowEmbedModal(true)} title="Embed">
+          <button
+            className="ExampleSelect-embedBtn"
+            onClick={() => setShowEmbedModal(true)}
+            title="Embed"
+          >
             <svg
               width="16"
               height="16"
···
             </svg>
           </button>
         </div>
-        <div className="header-spacer" />
-        <div className="header-links">
+        <div className="App-headerSpacer" />
+        <div className="App-headerLinks">
           <a
             href="https://github.com/gaearon/rscexplorer"
             target="_blank"
             rel="noopener noreferrer"
-            className="github-link"
+            className="App-headerLink"
             title="View on GitHub"
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
···
             href="https://tangled.sh/danabra.mov/rscexplorer"
             target="_blank"
             rel="noopener noreferrer"
-            className="tangled-link"
+            className="App-headerLink App-headerLink--tangled"
             title="View on Tangled"
           >
             <svg width="20" height="20" viewBox="0 0 26 26" fill="currentColor">

src/client/ui/CodeEditor.css

···
+/* CodeEditor component styles */
+
+.CodeEditor-container {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.CodeEditor-container .cm-editor {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: auto !important;
+  background: transparent;
+}
+
+.CodeEditor-container .cm-editor .cm-scroller {
+  overflow: auto !important;
+}

src/client/ui/CodeEditor.tsx

···
 import { tags } from "@lezer/highlight";
 import { history, historyKeymap, defaultKeymap } from "@codemirror/commands";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import "./CodeEditor.css";
 
 const highlightStyle = HighlightStyle.define([
   { tag: tags.keyword, color: "#c678dd" },
···
   defaultValue: string;
   onChange: (code: string) => void;
   label: string;
-  className?: string;
+  paneClass?: string;
 };
 
 export function CodeEditor({
   defaultValue,
   onChange,
   label,
-  className,
+  paneClass,
 }: CodeEditorProps): React.ReactElement {
   const [initialDefaultValue] = useState(defaultValue);
   const containerRef = useRef<HTMLDivElement>(null);
···
   }, [initialDefaultValue]);
 
   return (
-    <div className={`pane${className ? ` ${className}` : ""}`}>
-      <div className="pane-header">{label}</div>
-      <div className="editor-container" ref={containerRef} />
+    <div className={`Workspace-pane${paneClass ? ` ${paneClass}` : ""}`}>
+      <div className="Workspace-paneHeader">{label}</div>
+      <div className="CodeEditor-container" ref={containerRef} />
     </div>
   );
 }

src/client/ui/EmbedApp.css

···
+/* Embed component styles */
+
+.EmbedApp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  height: 32px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.EmbedApp-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  letter-spacing: 0.3px;
+}
+
+.EmbedApp-fullscreenLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: -10px;
+  border-radius: 4px;
+  color: var(--text-dim);
+  text-decoration: none;
+  transition: all 0.15s;
+}
+
+.EmbedApp-fullscreenLink:hover {
+  background: var(--border);
+  color: var(--text-bright);
+}

src/client/ui/EmbedApp.tsx

···
+import React, { useState, useEffect } from "react";
+import { Workspace } from "./Workspace.tsx";
+import "./EmbedApp.css";
+
+const DEFAULT_SERVER = `export default function App() {
+  return <h1>RSC Explorer</h1>;
+}`;
+
+const DEFAULT_CLIENT = `'use client'
+
+export function Button({ children }) {
+  return <button>{children}</button>;
+}`;
+
+type CodeState = {
+  server: string;
+  client: string;
+};
+
+type EmbedInitMessage = {
+  type: "rsc-embed:init";
+  code?: {
+    server?: string;
+    client?: string;
+  };
+  showFullscreen?: boolean;
+};
+
+type EmbedReadyMessage = {
+  type: "rsc-embed:ready";
+};
+
+type EmbedCodeChangedMessage = {
+  type: "rsc-embed:code-changed";
+  code: {
+    server: string;
+    client: string;
+  };
+};
+
+function isEmbedInitMessage(data: unknown): data is EmbedInitMessage {
+  return (
+    typeof data === "object" &&
+    data !== null &&
+    (data as { type?: string }).type === "rsc-embed:init"
+  );
+}
+
+export function EmbedApp(): React.ReactElement | null {
+  const [code, setCode] = useState<CodeState | null>(null);
+  const [showFullscreen, setShowFullscreen] = useState(false);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<unknown>): void => {
+      const { data } = event;
+      if (isEmbedInitMessage(data)) {
+        setCode({
+          server: (data.code?.server ?? DEFAULT_SERVER).trim(),
+          client: (data.code?.client ?? DEFAULT_CLIENT).trim(),
+        });
+        if (data.showFullscreen !== false) {
+          setShowFullscreen(true);
+        }
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    if (window.parent !== window) {
+      const readyMessage: EmbedReadyMessage = { type: "rsc-embed:ready" };
+      window.parent.postMessage(readyMessage, "*");
+    }
+
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
+  const handleCodeChange = (server: string, client: string): void => {
+    if (window.parent !== window) {
+      const changedMessage: EmbedCodeChangedMessage = {
+        type: "rsc-embed:code-changed",
+        code: { server, client },
+      };
+      window.parent.postMessage(changedMessage, "*");
+    }
+  };
+
+  const getFullscreenUrl = (): string => {
+    if (!code) return "#";
+    const json = JSON.stringify({ server: code.server, client: code.client });
+    const encoded = encodeURIComponent(btoa(unescape(encodeURIComponent(json))));
+    return `https://rscexplorer.dev/?c=${encoded}`;
+  };
+
+  if (!code) {
+    return null;
+  }
+
+  return (
+    <>
+      {showFullscreen && (
+        <div className="EmbedApp-header">
+          <span className="EmbedApp-title">RSC Explorer</span>
+          <a
+            href={getFullscreenUrl()}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="EmbedApp-fullscreenLink"
+            title="Open in RSC Explorer"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+            </svg>
+          </a>
+        </div>
+      )}
+      <Workspace
+        key={`${code.server}:${code.client}`}
+        initialServerCode={code.server}
+        initialClientCode={code.client}
+        onCodeChange={handleCodeChange}
+      />
+    </>
+  );
+}

src/client/ui/FlightLog.css

···
+/* FlightLog component styles */
+
+.FlightLog {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.FlightLog-output {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--bg);
+  color: var(--text-dim);
+}
+
+.FlightLog-output--error {
+  color: #e57373;
+}
+
+.FlightLog-empty {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.FlightLog-empty--waiting::after {
+  content: "...";
+  animation: flightLogPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes flightLogPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* FlightLogEntry */
+
+.FlightLogEntry {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  border-left: 3px solid #555;
+}
+
+.FlightLogEntry + .FlightLogEntry {
+  margin-top: 12px;
+}
+
+.FlightLogEntry--active {
+  border-left-color: #ffd54f;
+}
+
+.FlightLogEntry--done {
+  border-left-color: #555;
+  opacity: 0.8;
+}
+
+.FlightLogEntry--pending {
+  border-left-color: #333;
+  opacity: 0.4;
+}
+
+.FlightLogEntry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 11px;
+  border-bottom: 1px solid var(--border);
+}
+
+.FlightLogEntry-label {
+  color: var(--text);
+  font-weight: 500;
+}
+
+.FlightLogEntry-headerRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.FlightLogEntry-deleteBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+  line-height: 1;
+  opacity: 0.5;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
+}
+
+.FlightLogEntry-deleteBtn:hover {
+  opacity: 1;
+  color: #e57373;
+}
+
+.FlightLogEntry-request {
+  padding: 8px 10px;
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid var(--border);
+}
+
+.FlightLogEntry-requestArgs {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.4;
+  color: #81c784;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* RenderLogView */
+
+.RenderLogView {
+  border-top: 1px solid var(--border);
+  padding: 8px;
+}
+
+.RenderLogView-split {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+
+.RenderLogView-linesWrapper {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  min-height: 150px;
+}
+
+.RenderLogView-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 6px;
+  background: var(--bg);
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 1.4;
+  overflow: auto;
+}
+
+.RenderLogView-line {
+  display: block;
+  padding: 6px 8px;
+  margin-bottom: 3px;
+  border-radius: 4px;
+  word-break: break-all;
+  white-space: pre-wrap;
+  border-left: 2px solid transparent;
+  transition: all 0.15s ease;
+}
+
+.RenderLogView-line:last-child {
+  margin-bottom: 0;
+}
+
+.RenderLogView-line--done {
+  color: #999;
+  background: rgba(255, 255, 255, 0.03);
+  border-left-color: #555;
+}
+
+.RenderLogView-line--next {
+  color: #e0e0e0;
+  background: rgba(255, 213, 79, 0.12);
+  border-left-color: #ffd54f;
+}
+
+.RenderLogView-line--pending {
+  color: #444;
+  background: transparent;
+  border-left-color: #333;
+  opacity: 0.4;
+}
+
+.RenderLogView-tree {
+  flex: 1;
+  min-width: 0;
+  border-radius: 4px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+
+.RenderLogView-tree:has(.FlightTreeView) {
+  background: #000;
+}
+
+/* RawActionForm */
+
+.RawActionForm {
+  margin-top: 8px;
+  padding: 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.RawActionForm-textarea {
+  width: 100%;
+  padding: 8px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  resize: vertical;
+  min-height: 100px;
+}
+
+.RawActionForm-textarea:focus {
+  outline: none;
+  border-color: #555;
+}
+
+.RawActionForm-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.RawActionForm-submitBtn {
+  padding: 5px 12px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  background: #ffd54f;
+  border: none;
+  color: #000;
+}
+
+.RawActionForm-submitBtn:disabled {
+  background: #555;
+  color: #888;
+  cursor: not-allowed;
+}
+
+.RawActionForm-cancelBtn {
+  padding: 5px 12px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+}
+
+.RawActionForm-cancelBtn:hover {
+  border-color: #555;
+  color: var(--text);
+}
+
+/* AddActionButton */
+
+.AddActionButton-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.AddActionButton {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: var(--border);
+  border: 1px solid #444;
+  border-radius: 50%;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 22px;
+  transition: all 0.15s;
+}
+
+.AddActionButton:hover {
+  background: #3a3a3a;
+  border-color: #666;
+  color: var(--text);
+}
+
+/* Responsive */
+
+@media (max-width: 768px) {
+  .RawActionForm-textarea {
+    font-size: 16px !important;
+  }
+}

src/client/ui/FlightLog.tsx

···
 import React, { useState, useRef, useEffect } from "react";
 import { FlightTreeView } from "./TreeView.tsx";
+import { Select } from "./Select.tsx";
 import type { EntryView } from "../runtime/index.ts";
+import "./FlightLog.css";
 
 function escapeHtml(str: string): string {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
···
 
   const getLineClass = (i: number): string => {
     const globalChunk = chunkStart + i;
-    if (globalChunk < cursor) return "line-done";
-    if (globalChunk === cursor) return "line-next";
-    return "line-pending";
+    if (globalChunk < cursor) return "RenderLogView-line--done";
+    if (globalChunk === cursor) return "RenderLogView-line--next";
+    return "RenderLogView-line--pending";
   };
 
   const showTree = cursor >= chunkStart;
 
   return (
-    <div className="log-entry-preview">
-      <div className="log-entry-split">
-        <div className="log-entry-flight-lines-wrapper">
-          <pre className="log-entry-flight-lines">
+    <div className="RenderLogView">
+      <div className="RenderLogView-split">
+        <div className="RenderLogView-linesWrapper">
+          <pre className="RenderLogView-lines">
             {rows.map((line, i) => (
               <span
                 key={i}
                 ref={i === nextLineIndex ? activeRef : null}
-                className={`flight-line ${getLineClass(i)}`}
+                className={`RenderLogView-line ${getLineClass(i)}`}
               >
                 {escapeHtml(line)}
               </span>
             ))}
           </pre>
         </div>
-        <div className="log-entry-tree">
-          {showTree && <FlightTreeView flightPromise={flightPromise ?? null} />}
+        <div className="RenderLogView-tree">
+          {showTree && <FlightTreeView flightPromise={flightPromise ?? null} inEntry />}
         </div>
       </div>
     </div>
···
   cursor,
   onDelete,
 }: FlightLogEntryProps): React.ReactElement {
-  const entryClass = entry.isActive ? "active" : entry.isDone ? "done-entry" : "pending-entry";
+  const modifierClass = entry.isActive
+    ? "FlightLogEntry--active"
+    : entry.isDone
+      ? "FlightLogEntry--done"
+      : "FlightLogEntry--pending";
 
   return (
-    <div className={`log-entry ${entryClass}`}>
-      <div className="log-entry-header">
-        <span className="log-entry-label">
+    <div className={`FlightLogEntry ${modifierClass}`}>
+      <div className="FlightLogEntry-header">
+        <span className="FlightLogEntry-label">
           {entry.type === "render" ? "Render" : `Action: ${entry.name}`}
         </span>
-        <span className="log-entry-header-right">
+        <span className="FlightLogEntry-headerRight">
           {entry.canDelete && (
-            <button className="delete-entry-btn" onClick={() => onDelete(index)} title="Delete">
+            <button
+              className="FlightLogEntry-deleteBtn"
+              onClick={() => onDelete(index)}
+              title="Delete"
+            >
               ×
             </button>
           )}
         </span>
       </div>
       {entry.type === "action" && entry.args && (
-        <div className="log-entry-request">
-          <pre className="log-entry-request-args">{entry.args}</pre>
+        <div className="FlightLogEntry-request">
+          <pre className="FlightLogEntry-requestArgs">{entry.args}</pre>
         </div>
       )}
       <RenderLogView entry={entry} cursor={cursor} />
···
 
   if (entries.length === 0) {
     return (
-      <div className="flight-output">
-        <span className="empty waiting-dots">Compiling</span>
+      <div className="FlightLog-output">
+        <span className="FlightLog-empty FlightLog-empty--waiting">Compiling</span>
       </div>
     );
   }
 
   return (
-    <div className="flight-log" ref={logRef}>
+    <div className="FlightLog" ref={logRef}>
       {entries.map((entry, i) => (
         <FlightLogEntry key={i} entry={entry} index={i} cursor={cursor} onDelete={onDeleteEntry} />
       ))}
       {availableActions.length > 0 &&
         (showRawInput ? (
-          <div className="raw-input-form">
-            <select
-              value={selectedAction}
-              onChange={(e) => setSelectedAction(e.target.value)}
-              className="raw-input-action"
-            >
+          <div className="RawActionForm">
+            <Select value={selectedAction} onChange={(e) => setSelectedAction(e.target.value)}>
               {availableActions.map((action) => (
                 <option key={action} value={action}>
                   {action}
                 </option>
               ))}
-            </select>
+            </Select>
             <textarea
               placeholder="Paste a request payload from a real action"
               value={rawPayload}
               onChange={(e) => setRawPayload(e.target.value)}
-              className="raw-input-payload"
+              className="RawActionForm-textarea"
               rows={6}
             />
-            <div className="raw-input-buttons">
-              <button onClick={handleAddRaw} disabled={!rawPayload.trim()}>
+            <div className="RawActionForm-buttons">
+              <button
+                className="RawActionForm-submitBtn"
+                onClick={handleAddRaw}
+                disabled={!rawPayload.trim()}
+              >
                 Add
               </button>
-              <button onClick={() => setShowRawInput(false)}>Cancel</button>
+              <button className="RawActionForm-cancelBtn" onClick={() => setShowRawInput(false)}>
+                Cancel
+              </button>
             </div>
           </div>
         ) : (
-          <div className="add-raw-btn-wrapper">
-            <button className="add-raw-btn" onClick={handleShowRawInput} title="Add action">
+          <div className="AddActionButton-wrapper">
+            <button className="AddActionButton" onClick={handleShowRawInput} title="Add action">
               +
             </button>
           </div>

src/client/ui/LivePreview.css

···
+/* LivePreview component styles */
+
+.LivePreview-playback {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.LivePreview-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.LivePreview-controlBtn {
+  background: transparent;
+  border: none;
+  color: var(--text);
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.1s;
+}
+
+.LivePreview-controlBtn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.LivePreview-controlBtn:hover:not(:disabled) {
+  background: var(--border);
+  color: var(--text-bright);
+}
+
+.LivePreview-controlBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.LivePreview-controlBtn--playing {
+  color: #ffd54f;
+}
+
+.LivePreview-controlBtn--step {
+  background: #ffd54f;
+  color: #000;
+  animation: livePreviewPulseStep 1.5s ease-in-out infinite;
+}
+
+.LivePreview-controlBtn--step:hover:not(:disabled) {
+  background: #ffe566;
+  color: #000;
+  animation: none;
+}
+
+.LivePreview-controlBtn--step:disabled {
+  background: transparent;
+  color: var(--text);
+  animation: none;
+}
+
+@keyframes livePreviewPulseStep {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.LivePreview-slider {
+  flex: 1;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--border);
+  border-radius: 2px;
+  outline: none;
+}
+
+.LivePreview-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #ffd54f;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.LivePreview-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: #ffd54f;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.LivePreview-slider:disabled {
+  opacity: 0.5;
+}
+
+.LivePreview-stepInfo {
+  font-size: 11px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  min-width: 60px;
+  text-align: right;
+}
+
+.LivePreview-container {
+  flex: 1;
+  padding: 20px;
+  background: #fff;
+  color: #111;
+  overflow: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.LivePreview-container h1 {
+  font-size: 28px;
+  color: #000;
+  margin: 0 0 16px;
+}
+
+.LivePreview-container h2 {
+  font-size: 22px;
+  color: #000;
+}
+
+.LivePreview-container h3 {
+  font-size: 18px;
+  color: #000;
+}
+
+.LivePreview-container p {
+  color: #111;
+  margin: 8px 0;
+}
+
+.LivePreview-container button {
+  background: #333;
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.LivePreview-container button:hover {
+  background: #444;
+}
+
+.LivePreview-empty {
+  color: #999;
+  font-style: italic;
+}
+
+.LivePreview-empty--error {
+  color: #c0392b;
+}
+
+/* Responsive */
+
+@media (max-width: 768px) {
+  .LivePreview-playback {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+
+  .LivePreview-controls {
+    gap: 2px;
+  }
+
+  .LivePreview-controlBtn {
+    width: 26px;
+    height: 26px;
+  }
+
+  .LivePreview-stepInfo {
+    min-width: 50px;
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .LivePreview-slider,
+  .LivePreview-stepInfo {
+    display: none;
+  }
+
+  .LivePreview-playback {
+    padding: 4px 6px;
+    gap: 4px;
+  }
+
+  .LivePreview-controlBtn {
+    width: 24px;
+    height: 24px;
+  }
+
+  .LivePreview-controlBtn svg {
+    width: 14px;
+    height: 14px;
+  }
+}

src/client/ui/LivePreview.tsx

···
 import React, { Suspense, Component, useState, useEffect, type ReactNode } from "react";
 import type { EntryView, Thenable } from "../runtime/index.ts";
+import "./LivePreview.css";
 
 type PreviewErrorBoundaryProps = {
   children: ReactNode;
···
   render(): ReactNode {
     if (this.state.error) {
       return (
-        <span className="empty error">
+        <span className="LivePreview-empty LivePreview-empty--error">
           Error: {this.state.error.message || String(this.state.error)}
         </span>
       );
···
   }
 
   return (
-    <div className="pane preview-pane">
-      <div className="pane-header">preview</div>
-      <div className="playback-container">
-        <div className="playback-controls">
-          <button className="control-btn" onClick={handleReset} disabled={isAtStart} title="Reset">
+    <div className="Workspace-pane Workspace-pane--preview">
+      <div className="Workspace-paneHeader">preview</div>
+      <div className="LivePreview-playback">
+        <div className="LivePreview-controls">
+          <button
+            className="LivePreview-controlBtn"
+            onClick={handleReset}
+            disabled={isAtStart}
+            title="Reset"
+          >
             <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M8 1a7 7 0 1 1-7 7h1.5a5.5 5.5 0 1 0 1.6-3.9L6 6H1V1l1.6 1.6A7 7 0 0 1 8 1z" />
             </svg>
           </button>
           <button
-            className={`control-btn play-btn${isPlaying ? " playing" : ""}`}
+            className={`LivePreview-controlBtn${isPlaying ? " LivePreview-controlBtn--playing" : ""}`}
             onClick={handlePlayPause}
             disabled={isAtEnd}
             title={isPlaying ? "Pause" : "Play"}
···
             )}
           </button>
           <button
-            className={`control-btn ${!isAtEnd ? "step-btn" : ""}`}
+            className={`LivePreview-controlBtn${!isAtEnd ? " LivePreview-controlBtn--step" : ""}`}
             onClick={handleStep}
             disabled={isAtEnd}
             title="Step forward"
···
             </svg>
           </button>
           <button
-            className="control-btn"
+            className="LivePreview-controlBtn"
             onClick={handleSkip}
             disabled={isAtEnd}
             title="Skip to end"
···
           value={cursor}
           onChange={() => {}}
           disabled
-          className="step-slider"
+          className="LivePreview-slider"
         />
-        <span className="step-info">{statusText}</span>
+        <span className="LivePreview-stepInfo">{statusText}</span>
       </div>
-      <div className="preview-container">
+      <div className="LivePreview-container">
         {showPlaceholder ? (
-          <span className="empty">{isAtStart ? "Step to begin..." : "Loading..."}</span>
+          <span className="LivePreview-empty">{isAtStart ? "Step to begin..." : "Loading..."}</span>
         ) : flightPromise ? (
           <PreviewErrorBoundary>
-            <Suspense fallback={<span className="empty">Loading...</span>}>
+            <Suspense fallback={<span className="LivePreview-empty">Loading...</span>}>
               <StreamingContent streamPromise={flightPromise} />
             </Suspense>
           </PreviewErrorBoundary>

src/client/ui/Select.css

···
+/* Shared Select component styles */
+
+.Select {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
+      no-repeat right var(--select-chevron-offset, 8px) center / 12px 12px,
+    linear-gradient(to bottom, #333, #2a2a2a);
+  border: 1px solid #555;
+  border-radius: 4px;
+  color: #fff;
+  padding: 5px 28px 5px 10px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.Select:hover {
+  border-color: #666;
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
+      no-repeat right var(--select-chevron-offset, 8px) center / 12px 12px,
+    linear-gradient(to bottom, #3a3a3a, #333);
+}
+
+.Select:focus {
+  outline: none;
+  border-color: #ffd54f;
+}
+
+.Select option {
+  background: #2a2a2a;
+  color: #e0e0e0;
+  padding: 8px;
+  font-size: 13px;
+}
+
+.Select option:hover,
+.Select option:checked {
+  background: #3a3a3a;
+  color: #ffd54f;
+}
+
+/* Responsive */
+
+@media (max-width: 768px) {
+  .Select {
+    --select-chevron-offset: 4px;
+    padding: 4px 20px 4px 6px;
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .Select {
+    --select-chevron-offset: 3px;
+    padding: 3px 18px 3px 5px;
+  }
+}

src/client/ui/Select.tsx

···
+import type { ChangeEvent, ReactNode } from "react";
+import "./Select.css";
+
+type SelectProps = {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLSelectElement>) => void;
+  disabled?: boolean;
+  children: ReactNode;
+};
+
+export function Select({ value, onChange, disabled, children }: SelectProps) {
+  return (
+    <select className="Select" value={value} onChange={onChange} disabled={disabled}>
+      {children}
+    </select>
+  );
+}

src/client/ui/TreeView.css

···
+/* TreeView component styles */
+
+.FlightTreeView {
+  flex: 1;
+  min-height: 0;
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.8;
+  overflow: auto;
+  background: var(--bg);
+}
+
+.FlightTreeView--inEntry {
+  padding: 8px;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.FlightTreeView-output {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text);
+}
+
+/* PendingFallback */
+
+.PendingFallback {
+  display: inline-block;
+  color: #64b5f6;
+  background: rgba(100, 181, 246, 0.15);
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(100, 181, 246, 0.4);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  animation: pendingPulse 2s ease-in-out infinite;
+}
+
+@keyframes pendingPulse {
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ErrorFallback */
+
+.ErrorFallback {
+  display: inline-block;
+  color: #e57373;
+  background: rgba(229, 115, 115, 0.15);
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(229, 115, 115, 0.4);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* JSXValue types */
+
+.JSXValue-null {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.JSXValue-undefined {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.JSXValue-string {
+  color: #98c379;
+}
+
+.JSXValue-number {
+  color: #d19a66;
+}
+
+.JSXValue-boolean {
+  color: #56b6c2;
+}
+
+.JSXValue-symbol {
+  color: #c678dd;
+}
+
+.JSXValue-function {
+  color: #61afef;
+  font-style: italic;
+}
+
+.JSXValue-circular {
+  color: #e57373;
+  font-style: italic;
+}
+
+.JSXValue-date {
+  color: #e5c07b;
+}
+
+.JSXValue-collection {
+  color: var(--text-dim);
+}
+
+.JSXValue-iterator {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.JSXValue-stream {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.JSXValue-key {
+  color: #61afef;
+}
+
+.JSXValue-empty {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.JSXValue-unknown {
+  color: var(--text-dim);
+}
+
+/* JSXElement */
+
+.JSXElement-tag {
+  color: #e06c75;
+}
+
+.JSXElement-clientTag {
+  color: #c678dd;
+}
+
+.JSXElement-reactTag {
+  color: #e5c07b;
+}
+
+.JSXElement-propName {
+  color: #61afef;
+}
+
+.JSXElement-children {
+  margin-left: 16px;
+  border-left: 1px solid #333;
+  padding-left: 12px;
+}

src/client/ui/TreeView.tsx

···
 import React, { Suspense, Component, type ReactNode } from "react";
 import type { Thenable } from "../runtime/index.ts";
+import "./TreeView.css";
 
 // Internal React element type with $$typeof
 type ReactElementInternal = {
···
 }
 
 function PendingFallback(): React.ReactElement {
-  return <span className="tree-pending">Pending</span>;
+  return <span className="PendingFallback">Pending</span>;
 }
 
 type ErrorFallbackProps = {
···
 
 function ErrorFallback({ error }: ErrorFallbackProps): React.ReactElement {
   const message = error instanceof Error ? error.message : String(error);
-  return <span className="tree-error">Error: {message}</span>;
+  return <span className="ErrorFallback">Error: {message}</span>;
 }
 
 type ErrorBoundaryProps = {
···
 
 // `ancestors` tracks the current path for cycle detection
 function JSXValue({ value, indent = 0, ancestors = [] }: JSXValueProps): React.ReactElement {
-  if (value === null) return <span className="tree-null">null</span>;
-  if (value === undefined) return <span className="tree-undefined">undefined</span>;
+  if (value === null) return <span className="JSXValue-null">null</span>;
+  if (value === undefined) return <span className="JSXValue-undefined">undefined</span>;
 
   if (typeof value === "string") {
     const display = value.length > 50 ? value.slice(0, 50) + "..." : value;
-    return <span className="tree-string">"{escapeHtml(display)}"</span>;
+    return <span className="JSXValue-string">"{escapeHtml(display)}"</span>;
   }
   if (typeof value === "number") {
     const display = Object.is(value, -0) ? "-0" : String(value);
-    return <span className="tree-number">{display}</span>;
+    return <span className="JSXValue-number">{display}</span>;
   }
   if (typeof value === "bigint") {
-    return <span className="tree-number">{String(value)}n</span>;
+    return <span className="JSXValue-number">{String(value)}n</span>;
   }
-  if (typeof value === "boolean") return <span className="tree-boolean">{String(value)}</span>;
+  if (typeof value === "boolean") return <span className="JSXValue-boolean">{String(value)}</span>;
   if (typeof value === "symbol") {
-    return <span className="tree-symbol">{value.toString()}</span>;
+    return <span className="JSXValue-symbol">{value.toString()}</span>;
   }
   if (typeof value === "function") {
     return (
-      <span className="tree-function">
+      <span className="JSXValue-function">
         [Function: {(value as { name?: string }).name || "anonymous"}]
       </span>
     );
···
 
   if (typeof value === "object" && value !== null) {
     if (ancestors.includes(value)) {
-      return <span className="tree-circular">[Circular]</span>;
+      return <span className="JSXValue-circular">[Circular]</span>;
     }
   }
 
···
     typeof value === "object" && value !== null ? [...ancestors, value] : ancestors;
 
   if (value instanceof Date) {
-    return <span className="tree-date">Date({value.toISOString()})</span>;
+    return <span className="JSXValue-date">Date({value.toISOString()})</span>;
   }
 
   if (value instanceof Map) {
-    if (value.size === 0) return <span className="tree-collection">Map(0) {"{}"}</span>;
+    if (value.size === 0) return <span className="JSXValue-collection">Map(0) {"{}"}</span>;
     const pad = "  ".repeat(indent + 1);
     const closePad = "  ".repeat(indent);
     return (
       <>
-        <span className="tree-collection">
+        <span className="JSXValue-collection">
           Map({value.size}) {"{\n"}
         </span>
         {Array.from(value.entries()).map(([k, v], i) => (
···
   }
 
   if (value instanceof Set) {
-    if (value.size === 0) return <span className="tree-collection">Set(0) {"{}"}</span>;
+    if (value.size === 0) return <span className="JSXValue-collection">Set(0) {"{}"}</span>;
     const pad = "  ".repeat(indent + 1);
     const closePad = "  ".repeat(indent);
     return (
       <>
-        <span className="tree-collection">
+        <span className="JSXValue-collection">
           Set({value.size}) {"{\n"}
         </span>
         {Array.from(value).map((v, i) => (
···
 
   if (value instanceof FormData) {
     const entries = Array.from(value.entries());
-    if (entries.length === 0) return <span className="tree-collection">FormData {"{}"}</span>;
+    if (entries.length === 0) return <span className="JSXValue-collection">FormData {"{}"}</span>;
     const pad = "  ".repeat(indent + 1);
     const closePad = "  ".repeat(indent);
     return (
       <>
-        <span className="tree-collection">FormData {"{\n"}</span>
+        <span className="JSXValue-collection">FormData {"{\n"}</span>
         {entries.map(([k, v], i) => (
           <React.Fragment key={i}>
             {pad}
-            <span className="tree-key">{k}</span>:{" "}
+            <span className="JSXValue-key">{k}</span>:{" "}
             <JSXValue value={v} indent={indent + 1} ancestors={nextAncestors} />
             {i < entries.length - 1 ? "," : ""}
             {"\n"}
···
 
   if (value instanceof Blob) {
     return (
-      <span className="tree-collection">
+      <span className="JSXValue-collection">
         Blob({value.size} bytes, "{value.type || "application/octet-stream"}")
       </span>
     );
···
     const preview = Array.from(arr.slice(0, 5)).join(", ");
     const suffix = arr.length > 5 ? ", ..." : "";
     return (
-      <span className="tree-collection">
+      <span className="JSXValue-collection">
         {name}({arr.length}) [{preview}
         {suffix}]
       </span>
     );
   }
   if (value instanceof ArrayBuffer) {
-    return <span className="tree-collection">ArrayBuffer({value.byteLength} bytes)</span>;
+    return <span className="JSXValue-collection">ArrayBuffer({value.byteLength} bytes)</span>;
   }
 
   if (Array.isArray(value)) {
···
 
     const renderItem = (i: number): React.ReactElement => {
       if (!(i in value)) {
-        return <span className="tree-empty">empty</span>;
+        return <span className="JSXValue-empty">empty</span>;
       }
       return <JSXValue value={value[i]} indent={indent + 1} ancestors={nextAncestors} />;
     };
···
     const obj = value as Record<string | symbol, unknown>;
 
     if (typeof obj.next === "function" && typeof obj[Symbol.iterator] === "function") {
-      return <span className="tree-iterator">Iterator {"{}"}</span>;
+      return <span className="JSXValue-iterator">Iterator {"{}"}</span>;
     }
 
     if (typeof obj[Symbol.asyncIterator] === "function") {
-      return <span className="tree-iterator">AsyncIterator {"{}"}</span>;
+      return <span className="JSXValue-iterator">AsyncIterator {"{}"}</span>;
     }
 
     if (value instanceof ReadableStream) {
-      return <span className="tree-stream">ReadableStream {"{}"}</span>;
+      return <span className="JSXValue-stream">ReadableStream {"{}"}</span>;
     }
 
     if (typeof obj.then === "function") {
···
           {"{ "}
           {entries.map(([k, v], i) => (
             <React.Fragment key={k}>
-              <span className="tree-key">{k}</span>:{" "}
+              <span className="JSXValue-key">{k}</span>:{" "}
               <JSXValue value={v} indent={indent} ancestors={nextAncestors} />
               {i < entries.length - 1 ? ", " : ""}
             </React.Fragment>
···
         {entries.map(([k, v], i) => (
           <React.Fragment key={k}>
             {pad}
-            <span className="tree-key">{k}</span>:{" "}
+            <span className="JSXValue-key">{k}</span>:{" "}
             <JSXValue value={v} indent={indent + 1} ancestors={nextAncestors} />
             {i < entries.length - 1 ? "," : ""}
             {"\n"}
···
     );
   }
 
-  return <span className="tree-unknown">{String(value)}</span>;
+  return <span className="JSXValue-unknown">{String(value)}</span>;
 }
 
 type JSXElementProps = {
···
   const padInner = "  ".repeat(indent + 1);
 
   let tagName: string;
-  let tagClass = "tree-tag";
+  let tagClass = "JSXElement-tag";
   if (typeof type === "string") {
     tagName = type;
   } else if (typeof type === "function") {
     const funcType = type as { displayName?: string; name?: string };
     tagName = funcType.displayName || funcType.name || "Component";
-    tagClass = "tree-client-tag";
+    tagClass = "JSXElement-clientTag";
   } else if (typeof type === "symbol") {
     switch (type) {
       case Symbol.for("react.fragment"):
···
       default:
         tagName = "Unknown";
     }
-    tagClass = "tree-react-tag";
+    tagClass = "JSXElement-reactTag";
   } else if (type && typeof type === "object" && (type as { $$typeof?: symbol }).$$typeof) {
     const lazyType = type as ReactLazy;
     if (lazyType.$$typeof === Symbol.for("react.lazy")) {
···
       );
     }
     tagName = "Component";
-    tagClass = "tree-client-tag";
+    tagClass = "JSXElement-clientTag";
   } else {
     tagName = "Unknown";
   }
···
         {key != null && (
           <>
             {" "}
-            <span className="tree-prop-name">key</span>=<span className="tree-string">"{key}"</span>
+            <span className="JSXElement-propName">key</span>=
+            <span className="JSXValue-string">"{key}"</span>
           </>
         )}
         {propEntries.map(([k, v]) => (
···
       {key != null && (
         <>
           {" "}
-          <span className="tree-prop-name">key</span>=<span className="tree-string">"{key}"</span>
+          <span className="JSXElement-propName">key</span>=
+          <span className="JSXValue-string">"{key}"</span>
         </>
       )}
       {propEntries.map(([k, v]) => (
···
     return (
       <>
         {" "}
-        <span className="tree-prop-name">{name}</span>=
-        <span className="tree-string">"{escapeHtml(value)}"</span>
+        <span className="JSXElement-propName">{name}</span>=
+        <span className="JSXValue-string">"{escapeHtml(value)}"</span>
       </>
     );
   }
···
     return (
       <>
         {" "}
-        <span className="tree-prop-name">{name}</span>={"{"}
+        <span className="JSXElement-propName">{name}</span>={"{"}
         {"\n"}
         {pad}
         <JSXValue value={value} indent={indent} ancestors={ancestors} />
···
     return (
       <>
         {" "}
-        <span className="tree-prop-name">{name}</span>={"{["}
+        <span className="JSXElement-propName">{name}</span>={"{["}
         {"\n"}
         {value.map((v, i) => (
           <React.Fragment key={i}>
···
   return (
     <>
       {" "}
-      <span className="tree-prop-name">{name}</span>={"{"}
+      <span className="JSXElement-propName">{name}</span>={"{"}
       <JSXValue value={value} indent={indent} ancestors={ancestors} />
       {"}"}
     </>
···
 
 type FlightTreeViewProps = {
   flightPromise: Thenable<unknown> | null;
+  inEntry?: boolean;
 };
 
-export function FlightTreeView({ flightPromise }: FlightTreeViewProps): React.ReactElement {
+export function FlightTreeView({
+  flightPromise,
+  inEntry,
+}: FlightTreeViewProps): React.ReactElement {
+  const className = inEntry ? "FlightTreeView FlightTreeView--inEntry" : "FlightTreeView";
+
   if (!flightPromise) {
     return (
-      <div className="flight-tree">
-        <pre className="jsx-output">
+      <div className={className}>
+        <pre className="FlightTreeView-output">
           <PendingFallback />
         </pre>
       </div>
···
   }
 
   return (
-    <div className="flight-tree">
-      <pre className="jsx-output">
+    <div className={className}>
+      <pre className="FlightTreeView-output">
         <ErrorBoundary>
           <Suspense fallback={<PendingFallback />}>
             <Await promise={flightPromise}>

src/client/ui/Workspace.css

···
+/* Workspace component styles */
+
+.Workspace {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 50% 50%;
+  grid-template-areas:
+    "server flight"
+    "client preview";
+  overflow: hidden;
+}
+
+.Workspace-pane {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.Workspace-pane--server {
+  grid-area: server;
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.Workspace-pane--client {
+  grid-area: client;
+  border-right: 1px solid var(--border);
+}
+
+.Workspace-pane--flight {
+  grid-area: flight;
+  border-bottom: 1px solid var(--border);
+}
+
+.Workspace-pane--preview {
+  grid-area: preview;
+}
+
+.Workspace-paneHeader {
+  padding: 6px 12px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+/* WorkspaceLoading states */
+
+.WorkspaceLoading-output {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--bg);
+  color: var(--text-dim);
+}
+
+.WorkspaceLoading-preview {
+  flex: 1;
+  padding: 20px;
+  background: #fff;
+  color: #111;
+  overflow: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.WorkspaceLoading-empty {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.WorkspaceLoading-empty--waiting::after {
+  content: "...";
+  animation: workspaceLoadingPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes workspaceLoadingPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}

src/client/ui/Workspace.tsx

···
 import { CodeEditor } from "./CodeEditor.tsx";
 import { FlightLog } from "./FlightLog.tsx";
 import { LivePreview } from "./LivePreview.tsx";
+import "./Workspace.css";
 
 type WorkspaceProps = {
   initialServerCode: string;
···
   }
 
   return (
-    <main>
+    <main className="Workspace">
       <CodeEditor
         label="server"
         defaultValue={serverCode}
         onChange={handleServerChange}
-        className="editor-server"
+        paneClass="Workspace-pane--server"
       />
       <CodeEditor
         label="client"
         defaultValue={clientCode}
         onChange={handleClientChange}
-        className="editor-client"
+        paneClass="Workspace-pane--client"
       />
       {session ? (
         <WorkspaceContent session={session} onReset={reset} key={session.id} />
···
 function WorkspaceLoading(): React.ReactElement {
   return (
     <>
-      <div className="pane flight-pane">
-        <div className="pane-header">flight</div>
-        <div className="flight-output">
-          <span className="empty waiting-dots">Compiling</span>
+      <div className="Workspace-pane Workspace-pane--flight">
+        <div className="Workspace-paneHeader">flight</div>
+        <div className="WorkspaceLoading-output">
+          <span className="WorkspaceLoading-empty WorkspaceLoading-empty--waiting">Compiling</span>
         </div>
       </div>
-      <div className="pane preview-pane">
-        <div className="pane-header">preview</div>
-        <div className="preview-container">
-          <span className="empty waiting-dots">Compiling</span>
+      <div className="Workspace-pane Workspace-pane--preview">
+        <div className="Workspace-paneHeader">preview</div>
+        <div className="WorkspaceLoading-preview">
+          <span className="WorkspaceLoading-empty WorkspaceLoading-empty--waiting">Compiling</span>
         </div>
       </div>
     </>
···
   if (session.state.status === "error") {
     return (
       <>
-        <div className="pane flight-pane">
-          <div className="pane-header">flight</div>
-          <pre className="flight-output error">{session.state.message}</pre>
+        <div className="Workspace-pane Workspace-pane--flight">
+          <div className="Workspace-paneHeader">flight</div>
+          <pre className="FlightLog-output FlightLog-output--error">{session.state.message}</pre>
         </div>
-        <div className="pane preview-pane">
-          <div className="pane-header">preview</div>
-          <div className="preview-container">
-            <span className="empty error">Compilation error</span>
+        <div className="Workspace-pane Workspace-pane--preview">
+          <div className="Workspace-paneHeader">preview</div>
+          <div className="LivePreview-container">
+            <span className="LivePreview-empty LivePreview-empty--error">Compilation error</span>
           </div>
         </div>
       </>
···
 
   return (
     <>
-      <div className="pane flight-pane">
-        <div className="pane-header">flight</div>
+      <div className="Workspace-pane Workspace-pane--flight">
+        <div className="Workspace-paneHeader">flight</div>
         <FlightLog
           entries={entries}
           cursor={cursor}