kaddidlehopper 0.5.0 → 0.6.0

package/examples/portfolio/assets/src/components/ui/badge.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'span'> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'span'
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }

package/examples/portfolio/assets/src/components/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn('leading-none font-semibold', className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn('px-6', className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

package/examples/portfolio/assets/src/components/ui/checkbox.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }

package/examples/portfolio/assets/src/components/ui/hover-card.tsx

@@ -1,44 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
-
-import { cn } from '@/lib/utils'
-
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
-
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
-}
-
-function HoverCardContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }

package/examples/portfolio/assets/src/components/ui/separator.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-
-import { cn } from '@/lib/utils'
-
-function Separator({
-  className,
-  orientation = 'horizontal',
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator-root"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }

package/examples/portfolio/assets/src/lib/resume-ai-hook.ts

@@ -1,21 +0,0 @@
-import {
-  fetchServerSentEvents,
-  useChat,
-  createChatClientOptions,
-} from '@tanstack/ai-react'
-import type { InferChatMessages } from '@tanstack/ai-react'
-
-// Default chat options for type inference
-const defaultChatOptions = createChatClientOptions({
-  connection: fetchServerSentEvents('/api/resume-chat'),
-})
-
-export type ResumeChatMessages = InferChatMessages<typeof defaultChatOptions>
-
-export const useResumeChat = () => {
-  const chatOptions = createChatClientOptions({
-    connection: fetchServerSentEvents('/api/resume-chat'),
-  })
-
-  return useChat(chatOptions)
-}

package/examples/portfolio/assets/src/lib/resume-tools.ts

@@ -1,165 +0,0 @@
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-import { allJobs, allEducations } from 'content-collections'
-
-// Tool definition for getting jobs by skill
-export const getJobsBySkillToolDef = toolDefinition({
-  name: 'getJobsBySkill',
-  description:
-    'Find all jobs where the candidate used a specific technology or skill. Use this to check if the candidate has experience with particular technologies.',
-  inputSchema: z.object({
-    skill: z
-      .string()
-      .describe(
-        'The skill or technology to search for (e.g., "React", "TypeScript", "Leadership")',
-      ),
-  }),
-  outputSchema: z.array(
-    z.object({
-      jobTitle: z.string(),
-      company: z.string(),
-      location: z.string(),
-      startDate: z.string(),
-      endDate: z.string().optional(),
-      summary: z.string(),
-      tags: z.array(z.string()),
-      content: z.string(),
-    }),
-  ),
-})
-
-// Server implementation
-export const getJobsBySkill = getJobsBySkillToolDef.server(({ skill }) => {
-  return allJobs.filter((job) =>
-    job.tags.some((tag) => tag.toLowerCase().includes(skill.toLowerCase())),
-  )
-})
-
-// Tool definition for getting all jobs
-export const getAllJobsToolDef = toolDefinition({
-  name: 'getAllJobs',
-  description:
-    "Get a complete list of all work experience with full details including job titles, companies, dates, summaries, and skills. Use this to get an overview of the candidate's entire work history.",
-  inputSchema: z.object({}),
-  outputSchema: z.array(
-    z.object({
-      jobTitle: z.string(),
-      company: z.string(),
-      location: z.string(),
-      startDate: z.string(),
-      endDate: z.string().optional(),
-      summary: z.string(),
-      tags: z.array(z.string()),
-      content: z.string(),
-    }),
-  ),
-})
-
-// Server implementation
-export const getAllJobs = getAllJobsToolDef.server(() => {
-  return allJobs.map((job) => ({
-    jobTitle: job.jobTitle,
-    company: job.company,
-    location: job.location,
-    startDate: job.startDate,
-    endDate: job.endDate,
-    summary: job.summary,
-    tags: job.tags,
-    content: job.content,
-  }))
-})
-
-// Tool definition for getting all education
-export const getAllEducationToolDef = toolDefinition({
-  name: 'getAllEducation',
-  description:
-    "Get a complete list of all education history including schools, programs, dates, and skills learned. Use this to understand the candidate's educational background.",
-  inputSchema: z.object({}),
-  outputSchema: z.array(
-    z.object({
-      school: z.string(),
-      summary: z.string(),
-      startDate: z.string(),
-      endDate: z.string().optional(),
-      tags: z.array(z.string()),
-      content: z.string(),
-    }),
-  ),
-})
-
-// Server implementation
-export const getAllEducation = getAllEducationToolDef.server(() => {
-  return allEducations.map((education) => ({
-    school: education.school,
-    summary: education.summary,
-    startDate: education.startDate,
-    endDate: education.endDate,
-    tags: education.tags,
-    content: education.content,
-  }))
-})
-
-// Tool definition for searching experience
-export const searchExperienceToolDef = toolDefinition({
-  name: 'searchExperience',
-  description:
-    'Search for jobs by keywords in the job title, company name, summary, or content. Use this to find specific types of experience or roles.',
-  inputSchema: z.object({
-    query: z
-      .string()
-      .describe(
-        'The search query (e.g., "senior", "lead", "frontend", "startup")',
-      ),
-  }),
-  outputSchema: z.array(
-    z.object({
-      jobTitle: z.string(),
-      company: z.string(),
-      location: z.string(),
-      startDate: z.string(),
-      endDate: z.string().optional(),
-      summary: z.string(),
-      tags: z.array(z.string()),
-      matchedIn: z
-        .array(z.string())
-        .describe('Which fields matched the search'),
-    }),
-  ),
-})
-
-// Server implementation
-export const searchExperience = searchExperienceToolDef.server(({ query }) => {
-  const lowerQuery = query.toLowerCase()
-
-  return allJobs
-    .map((job) => {
-      const matchedIn: string[] = []
-
-      if (job.jobTitle.toLowerCase().includes(lowerQuery)) {
-        matchedIn.push('job title')
-      }
-      if (job.company.toLowerCase().includes(lowerQuery)) {
-        matchedIn.push('company')
-      }
-      if (job.summary.toLowerCase().includes(lowerQuery)) {
-        matchedIn.push('summary')
-      }
-      if (job.content.toLowerCase().includes(lowerQuery)) {
-        matchedIn.push('description')
-      }
-
-      return { job, matchedIn }
-    })
-    .filter(({ matchedIn }) => matchedIn.length > 0)
-    .map(({ job, matchedIn }) => ({
-      jobTitle: job.jobTitle,
-      company: job.company,
-      location: job.location,
-      startDate: job.startDate,
-      endDate: job.endDate,
-      summary: job.summary,
-      tags: job.tags,
-      matchedIn,
-    }))
-})

package/examples/portfolio/assets/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/examples/portfolio/assets/src/routes/__root.tsx

@@ -1,57 +0,0 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
-
-import Header from '../components/Header'
-
-import appCss from '../styles.css?url'
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Portfolio',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <Header />
-        {children}
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}

package/examples/portfolio/assets/src/routes/api.resume-chat.ts

@@ -1,116 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
-import { anthropicText } from '@tanstack/ai-anthropic'
-import { openaiText } from '@tanstack/ai-openai'
-import { geminiText } from '@tanstack/ai-gemini'
-import { ollamaText } from '@tanstack/ai-ollama'
-
-import {
-  getJobsBySkill,
-  getAllJobs,
-  getAllEducation,
-  searchExperience,
-} from '@/lib/resume-tools'
-
-export const Route = createFileRoute('/api/resume-chat')({
-  server: {
-    handlers: {
-      POST: async ({ request }) => {
-        const requestSignal = request.signal
-
-        if (requestSignal.aborted) {
-          return new Response(null, { status: 499 })
-        }
-
-        const abortController = new AbortController()
-
-        try {
-          const body = await request.json()
-          const { messages } = body
-          const data = body.data || {}
-
-          const SYSTEM_PROMPT = `You are a helpful resume assistant helping recruiters and hiring managers evaluate if this candidate is a good fit for their job requirements.
-
-CAPABILITIES:
-1. Use getJobsBySkill to find jobs where the candidate used specific technologies or skills
-2. Use getAllJobs to get the candidate's complete work history with all details
-3. Use getAllEducation to get the candidate's educational background
-4. Use searchExperience to search for specific types of roles or experience by keywords
-
-INSTRUCTIONS:
-- When asked about specific technologies or skills, use getJobsBySkill to find relevant experience
-- When asked about overall experience or career progression, use getAllJobs
-- When asked about education or training, use getAllEducation
-- When asked about specific types of roles (e.g., "senior", "lead"), use searchExperience
-- Be professional, concise, and helpful in your responses
-- Provide specific details from the resume when available
-- When calculating years of experience, consider the date ranges provided
-- If the candidate has experience with something, highlight specific roles and time periods
-- If the candidate lacks certain experience, be honest but constructive
-
-CONTEXT: You are helping evaluate this candidate's qualifications for potential job opportunities.`
-
-          // Determine the best available provider
-          let provider: 'anthropic' | 'openai' | 'gemini' | 'ollama' =
-            data.provider || 'ollama'
-          let model: string = data.model || 'mistral:7b'
-
-          // Use the first available provider with an API key, fallback to ollama
-          if (process.env.ANTHROPIC_API_KEY) {
-            provider = 'anthropic'
-            model = 'claude-haiku-4-5'
-          } else if (process.env.OPENAI_API_KEY) {
-            provider = 'openai'
-            model = 'gpt-4o'
-          } else if (process.env.GEMINI_API_KEY) {
-            provider = 'gemini'
-            model = 'gemini-2.0-flash-exp'
-          }
-          // else keep ollama as default
-
-          // Adapter factory pattern for multi-vendor support
-          const adapterConfig = {
-            anthropic: () =>
-              anthropicText((model || 'claude-haiku-4-5') as any),
-            openai: () => openaiText((model || 'gpt-4o') as any),
-            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
-            ollama: () => ollamaText((model || 'mistral:7b') as any),
-          }
-
-          const adapter = adapterConfig[provider]()
-
-          const stream = chat({
-            adapter,
-            tools: [
-              getJobsBySkill,
-              getAllJobs,
-              getAllEducation,
-              searchExperience,
-            ],
-            systemPrompts: [SYSTEM_PROMPT],
-            agentLoopStrategy: maxIterations(5),
-            messages,
-            abortController,
-          })
-
-          return toServerSentEventsResponse(stream, { abortController })
-        } catch (error: any) {
-          console.error('Resume chat error:', error)
-          if (error.name === 'AbortError' || abortController.signal.aborted) {
-            return new Response(null, { status: 499 })
-          }
-          return new Response(
-            JSON.stringify({
-              error: 'Failed to process chat request',
-              message: error.message,
-            }),
-            {
-              status: 500,
-              headers: { 'Content-Type': 'application/json' },
-            },
-          )
-        }
-      },
-    },
-  },
-})

package/examples/portfolio/assets/src/routes/blog/$slug.tsx

@@ -1,73 +0,0 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-import { allBlogs } from 'content-collections'
-import { marked } from 'marked'
-import { Badge } from '@/components/ui/badge'
-import { ArrowLeft, Calendar } from 'lucide-react'
-
-export const Route = createFileRoute('/blog/$slug')({
-  component: BlogPost,
-})
-
-function BlogPost() {
-  const { slug } = Route.useParams()
-  const post = allBlogs.find((p) => p._meta.path === slug)
-
-  if (!post) {
-    return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">Post not found</h1>
-          <Link to="/" className="text-blue-600 hover:underline">
-            Back to blog
-          </Link>
-        </div>
-      </div>
-    )
-  }
-
-  const html = marked(post.content)
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-3xl mx-auto px-4 py-12">
-        <Link
-          to="/"
-          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-8"
-        >
-          <ArrowLeft size={16} />
-          Back to blog
-        </Link>
-
-        <article>
-          <header className="mb-8">
-            <h1 className="text-4xl font-bold text-gray-900 mb-4">{post.title}</h1>
-            <div className="flex items-center gap-3 text-gray-500 mb-4">
-              <Calendar size={16} />
-              <time>
-                {new Date(post.date).toLocaleDateString('en-US', {
-                  year: 'numeric',
-                  month: 'long',
-                  day: 'numeric',
-                })}
-              </time>
-              <span>·</span>
-              <span>{post.author}</span>
-            </div>
-            <div className="flex flex-wrap gap-2">
-              {post.tags.map((tag) => (
-                <Badge key={tag} variant="secondary">
-                  {tag}
-                </Badge>
-              ))}
-            </div>
-          </header>
-
-          <div
-            className="prose prose-gray max-w-none"
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
-        </article>
-      </div>
-    </div>
-  )
-}