skills.rest
threadedstack
threadedstackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tdsk-threads

Documents the Threads SPA architecture for sandbox session management and terminal rendering.

Updated Jan 4, 2026
Search Tags:#react#terminal#spa#sandbox#websocket#ast#jotai
One-click install
npx skills add https://github.com/threadedstack/threadedstack --skill tdsk-threads-threadedstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tdsk-threads
Source: https://github.com/threadedstack/threadedstack/tree/main/.claude/skills/tdsk-threads
Command: npx skills add https://github.com/threadedstack/threadedstack --skill tdsk-threads-threadedstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working on the Threads repo need a consolidated knowledge base covering its session management, AST-based GUI engine, WebSocket lifecycle, and Jotai state patterns to navigate and modify the codebase without reverse-engineering it. ## Core Features & Use Cases - Architecture Reference: Documents the full directory structure, routing (React Router v7), services, contexts, hooks, and Jotai 3-layer state management of the Threads SPA. - AST GUI Engine Guide: Explains the tokenizer -> parser -> AST -> engine -> visitors pipeline that converts raw terminal output into interactive React components. - Session Management Details: Covers WebSocket connection flow, session actions (openSession, closeSession, sendInput), terminal settings, and sessionStorage persistence. - Use Case: When adding a new AST node component or debugging session reconnection, consult this Skill to find the exact service, action, and state atom involved. ## Quick Start Ask the AI to explain how the Threads SPA renders terminal output as GUI components using this skill.

Frequently Asked Questions about tdsk-threads

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does the Threads SPA render terminal output as GUI components?▼

Terminal output flows through a tokenizer, parser, and AST builder, then a per-session SessionEngine emits AST documents and feed events. A renderVisitor converts AST nodes into React components like NodePanel, NodeTable, and NodeSelectList.

How do I open a sandbox session over WebSocket in the Threads app?▼

Call openSession(), which first invokes sandboxApi.connect() to start the pod and obtain a shellToken, then opens a WebSocket to the sandbox shell endpoint with the token and terminal dimensions.

What state management library does the Threads SPA use?▼

The Threads SPA uses Jotai with a 3-layer pattern: atoms for raw state, accessors for imperative get/set functions outside React, and selectors as hook-based read access for components.

Does the Threads app support both terminal and GUI views?▼

Yes, a ViewToggle component switches between a raw xterm-based TerminalView and a GUI view rendered from the AST engine. The GUI view itself switches between TUI mode and an ActivityFeed mode based on detected viewport mode.

How does authentication work in the Threads SPA?▼

Authentication uses Neon Auth via an AuthProvider context with signin, signout, and session methods. A TokenRefreshManager proactively refreshes JWTs before expiry and retries once on 401 responses.

Related Skills

Explore More Software Engineering Skills→
neondatabaseneondatabase
86

neon-auth

Set up Neon Auth for Next.js, React SPA, or Node.js applications.

Official
Intermediate
metasavermetasaver

production-check

Run pnpm build, lint, and test commands and report failures.

Community
Advanced
ShpigfordShpigford

chat-widget

Embed a real-time floating chat widget with WebSocket messaging and an admin dashboard.

Community
Advanced
AradotsoAradotso
4

hermes-client-web-ui

Manage Hermes Agent profiles via a web chat interface with SSE streaming.

Official
Advanced