stcapp

Structural Tension Chart (STC) Application

A Next.js web application for creating and managing Structural Tension Charts - a powerful methodology for bridging the gap between your current reality and desired goals through strategic action planning.

What is a Structural Tension Chart?

A Structural Tension Chart visualizes the creative tension between:

• Goal (Where you want to be) - Green section
• Current Reality (Where you are now) - Gray section
• Actions (How to bridge the gap) - Blue section

This framework, popularized by Robert Fritz in “The Path of Least Resistance,” helps transform structural conflicts into creative tension that naturally moves you toward your desired outcomes.

Key Features

🎯 Three-Section Visual Architecture

• Goal Section (Top): Define clear, specific outcomes with visual prominence
• Actions Section (Middle): Plan and track strategic steps with due dates
• Current Reality Section (Bottom): Honest assessment of starting conditions

🔭 Infinite Telescopic Navigation

• Telescope any action into its own sub-chart
• Unlimited depth - actions can have actions, infinitely
• Breadcrumb navigation with 70-character parent context
• Seamless drilling down and backing up through action hierarchies

📅 Due Date Management

• Enhanced DatePicker with auto-close functionality
• Visual date indicators on action cards
• Temporal organization of action sequences

🎨 Structural Design Language

• Color-coded sections (Green-Blue-Gray) for cognitive clarity
• Cards-first interface with consistent visual hierarchy
• Responsive grid layouts (1-2-3 column adaptation)
• Hover effects and smooth transitions

Architecture

Frontend Stack

• Next.js 15 with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• shadcn/ui components
• Lucide React icons

Data Layer

• SQLite database with proper schema
• API routes for CRUD operations
• Comprehensive error handling
• Type-safe database interactions

Key Components

``` ├── master-chart-form.tsx # Chart creation/editing ├── date-picker.tsx # Enhanced DatePicker component ├── action-telescope-view.tsx # Telescopic action navigation └── master-charts/[id]/ # Main chart detail view ```

Getting Started

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Installation

```bash

Clone and install

git clone cd stcapp pnpm install

Initialize database

pnpm run setup-db

Configure your Postgres connection

export DATABASE_URL=postgres://user:pass@localhost:5432/stcapp

Start development server

pnpm dev ```

Usage Flow

1. Create a Chart: Define your goal and current reality
2. Add Actions: Break down the path from reality to goal
3. Set Due Dates: Add temporal structure to your actions
4. Telescope Actions: Drill into any action for detailed sub-planning
5. Navigate Hierarchy: Use breadcrumbs to move between chart levels

Database Schema

```sql – Master Charts (Parent level) CREATE TABLE master_charts ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, goal TEXT NOT NULL, current_reality TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP );

– Actions (Can reference parent chart or parent action) CREATE TABLE actions ( id INTEGER PRIMARY KEY AUTOINCREMENT, master_chart_id INTEGER NOT NULL, parent_action_id INTEGER, title TEXT NOT NULL, description TEXT, due_date DATETIME, completed BOOLEAN DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); ```

Development

Project Structure

``` src/stcapp/ ├── app/ │ ├── master-charts/ # Chart CRUD pages │ ├── api/ # Backend API routes │ └── globals.css # Global styles ├── components/ # Reusable UI components └── lib/ # Utilities and database ```

Key Patterns

• Structural Tension Layout: Three-section visual hierarchy
• Telescope Navigation: Infinite action drilling capability
• Cards-First Design: Content over forms for better UX
• State Management: Proper Date object handling
• Error Boundaries: Comprehensive error handling

Contributing

This application embodies the Structural Tension Chart methodology - any contributions should preserve the three-section architecture and telescopic navigation capabilities that make this framework effective.

License

MIT License - Build your own tension-resolving applications!

Running Tests

The repository includes a bash-based suite that validates all API endpoints. For a quick demo:

pnpm install
./scripts/run-tests-with-server.sh

This starts the dev server, waits for it to be ready, runs every test, and shuts the server down. See tests/README.md for details.