190 Fn 99 Dd2fa8c4

Name: 190 Fn 99 Dd2fa8c4
Author: tools-only

ASecurity

Create TaskDetail component showing full task info with markdown rendering.

9 stars
0 votes
0 copies
1 view
Added May 31, 2026

testingtypescript

Security analysis

A100/100

Pro scans all 2 files and shows the line behind each finding

Scanned May 31, 2026

npx -y skills add tools-only/X-Skills --skill 190-fn-99_dd2fa8c4 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 190 Fn 99 Dd2fa8c4?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 190 Fn 99 Dd2fa8c4

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-190-fn-99-dd2fa8c4/badge)](https://www.skillsdirectory.com/skills/tools-only-190-fn-99-dd2fa8c4)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# fn-9.9 TaskDetail component

## Description

Create TaskDetail component showing full task info with markdown rendering.

### File

`src/components/task-detail.ts`

### Features

- Task type icon + full title
- Metadata line: ID, status
- Receipt status: "Plan ✓  Impl ✓" or "Plan ✗  Impl -"
- Markdown spec content via pi-tui Markdown
- Blocked reason from block-fn-X.md if applicable

### Interface

```typescript
interface TaskDetailProps {
  task: Task;
  spec: string;           // markdown content
  receipts?: {plan?: boolean, impl?: boolean};
  blockReason?: string;
  theme: Theme;
}

class TaskDetail implements Component {
  render(width: number): string[]
  handleInput(data: string): void  // scrolling
  invalidate(): void
}
```

### Layout

```
◉ Add form validation with Zod
ID: fn-1.3  Status: in_progress
Plan ✓  Impl ✓

## User Story
As a user I want validation...
```
## Acceptance
- [ ] Header shows status icon + full title
- [ ] Metadata line shows ID and status
- [ ] Receipt indicators render correctly
- [ ] Markdown content renders via pi-tui
- [ ] Blocked tasks show block reason
- [ ] Scrollable if content exceeds height
## Done summary
- Added TaskDetail component with full task info display
- Header: status icon + title, metadata line (ID/status), receipt indicators
- Markdown spec rendering via pi-tui Markdown component
- Block reason display for blocked tasks
- j/k/g/G scroll navigation with arrow key support

Why:
- Component needed for right panel in TUI split view
- Shows detailed task spec when task selected in list

Verification:
- 29 unit tests pass
- All 248 tests pass
- Lint passes (0 errors)
## Evidence
- Commits: 6a597aa3c8d438153e33184ac67bbfa8f4791242
- Tests: bun test
- PRs: