Web Terminal & IDE

Teabar provides browser-based terminal and IDE access, allowing participants to work in their environments without installing any software. Both options work over HTTPS, making them compatible with restrictive corporate and educational networks.

Terminal Types

Configuration

Basic Configuration

apiVersion: teabar.dev/v1
kind: Blueprint
metadata:
  name: my-workshop
spec:
  access:
    terminal:
      type: both  # shell | ide | both

Shell Terminal Configuration

spec:
  access:
    terminal:
      type: shell
      shell:
        # Container image for the shell
        image: ubuntu:22.04
        
        # Shell command
        command: /bin/bash
        
        # Working directory
        workingDir: /home/student
        
        # Environment variables
        env:
          - name: EDITOR
            value: vim
          - name: TERM
            value: xterm-256color
            
        # Resource limits
        resources:
          memory: 512Mi
          cpu: 500m

Web IDE Configuration

spec:
  access:
    terminal:
      type: ide
      ide:
        # Pre-installed VSCode extensions
        extensions:
          - ms-python.python
          - golang.go
          - hashicorp.terraform
          - ms-azuretools.vscode-docker
          - redhat.vscode-yaml
          
        # Settings
        settings:
          editor.fontSize: 14
          editor.theme: Default Dark+
          terminal.integrated.fontSize: 13
          
        # Working directory
        workingDir: /home/student/project
        
        # Resource limits
        resources:
          memory: 2Gi
          cpu: 1000m

Both Terminal Types

spec:
  access:
    terminal:
      type: both
      shell:
        image: ubuntu:22.04
        command: /bin/bash
      ide:
        extensions:
          - ms-python.python

Session Persistence

Configure session persistence so participants don’t lose work if they close their browser:

spec:
  access:
    terminal:
      type: shell
      session:
        # Enable persistence
        persistence: true
        
        # Session timeout (after this idle time, session is terminated)
        timeout: 24h
        
        # Backend for persistence
        backend: tmux  # tmux | screen | none

How Persistence Works

Reconnecting to Sessions

When persistence is enabled:

1. Participant opens terminal
2. If existing session exists, automatically reconnects
3. All previous work (running processes, command history) is preserved
4. Session expires only after timeout of inactivity

Terminal Access URLs

Shell Terminal

https://terminal.<env>.<org>.teabar.dev
https://<env>.<org>.teabar.dev/participant/<id>/terminal

Web IDE

https://ide.<env>.<org>.teabar.dev
https://<env>.<org>.teabar.dev/participant/<id>/ide

Shell Customization

Pre-installed Tools

Install tools in the terminal image:

spec:
  access:
    terminal:
      type: shell
      shell:
        image: ghcr.io/acme/workshop-terminal:latest

Custom Dockerfile:

# Dockerfile
FROM ubuntu:22.04

