​

Getting Started with TealTiger Playground

​

Prerequisites

• A GitHub account (personal or organization)
• A modern browser (Chrome, Firefox, Safari, Edge)
• That’s it — no local installation needed for the hosted version

​

For Self-Hosting (Optional)

1. Node.js 18+ and npm
2. A Supabase project on the free tier (supabase.com)
3. A GitHub OAuth App configured in Supabase

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

cd playground
npm install
npm run dev

​

1. Sign In with GitHub

​

How to Sign In

1. Click the “Sign in with GitHub” button in the top navigation bar
2. GitHub’s authorization page opens — review the requested permissions:
   • read:user — reads your profile (username, avatar)
   • user:email — reads your email address
   • read:org — reads your organization memberships (for team features)
3. Click “Authorize” on GitHub
4. You’re redirected back to the playground, now signed in

​

Anonymous Mode

​

Signing Out

​

Permissions and Privacy

• The app requests read-only access — it cannot modify your GitHub repos or settings
• Organization membership data is used only to auto-create team workspaces
• You can revoke access anytime from GitHub → Settings → Applications → Authorized OAuth Apps

​

2. Create a Workspace

​

Creating Your First Workspace

1. After signing in, open the Workspace Selector dropdown in the navigation bar
2. Click “Create New Workspace”
3. Enter a workspace name (e.g., my-team-policies)
4. Click Create

​

Workspace Roles

​

Inviting Team Members

1. Open Workspace Settings from the workspace dropdown
2. Click “Invite Member”
3. Enter a GitHub username or email address
4. Select a role: Owner, Editor, or Viewer
5. Click Invite

​

Switching Workspaces

​

3. Create and Edit Policies

​

Creating a New Policy

1. Navigate to the Policy Registry in your workspace
2. Click “Create Policy”
3. Fill in the policy details:
   • Name: A unique name within the workspace (e.g., pii-detection-v1)
   • Description: What the policy does
   • Category: Select a category (security, cost, compliance, etc.)
   • Tags: Add searchable tags
4. Write your policy code in the Monaco Editor (full syntax highlighting, autocomplete)
5. Click Save to create the policy in Draft state

​

Example: Basic Cost Control Policy

// Cost control policy - limits spending per request
export default function costControlPolicy(context) {
  const maxCostPerRequest = 0.05; // $0.05 per request
  const estimatedCost = context.estimatedCost || 0;

  if (estimatedCost > maxCostPerRequest) {
    return {
      decision: 'DENY',
      reason: `Estimated cost ${estimatedCost} exceeds limit of ${maxCostPerRequest}`,
    };
  }

  return {
    decision: 'ALLOW',
    metadata: { estimatedCost },
  };
}

​

Policy Versioning

• Patch (1.0.0 → 1.0.1): Bug fixes, minor tweaks
• Minor (1.0.0 → 1.1.0): New features, non-breaking changes
• Major (1.0.0 → 2.0.0): Breaking changes

​

Comparing Versions (Diff View)

1. Open a policy’s Version History
2. Select two versions to compare
3. Choose a view mode:
   • Side-by-side: Two columns showing old and new code
   • Unified: Single column with +/- indicators
4. Changes are color-coded: green (added), red (removed), yellow (modified)

​

4. Use Policy Templates

​

Browsing Templates

1. Open the Template Library from the sidebar
2. Browse by category or search by name
3. Each template card shows a description, supported providers, and use case

​

Available Template Categories

​

Customizing a Template

1. Click on a template card to open the Template Customizer
2. Adjust parameters (thresholds, provider lists, limits) using the form inputs
3. Preview the generated code with syntax highlighting
4. Click “Save to Workspace” to create a new policy from the template

​

5. Collaborate with Your Team

​

Inline Comments

1. Hover over a line number in the Monaco Editor
2. Click the comment icon that appears
3. Write your comment (Markdown supported)
4. Use @username to mention and notify team members
5. Click Post

​

Real-Time Updates

• Active users are shown with their avatars
• Comments and policy changes appear in real-time via WebSocket subscriptions
• An offline indicator appears if your connection drops, and changes sync automatically when reconnected

​

Policy Governance Workflow

Draft → Review → Approved → Production

1. Draft: Author writes and iterates on the policy
2. Review: Author submits for approval; designated approvers are notified
3. Approved: Required approvers have signed off; policy is locked from edits
4. Production: Policy is deployed and active

​

6. Next Steps

• Governance Workflow Guide — Approval processes, emergency bypass, impact analysis
• Compliance Mapping Guide — Map policies to OWASP, NIST, SOC2, ISO 27001, GDPR
• Audit Trail Guide — Immutable logging, filtering, and export
• CI/CD Integration Guide — GitHub Actions workflows for automated policy testing
• RBAC Simulator Guide — Test policies across different user roles and permissions
• Policy Template Guide — Detailed documentation for all 15+ templates

​

Useful Keyboard Shortcuts

​

Free Tier Limits