feat(ui): add Shape discriminated union and render()

[galligan]

• Add Shape type: Collection | Hierarchy | KeyValue | Resource
• Add type guards: isCollection, isHierarchy, isKeyValue, isResource
• Add unified render() function dispatching to correct renderer
• TreeNode and related types for hierarchy rendering

Fixes #52, #53

Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com

[galligan]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• chore(outfitter): sync templates on pack #108
• chore(changesets): ignore app package #107
• fix(errors): avoid TaggedError extends warnings #106
• chore(release): align package versions to 0.1.0 #105
• docs: add README and CHANGELOG for testing, kit, outfitter #95
• feat(templates): add daemon project template #94
• feat(templates): add MCP server project template #93
• feat(templates): add CLI project template #92
• fix(cli): implement confirmDestructive prompts #104
• fix(cli): implement createCLI and command builder #103
• feat(kit): add @outfitter/kit meta-package #91
• docs(daemon): add README and CHANGELOG #90
• fix(daemon): fix locking module bugs (GREEN phase) #89
• test(daemon): add locking module tests (RED phase) #88
• feat(daemon): add errors, platform, and locking module stubs #87
• feat(outfitter): add doctor command for environment validation #86
• feat(outfitter): add init command with project scaffolding #85
• feat(daemon): add IPC communication and health checks #84
• feat(daemon): add types and lifecycle management #83
• feat(index): add FTS5 full-text search implementation #82
• feat(index): add types for FTS5 full-text search #81
• feat(testing): add MCP and CLI test harnesses #80
• feat(testing): add test fixture utilities #79
• feat(mcp): add MCP server implementation with typed handlers #78
• feat(mcp): add types and interfaces for MCP server #77
• feat(ui): add Shape discriminated union and render() #76 👈 (View in Graphite)
• feat(ui): add createTokens semantic color layer #75
• feat(state): add pagination helpers #74
• feat(logging): add DEFAULT_PATTERNS for common secret redaction #73
• feat(ui): add formatRelative() for human-readable timestamps #72
• feat(state): add encodeCursor/decodeCursor for pagination #71
• feat(types): add hashId() for deterministic short identifiers #70
• feat(contracts): add Logger.child() and fix AssertionError category #69
• feat(config): centralize environment variable access with Zod validation #42
• fix(logging): enable redaction by default when global rules exist #41
• docs(ui): add README, CHANGELOG, and TSDoc comments #39
• docs(state): add README, CHANGELOG, and TSDoc comments #38
• docs(file-ops): add README, CHANGELOG, and TSDoc comments #37
• docs(logging): add README, CHANGELOG, and TSDoc comments #36
• docs(config): add README, CHANGELOG, and TSDoc comments #35
• fix(cli): enforce cursor TTL #114
• fix(tests): remove placeholder tests #113
• chore(gitattributes): prefer ours for bun lockfiles #115
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Greptile Summary

• Adds Shape discriminated union type with Collection, Hierarchy, KeyValue, and Resource variants plus corresponding type guards
• Introduces unified render() function that dispatches to appropriate renderers based on shape type and format preferences
• Implements TreeNode types and comprehensive test coverage following TDD RED phase methodology

Important Files Changed

Filename	Overview
packages/ui/src/tests/shapes.test.ts	New comprehensive test file defining API contracts for Shape union types, type guards, unified render function, and format dispatching - requires implementation to pass

Confidence score: 4/5

• This PR follows the project's TDD-first methodology correctly by implementing failing tests before any implementation
• Score reflects that this is a well-structured test-first approach with comprehensive coverage, but deducted one point due to the tests currently failing by design (RED phase) and requiring substantial implementation work
• Pay close attention to packages/ui/src/__tests__/shapes.test.ts to understand the complete API contract that needs implementation

Sequence Diagram

sequenceDiagram
    participant User
    participant render as "render()"
    participant TypeGuards as "Type Guards"
    participant TableRenderer as "renderTable()"
    participant ListRenderer as "renderList()"
    participant TreeRenderer as "renderTree()"
    participant JsonRenderer as "renderJson()"
    participant TextRenderer as "renderText()"
    participant MarkdownRenderer as "renderMarkdown()"

    User->>render: "render(shape, options?)"
    render->>TypeGuards: "Check shape type"
    
    alt Collection with objects
        TypeGuards->>render: "isCollection() = true"
        render->>TableRenderer: "renderTable(items, headers)"
        TableRenderer->>User: "formatted table"
    else Collection with primitives
        TypeGuards->>render: "isCollection() = true"
        render->>ListRenderer: "renderList(items)"
        ListRenderer->>User: "bullet list"
    else Hierarchy
        TypeGuards->>render: "isHierarchy() = true"
        render->>TreeRenderer: "renderTree(root)"
        TreeRenderer->>User: "tree structure"
    else KeyValue
        TypeGuards->>render: "isKeyValue() = true"
        render->>render: "format key-value pairs"
        render->>User: "formatted pairs"
    else Resource (json)
        TypeGuards->>render: "isResource() = true"
        render->>JsonRenderer: "renderJson(data)"
        JsonRenderer->>User: "formatted JSON"
    else Resource (text)
        TypeGuards->>render: "isResource() = true"
        render->>TextRenderer: "renderText(data)"
        TextRenderer->>User: "plain text"
    else Resource (markdown)
        TypeGuards->>render: "isResource() = true"
        render->>MarkdownRenderer: "renderMarkdown(data)"
        MarkdownRenderer->>User: "processed markdown"
    end

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: Test calls renderTree() with { root: null } but Hierarchy type expects TreeNode with name property

Suggested change

	const treeResult = renderTree({ root: null });
	const jsonResult = renderJson({ key: "value" });
	const treeResult = renderTree({ root: { name: "root", children: [] } });
	const jsonResult = renderJson({ key: "value" });

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/ui/src/__tests__/shapes.test.ts
Line: 345:346

Comment:
**logic:** Test calls renderTree() with { root: null } but Hierarchy type expects TreeNode with name property

```suggestion
		const treeResult = renderTree({ root: { name: "root", children: [] } });
		const jsonResult = renderJson({ key: "value" });
```

How can I resolve this? If you propose a fix, please make it concise.

[galligan]

Restacked after downstack update (formatRelative test stabilization); no additional changes in this PR.

[galligan]

Adjusted the standalone renderTree test to use a valid tree object (no null root), now asserting both root and child nodes.