RUN apt-get update && apt-get install -y 
    vim 
    git 
    curl 
    wget 
    jq 
    kubectl 
    helm 
    && rm -rf /var/lib/apt/lists/*

# Add custom shell configuration
COPY .bashrc /etc/skel/.bashrc
COPY motd /etc/motd

# Create student user
RUN useradd -m -s /bin/bash student
USER student
WORKDIR /home/student

Custom Shell Prompt

Set a custom prompt via environment variables:

spec:
  access:
    terminal:
      shell:
        env:
          - name: PS1
            value: "\u@\h:\w\$ "

Startup Script

Run commands when the terminal starts:

spec:
  access:
    terminal:
      shell:
        startupScript: |
          #!/bin/bash
          echo "Welcome to the Kubernetes Workshop!"
          echo ""
          echo "Your cluster is ready. Try: kubectl get nodes"
          echo ""
          cd ~/project

IDE Customization

Pre-installed Extensions

spec:
  access:
    terminal:
      ide:
        extensions:
          # Languages
          - ms-python.python
          - golang.go
          - rust-lang.rust-analyzer
          - ms-vscode.cpptools
          
          # Infrastructure
          - hashicorp.terraform
          - ms-kubernetes-tools.vscode-kubernetes-tools
          - redhat.vscode-yaml
          
          # Productivity
          - esbenp.prettier-vscode
          - dbaeumer.vscode-eslint
          - eamodio.gitlens

IDE Settings

Configure VSCode settings:

spec:
  access:
    terminal:
      ide:
        settings:
          # Editor
          editor.fontSize: 14
          editor.tabSize: 2
          editor.formatOnSave: true
          editor.minimap.enabled: false
          
          # Theme
          workbench.colorTheme: Default Dark+
          workbench.iconTheme: material-icon-theme
          
          # Terminal
          terminal.integrated.fontSize: 13
          terminal.integrated.defaultProfile.linux: bash
          
          # Files
          files.autoSave: afterDelay
          files.autoSaveDelay: 1000

Workspace Configuration

Pre-configure the workspace:

spec:
  access:
    terminal:
      ide:
        workspace:
          folders:
            - path: /home/student/project
              name: Project
            - path: /home/student/exercises
              name: Exercises
          settings:
            python.defaultInterpreterPath: /usr/bin/python3

Per-Participant Terminals

Isolated Environments

Each participant gets their own isolated terminal:

spec:
  resources:
    - name: workspace
      type: vm
      spec:
        size: cx21
        image: ubuntu-22.04
        perParticipant: true
        
  access:
    terminal:
      type: both
      # Terminal connects to participant's own VM
      target: workspace

Shared Resources

Participants can also have terminals accessing shared resources:

spec:
  resources:
    - name: shared-cluster
      type: cluster
      spec:
        distribution: talos
        
  access:
    terminal:
      type: shell
      # Terminal with kubectl access to shared cluster
      target: shared-cluster
      shell:
        image: bitnami/kubectl:latest

Resource Limits

Control resource usage per terminal:

spec:
  access:
    terminal:
      shell:
        resources:
          # Memory limit
          memory: 512Mi
          
          # CPU limit (millicores)
          cpu: 500m
          
          # Ephemeral storage
          storage: 1Gi
          
      ide:
        resources:
          memory: 2Gi
          cpu: 1000m
          storage: 5Gi

Clipboard Support

Enable clipboard sharing between browser and terminal:

spec:
  access:
    terminal:
      shell:
        clipboard:
          enabled: true
          # Requires secure context (HTTPS)

File Upload/Download

Enable File Transfer

spec:
  access:
    terminal:
      shell:
        fileTransfer:
          enabled: true
          maxFileSize: 100Mi
          allowedExtensions:
            - .txt
            - .py
            - .js
            - .yaml
            - .json

Using File Transfer

In the terminal interface:

• Upload: Drag and drop files into the terminal window
• Download: Right-click on files in the file browser (IDE) or use the download button

Keyboard Shortcuts

Shell Terminal

Web IDE

Standard VSCode shortcuts apply. Key ones:

Network Fallbacks

WebSocket (Primary)

Terminal uses WebSocket for real-time communication:

Browser ──WSS/443──► Gateway ──► Terminal Backend

Long-Polling (Fallback)

If WebSocket is blocked:

Browser ──HTTPS/443──► Gateway ──► Terminal Backend
           (polling every 500ms)

Configuration:

spec:
  access:
    terminal:
      network:
        # Timeout before falling back to polling
        websocketTimeout: 5s
        
        # Polling interval (when in fallback mode)
        pollingInterval: 500ms

Troubleshooting

Terminal Not Connecting

1. Check network: Ensure HTTPS (443) is allowed
2. Check authentication: Verify participant is authenticated
3. Check environment status: Environment must be running

teactl env get my-workshop

Slow Terminal

1. Check network latency: High latency affects responsiveness
2. Check if using polling fallback: Polling is slower than WebSocket
3. Check resource usage: Terminal may be hitting resource limits

teactl access sessions my-workshop --show-resources

Session Lost

1. Check persistence setting: persistence: true required
2. Check timeout: Session may have expired
3. Check environment status: Environment may have slept

View Terminal Logs

teactl env logs my-workshop --component terminal

Examples

Python Development Workshop

apiVersion: teabar.dev/v1
kind: Blueprint
metadata:
  name: python-workshop
spec:
  access:
    terminal:
      type: both
      shell:
        image: python:3.11
        command: /bin/bash
        startupScript: |
          echo "Python Workshop Environment"
          echo "Python version: $(python --version)"
          cd ~/project
      ide:
        extensions:
          - ms-python.python
          - ms-python.vscode-pylance
          - ms-python.debugpy
        settings:
          python.defaultInterpreterPath: /usr/local/bin/python
      session:
        persistence: true
        timeout: 8h

Kubernetes Training

apiVersion: teabar.dev/v1
kind: Blueprint
metadata:
  name: k8s-training
spec:
  access:
    terminal:
      type: shell
      shell:
        image: bitnami/kubectl:1.29
        env:
          - name: KUBECONFIG
            value: /home/student/.kube/config
        startupScript: |
          echo "Kubernetes Training Lab"
          kubectl cluster-info
      session:
        persistence: true
        timeout: 12h

Next Steps